vue-cli3.x 配置vux

第一步、安装vue-cli3

// 查看vue版本，版本是3.x 以上，说明vue版本是3.0版本以上的
vue --version 
复制代码

新建一个vue项目

// 这里的demo是你项目的名称
vue create demo 

// 我选择的是默认安装，安装完成以后
// 安装完成以后，进入到项目中
cd demo 

// 项目跑起来(vue-cli3 默认启动项目的命令 npm run serve)
npm run serve
复制代码

项目跑起来的效果：

2、安装vux配置vux

安装vux的依赖

1. 安装vux

npm install vux --save
复制代码

2. 安装vux-loader (必须安装)

npm install vux-loader --save-dev
复制代码

3. 安装less

npm install less less-loader --save-dev

复制代码

4. 安装指定vue-loader，解决按需加载问题

npm install vue-loader@14.2.2 --save-dev
复制代码

配置vue.config.js

在demo项目下，新建一个 vue.config.js 的文件

const vuxLoader = require('vux-loader')
module.exports = {
    configureWebpack: config => {
        vuxLoader.merge(config, {
            options: {},
            plugins: ['vux-ui']
        })

    }
}

复制代码

测试一下，vux是否配置成功

// main.js 中按需引入插件
import Vue from 'vue'
import App from './App.vue'

// 这里按需引入vux的组件
import { ButtonTab, ButtonTabItem } from 'vux'

Vue.component('button-tab', ButtonTab)
Vue.component('button-tab-item', ButtonTabItem)

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
}).$mount('#app')

复制代码

<!----> app.vue 中引入组件
 <button-tab>
        <button-tab-item>今天</button-tab-item>
        <button-tab-item selected>明天</button-tab-item>
        <button-tab-item>昨天</button-tab-item>
</button-tab>
复制代码

最后，vux引入而且配置成功