VUE項目配置VUX入坑并挂載vue-router

寫在前面：

• vux是基于WeUI和vue(2.x)開發的移動端UI元件庫，主要服務于微信頁面。
• vux是元件庫而非架構，雖然有專用的 vux-loader，但并不影響你自由地使用其他元件庫或者工具庫。
• vux必須配合vux-loader使用，如果不使用 vux(2.x)除外，模闆請按照相關文檔正确配置。
• vux預設沒有css檔案，需通過less-loader加載并編譯，另[email protected] 有嚴重的相容問題，請暫時使用 [email protected]^2.7.3。
• vux-loader保證了元件按需使用，是以不用擔心最終打包了整個vux的元件庫代碼。

安裝：

#新手入坑建議

$ npm install vue-cli -g # 如果還沒安裝

$ vue init airyland/vux2 vux

$ npm install

$ npm run dev

#手動配置 

$ npm install vue-cli -g # 如果還沒安裝

$ vue init webpack projectName

$ cd projectName

$ npm install / cnpm install

$ npm run dev

安裝vux ：

$ npm install vux --save

注：如果沒有配置vux相關的腳手架以及編譯運作環境将報錯，且錯誤會映射到vux版本錯誤上

Property or method "$t" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

配置vux：

注：如新入坑者/快速開發者請略過以下步驟

第一步：通過vue-cli腳手架建立項目并下載下傳vux（建議使用Eslint--代碼規範檢查）

$ npm install vux --save

第二步：安裝vux-loader（這個vux文檔似乎沒介紹，當初沒安裝結果報了一堆錯誤）

$ npm install vux-loader --save && $ npm install vux-loader --save-dev

第三步：安裝less-loader （用以正确編譯less源碼，否則會出現 ' Cannot GET / '錯誤） 

$ npm install less less-loader --save && npm install less less-loader --save-dev

第四步：安裝yaml-loader (以正确進行語言檔案讀取, ps：不安裝在dev下不會出錯)

$ npm install yaml-loader --save && $ npm install yaml-loader --save-dev

第五步：重點，vux2必須配合vux-loader使用, 請在build/webpack.base.conf.js按如下代碼配置 

第一步：在build/webpack.base.conf.js 檔案上方引const vuxLoader = require('vux-loader')

第二步：在build/webpack.base.conf.js 檔案最下面添加

const vuxLoader = require('vux-loader')

const webpackConfig = originalConfig // 原來的 module.exports 代碼指派給變量 webpackConfig，

//即将原來的module.exports 改為 const webpackConfig

module.exports = vuxLoader.merge(

webpackConfig, {

plugins: ['vux-ui']

}) 

// ===============================================

// 下面的将module.expotrs 裡面的内容指派給webpackConfig/ 重點

// ===============================================

module.exports 修改為 const webpackConfig （在第20行左右地方）

// 将webpack配置導出去

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

// 最後

extensions: [’.js’, ‘.vue’, ‘.json’,’.less’] //此處添加less