Vux在vue-cli中的搭建和配置
一、vue安裝（node.js）
1、安裝node.js
https://nodejs.org/en/下載安裝
2、安裝淘寶映象
檢查方式 cnpm -V 出現版本號
3、安裝webpack
npm install webpack -g
檢查方式 webpack -V
4、安裝腳手架
npm install vue-cli -g
檢查方式 vue -V
二、用vue-cli
1、window+r開啟命令列，輸入cmd
2、輸入 cd desktop /*desktop指桌面*/
3、建立專案
vue init webpack project /*project是專案名稱，自己取，不能用中文*/
進入安裝會有很多問題（ps:use Eslint to lint your code）建議選no;
4、進入專案
cd desktop/project
5、安裝 npm
輸入 npm install 如果下載很久沒有成功就輸入cnpm install
6、安裝vue路由
cnpm install vue-router vue-resource --save
7、啟動專案
輸入 npm run dev
瀏覽器中開啟localhost：8080 /*預設8080*/
三、vux的搭建
1、安裝vuex
npm install vuex --save-dev
2、在專案裡面安裝vux
npm install vux --save
3、安裝vux-loader（必須安裝）
npm install vux-loader --save-dev
4、安裝less-loader（這個是用以正確編譯less原始碼，否則會出現 ' Cannot GET / '）
npm install less less-loader --save-dev
5、安裝yaml-loader (以正確進行語言檔案讀取)
npm install yaml-loader --save-dev
6、vux環境配置
在bulid —>webpack.base.conf.js下，
1）首先引入vux-loader
| 1 | const vuxLoader = require('vux-loader') |
2）然後將原來的module.exports 替換成const webpackConfig
| 123 | module.exports = vuxLoader.merge(webpackConfig, {plugins: ['vux-ui']}) |
3）vux引入成功，可以在vue檔案直接 import { XXX, XXX } from 'vux' 了
| 123456789101112 | <template><x-header>2017年滿意度調查</x-header></template><scirpt>import { XHeader, Confirm} from 'vux'export default {components: {Confirm,XHeader}}</script> |