vux入門

vux

vux讀做[v’ju:z]。它是主要用於移動端的基於weui和vue的ui組件庫。
看git上做者的描述很霸氣。一種愛用不用的感受。的pc端vue的ui框架有iview/elementui等。移動端使用vux較爲方便。
主要用於移動端的基於weui和vue的ui組件庫。

有專用的vux-loader。
使用css預處理工具是less.不影響開發者使用sass等。

安裝

npm i vux
npm i vux-loader

vux2必須配合vux-loader使用, 請在build/webpack.base.conf.js裏參照以下代碼進行配置：

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原來的 module.exports 代碼賦值給變量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

最後效果

前期準備。

1. 建立vue項目。

2. 修改webpack.base.conf.js

const vuxLoader = require('vux-loader')
  const webpackConfig = {
      // .... module.exports裏的東西
  }
  module.exports = vuxLoader.merge(webpackConfig, {
      plugins: ['vux-ui']
  })

使用方法。

-. 局部註冊

// **.vue
  <tag></tag>

  import { ColorPicker } from 'vux'

  export default {
      components: {
          tag: ColorPicker
      }
  }

-. 全局註冊

// main.js
  import Vue from 'vue'
  import { ColorPicker } from 'vux'

  Vue.component('color-picker', ColorPicker)
  // 在*.vue中引用的vux的組件後其下的子組件均可不用註冊vux組件直接使用。

各組件的使用

看官網就行。使用起來很簡單。

---

2018/09/18 by stone