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