第2章 項目準備工做

內容均爲《Vue2.0開發企業級移動端音樂Web App 》學習筆記

包括項目需求分析、腳手架初始化代碼、項目目錄介紹及圖標字體、公共樣式等資源的準備 。

一、公共資源準備

stylus文件夾

文件名稱	描述
variable.styl	樣式變量文件（如顏色定義規範，文字大小規範）
reset.styl	重置默認樣式文件
base.styl	基本樣式（body，html，在此可能會引用variable.styl 來使用它的變量）
icon.styl	字體圖標
index.styl	主體樣式（引入reset.styl、base.styl 、icon.styl ）

fonts文件夾

文件名稱	描述
music-icon.ttf	字體文件

image公用圖片

二、腳手架初始化代碼

vue init webpack vue-music
複製代碼

• 是否須要路由 y
• 是否使用eslint y
• 是否用單元測試 n
• 是否用e2e測試 n

cd vue-music
cnpm install
cnpm run dev
複製代碼

三、創建項目文件，使得項目結構更加清晰

src文件目錄	描述
api	數據交互
common	公共的字體圖片樣式腳本文件 （font 放字體 、image 圖片、js 插件、stylus 樣式）
components	組件文件
router	路由文件
store	vuex集中管理狀態

四、修改eslint的配置規則 （.eslintrc文件）

使用beauty美化代碼以後，通常地，代碼會符合eslint的校驗要求。可是，禁止函數圓括號以前有一個空格(space-before-function-paren)和文件末尾保留一行空行(eol-last)這兩個規則 ，在beauty中沒有對應的匹配規則。若是，這兩個要求不是非要遵照，能夠在.eslintrc文件中，將其設置爲0

'eol-last': 0,
'space-before-function-paren': 0
複製代碼

這樣，在編寫代碼時，不用考慮代碼格式。保存時，自動被美化，且符合eslint的校驗要求

擴展

1. 用vscode的話，能夠在vscode安裝eslint插件

2. 齒輪圖標-設置-輸入autoFixOnSave-打上勾

這樣能夠在每次保存的自動格式化，可是默認只支持 javascript .js 文件

3. 齒輪圖標-設置-輸入validate -打上勾給須要自動格式化的文件，默認是全勾選的

這樣一旦保存的話，就能夠將本身的代碼自動格式化爲符合eslint規則的代碼哦

五、安裝插件

babel-runtime和babel-polyfill 插件可讓一些低版本瀏覽器對es6的支持

cnpm install --save babel-runtime
cnpm install --save-dev babel-polyfill
cnpm install --save fastclick
複製代碼

• babel-polyfill Babel 默認只轉換新的 JavaScript 語法，而不轉換新的 API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法（好比 Object.assign）都不會轉譯。 若是想使用這些新的對象和方法，則須要爲當前環境提供一個polyfill
• babel-runtime babel-runtime 是爲了減小重複代碼而生的。 babel-polyfill解決了Babel不轉換新API的問題，可是直接在代碼中插入幫助函數，會致使污染了全局環境，而且不一樣的代碼文件中包含重複的代碼，致使編譯後的代碼體積變大。 （好比：上述的幫助函數_defineProperty有可能在不少的代碼模塊文件中都會被插入） Babel爲了解決這個問題，提供了單獨的包babel-runtime用以提供編譯模塊的工具函數， 啓用插件babel-plugin-transform-runtime後，Babel就會使用babel-runtime下的工具函數 （請參考:babel-runtime和babel-polyfill的做用介紹和使用）
• fastclick 解決移動端300ms延遲

六、在vue-cli腳手架使用插件

import 'babel-polyfill'// 引入babel-polyfill
 import fastclick from 'fastclick'// 引入fastclick
 fastclick.attach(document.body)// 使用fastclick
複製代碼

七、安裝stylus stylus-loader

cnpm install stylus stylus-loader  --save-dev
複製代碼

八、文件路徑配置

當咱們引入common下的文件時，咱們平時可能這樣寫

import './common/stylus/index.styl'
複製代碼

如今咱們能夠在webpack.base.conf.js，看resolve這個函數 __dirname爲當前目錄build，..（往上找）到dir對應的目錄。

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
複製代碼

在webpack.base.conf.js 配置

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'common': resolve('src/common'),
      'components': resolve('src/components'),
      'base': resolve('src/base'),
      'api': resolve('src/api'),
    }
    },
複製代碼

這樣咱們就能夠直接這樣寫了

import 'common/stylus/index.styl'
複製代碼