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引入而且配置成功