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