vue-cli(vue2.x)中使用vux（vue移动端UI组件库）

vux官网链接：https://doc.vux.li/zh-CN

1、在项目根目录下使用npm安装

npm install vux --save
因为vux使用less来书写样式文件的，所以还要安装less编译的loader：
npm install less less-loader -D

2、vux2必须配合vux-loader使用

如果npm下载的是vux2.x版本的话，那么就必须配合vux-loader使用，不然就会报错！

2.1、安装vux-loader:

npm install vux-loader -D

2.2、请在build/webpack.base.conf.js里参照如下代码进行配置:

const vuxLoader = require('vux-loader')  //把vux-loader引入
const webpackConfig = {originalConfig}  // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, { //把新旧配置进行merge（放到页面最底部）
  plugins: ['vux-ui']
})

3、使用

3.1全局注册：

在入口文件main.js文件中引入所需的组件，多个组件用英文逗号隔开：

import { Group, Cell} from 'vux'   //引入所需组件

Vue.component('group', Group)      //注册组件
Vue.component('cell', Cell)

注册之后就可以在vue的任意组件的template标签中使用引入的vux组件了。如果没有引入，也没有注册组件就使用组件的话就会报错！

<group>
   <cell title="title" value="value"></cell>
</group>

3.2局部注册

在需要引入vux组件的.vue组件中，引入所需的vux组件：

<script>
import { Group, Cell} from 'vux'  //引入所需组件
export default {
  name: 'App',
  components: {   //注册组件
    Group,
    Cell
  }
}
</script>

然后在该组件HTML部分template标签中就可以使用了。如果没有引入，也没有注册组件就使用组件的话就会报错！：

<group>
   <cell title="title" value="value"></cell>
</group>