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