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>