vux是个vue的移动端框架。
目前移动端UI框架这么多,为啥选择vux呢?vux虽然说是个个人维护项目,但是有15000+个star,应该不比其他的团队开源框架差。
最重要的是,目前要做微信公众号和小程序的开发,想着UI风格最好和微信的一致,于是,就决定入坑vux....
确实,刚开始安装使用就遇到了问题,现在记录一下正确的步骤。
本人使用webstorm IDE。
前面安装vue, nodejs,配置全局的vue-cli都不表了,网上很多教程。
1.创建一个vue项目,选择路径,项目名等信息
2.项目建好后,安装vux,其他安装方式
npm install vux --save
文档说vux2必须配合vux-loader
使用,因此还要:
npm install vux-loader --save
3.配置引如vux-ui(重要,重要,重要)
打开build->webpack.base.conf.js
加上
const vuxLoader = require('vux-loader')
将原来的moule.exports 改为,const webpackConfig
并在最后加上
module.exports = vuxLoader.merge(webpackConfig, {
plugins: [
'vux-ui', //这个必须的
'progress-bar',
{
name: 'duplicate-style',
options: {
cssProcessorOptions : {
safe: true,
zindex: false,
autoprefixer: {
add: true,
browsers: [
'iOS >= 7',
'Android >= 4.1'
]
}
}
}
}
]
})
4.测试:
在默认的HelloWorld.vue中引入vux的Group 和 Cell
执行 cnpm run dev
然后打开浏览访问
成功引用了vux