1.由於vue專案依賴 node.js npm 需要先安裝

win+r ==》cmd  ==》node -v 回車 會出現node,js的版本

 輸入npm -v  回車 會出現npm的版本

輸入vue -V 回車 會出現vue的版本

2.安裝vue

npm install -g vue-cli  

//-g表示全域性安裝，vue-cli是模組，全域性安裝的模組可以在命令列直接使用  

由於npm網站在國內速度非常慢，所以可以在命令後面加上淘寶的映象

之後，可以vue --V檢視vue是否安裝好，出現版本號即安裝成功。

3.接下來是建立專案框架

如果想放到指定的目錄下，先進入這個目錄再執行建立專案的命令

E:\test\vue init webpack myProjectName          //建立一個基於"webpack"的專案，後面是專案名 

依次按照提示輸入，專案名、專案描述、專案作者等等，

然後一路回車  看到最後這個專案就建立好了。

4.執行測試

npm run dev  

npm run build 打包  

注意：

設定config檔案下的index.js中build物件assetsPublicPath屬性值為空，防止打包後識別檔案路徑錯誤。埠號dev的port屬性可設定埠號

按需安裝其他依賴

1、fastclick 

先執行安裝fastclick的命令。

npm install fastclick -S（npm install --save fastclick）

之後，在main.js中引入，並繫結到body

import  FastClick  from  'fastclick'  

FastClick.attach(document.body)

2、axios

npm install axios

//使用淘寶源

 cnpm install axios

在main.js中引入

import  axios   from   'axios'

Vue.prototype.$http = axios   (根據個人習慣，可加可不加)

3、vux

<1>.npm install vux --save

<2>. 安裝vux-loader （這個vux文件似乎沒介紹，當初沒安裝結果報了一堆錯誤） 

npm install vux-loader --save  -dev      (npm install vux-loader --save)

<3>. 在build/webpack.base.conf.js 檔案進行配置

const vuxLoader = require('vux-loader')

const webpackConfig = originalConfig          // 原來的 module.exports 程式碼賦值給變數 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })

4、less

<1>.npm install less less-loader --save  -dev   (npm install less less-loader --save)

<2>.修改webpack.config.js檔案，配置loader載入依賴，讓其支援外部的less,在原來的程式碼上新增

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader",

}

<3>.App.vue中  style標籤里加上lang=”less”

  style內引入less檔案路徑，例如：@import './assets/less/common.less';

也可以直接引入less檔案，在index.html引入後，需要引入less.js

5、安裝sass

<1>npm install --save-dev sass-loader                   //sass-loader依賴於node-sass

<2>npm install --save-dev node-sass

<3>在build資料夾下的webpack.base.conf.js的rules裡面新增配置

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

5、引入font-awesome圖示

先cnpm  install  font-awesome  --save引入依賴

然後在main.js引入 font-awesome/css/font-awesome.min.css 即可。

例如：import  './assets/font-awesome/css/font-awesome.min.css'    //字型圖示