Vue

安裝步驟

• 安裝node，確保版本在4以上 v4.4.5是穩(wěn)定版本
• sudo npm install -g vue-cli (win下可以省略sudo)
• vue init webpack sell 使用webpack模板，項(xiàng)目名字叫sell
• project name sell項(xiàng)目名稱 ok
• project description項(xiàng)目描述
• Author作者
• Use ESLint to lint your code?代碼風(fēng)格檢查器 yes
• Pick an ESLint preset預(yù)設(shè) Standard
• Setup unit tests with Karma + Mocha?單元測試 n 忽略
• cd sell
• npm install 安裝依賴
• npm run dev 運(yùn)行

目錄介紹

一級目錄

• build和config文件夾：webpack配制相關(guān)

• node_modules文件夾：npm install 安裝的依賴代碼庫

• src文件夾：存放項(xiàng)目源碼，開發(fā)所有源碼都會放在scr目錄下

• static文件夾：存放靜態(tài)資源的，.gitkeep作用是當(dāng)這個目錄為空也會把這個目錄提交到git倉庫里

• .babelrc 是babel的一些配制，因?yàn)槲覀兊拇a都是是es6，二大部分瀏覽器不能直接支持es6語法，做法是把ES6通過babel編譯成ES5 ，

  1. presets表示預(yù)設(shè)（表示babel轉(zhuǎn)換預(yù)先安裝的插件）
  2. plugins:配制其他插件（transform-runtime可以把es6的一些方法做轉(zhuǎn)換）
  3. comments:false 表示轉(zhuǎn)換后代碼不生成注釋

• .editorconfig:編輯器的配制

  1. charset = utf-8 表示編碼
  2. indent_style = space 表示縮進(jìn)風(fēng)格，基于一個空格做縮進(jìn)
  3. indent_size = 2 表示縮進(jìn)大小是2個
  4. end_of_line = lf 表示換行符的風(fēng)格
  5. insert_final_newline = true 表示當(dāng)你創(chuàng)建一個文件，自動會在文件末尾插入一個新行
  6. trim_trailing_whitespace = true 表示會自動移出行尾多余空格

• .eslintignore: 忽略語法檢查的目錄文件

• eslintrc.js :eslint 的配制文件

  1. 可以通過rules 重新定義規(guī)則，如果想忽略某些規(guī)則可以設(shè)置為0
  2. no-debugger 不允許代碼中出現(xiàn)debugger，生產(chǎn)環(huán)境為0

• .gitigore:git倉庫忽略這些文件或目錄，不會被提交到git代碼里

• index.html 入口HTML文件

• package.json 項(xiàng)目配置文件

• README.md 項(xiàng)目的一些描述文件

webpack

• dev-server.js

  1. path :是nodejs提供的API，表示提供文件路徑操作方法
  2. express：是nodejs框架，用他啟動webserver
  3. webpack:核心編譯工具
  4. config:配制文件，對運(yùn)行時和開發(fā)時的一些配制
  5. proxyMiddleware：http協(xié)議代理的中間件，可以代理和轉(zhuǎn)發(fā)一些我們需要的轉(zhuǎn)發(fā)的API
  6. webpackConfig:是webpack相關(guān)配制

• webpack.dev.conf.js

  1. merge：用來合并配制文件
  2. utils：工具方法

• webpack.base.conf.js

  1. projectRpopt:定義當(dāng)前項(xiàng)目的根目錄
  2. modules.exports: webpack基本配制

• 使用webpack的項(xiàng)目 圖片盡量用單張圖

• icoMoon 制作圖標(biāo)字體工具

關(guān)于項(xiàng)目樣式

影響css布局的樣式——寬、高會觸發(fā)重繪的不可被棄的——字體、顏色可被棄的