vue项目中安装使用vux

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

 

猜你喜欢

转载自www.cnblogs.com/wayneliu007/p/10549333.html
0条评论
添加一条新回复
  
今日推荐