搭建vux项目
介绍:VUX是基于WeUI和Vue(2.x)开发的移动端UI组件库,基于webpack + vue-loader + vux可以快速开发移动端页面
VUX 必须配合 vux-loader 使用
首先搭建vue项目
1.安装vue
npm install vue --save
可以安装淘宝镜像
npm install --registry=https://registry.npm.taobao.org
2.安装三脚架vue-cli
npm install vue-cli -g || cnpm install vue-cli -g
3.搭建项目
vue init webpack +项目名(my-project)
4.cd my-project 进入项目中
5.npm install || cnpm install 安装依赖包
6.npm run dev || cnpm run dev 启动项目
到这项目启动 证明vue项目搭建成功
安装vux
1.npm install vux --save || cnpm install vux --save
2. 安装vux-loader
npm install vux-loader --save-dev || cnpm install vux-loader --save-dev
3.安装less-loader
npm install less less-loader --save-dev || cnpm install less less-loader --save-dev
4.在build文件夹下webpack.base.conf.js 文件进行配置
新加内容:
const vuxLoader = require(‘vux-loader’)
const webpackConfig = originalConfig
originalConfig就是原来的 module.exports出去的代码,把它整个赋值给变量 webpackConfig
在最后加入 module.exports = vuxLoader.merge(webpackConfig, { plugins: [‘vux-ui’] }) 引用插件vux
在 resolve:{
extensions:[’.js’, ‘.vue’, ‘.json’, ‘.less’]}里加入".less"
最后启动项目 npm run dev || cnpm run dev
启动出现的问题:
1.报错【Syntax Error: TypeError: this.getOptions is not a function】
可能原因:默认安装了最新版本的less和less-loader,
解决办法:
1.卸掉最新的版本,下载稳定的版本 推荐使用less@3.9.0 less-loader@4.1.10
npm uninstall less || cnpm uninstall less
npm uninstall less-loade || cnpm uninstall less-loade
安装:
npm install less@3.9.0 || cnpm uninstall less@3.9.0
npm uninstall less-loader@4.1.10 || cnpm uninstall less-loader@4.1.10
安装后重启即可
2.vue 解决*!!vue-style-loader!css-loader?{“sourceMap”:true}或_modules/vux/src/components/alert/index.vue…问题
可能是css解析出现的问题: