vue移動音樂app開發學習（一）：環境搭建

本系列文章是爲了記錄學習中的知識點，便於後期本身觀看。若是有須要的同窗請登陸慕課網，找到Vue 2.0 高級實戰-開發移動端音樂WebApp進行觀看,傳送門。

一：使用vue-cli腳手架搭建:

1：爲了確保你的node版本在4.*以上，輸入 node -v 查看本機node版本，低於4請更新。

2：輸入：  npm install -g vue-cli       安裝vue-cli腳手架。

3：輸入： vue init webpack sell        安裝項目模板，這裏的sell是你模板文件的名字，可自定義。

4：安裝完後會須要你填寫一些東西，跟着圖片下的內容填就好了

5:輸入： cd sell    返回包的根目錄

　　　　npm install    安裝依賴

　　　　npm run dev   運行

二：相關配置：

一、相關依賴的配置：在package.json中的「dependencies」下，加入如下代碼，而後執行npm instal

"stylus": "^0.54.5",
"stylus-loader": "^2.1.1",
"babel-runtime": "^6.0.0", //轉義es語法
"fastclick": "^1.0.6"  //解決移動端的300ms點擊延遲

在devDependencies下加入如下代碼

"babel-polyfill": "^6.2.0"   //es6 api的如promise的轉義 

　　

 

二、eslint規則的修改(可忽略):在eslintrc.js中的rules對象加入如下兩行。若是須要忽略其餘的規則，請查看eslint官網

'eol-last': 0,  // 不檢測文件末尾的空行
'space-before-function-paren':0  // 不檢測函數左括號前的空格

三、公共的路徑配置：修改webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'src': resolve('src'),
      'common': resolve('src/common'),
　　　　'components': resolve('src/components')
    }
  }

在alias對象下咱們能夠定義路徑的變量，原理是調用了resolve()這個方法：

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

在resolve（）方法中，咱們直接將路徑傳入方法中，返回一個拼接好的路徑