安裝各插件

試過 安裝“必須安裝”的部分亦可

1、安裝vuex

npm install vuex --save-dev

2、在項目裏面安裝vux【必須安裝】

npm install vux --save

3、安裝vux-loader【必須安裝】

npm install vux-loader --save-dev

4、安裝less-loader（這個是用以正確編譯less源碼，否則會出現 ‘ Cannot GET / ‘）【必須安裝】

npm install less less-loader --save-dev

5、安裝yaml-loader (以正確進行語言文件讀取)

npm install yaml-loader --save-dev

配置vux環境

這裏註意由於vue-cli3使用的是webpack4而且更新過vue-loader，所以vux使用起來會存在一些兼容的問題，這裏需要額外配置一下。

官方更新過vue/cli3.x 的vue-loader，正常配置會導致加載錯誤。所以需要手動指定vue-loader的版本來解決加載問題。

npm install [email protected] -D

新建 vue.config.js，配置如下代碼

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

package.js

測試

<template>
    <div>
        <tab>
            <tab-item selected @on-item-click="onItemClick">已發貨</tab-item>
            <tab-item @on-item-click="onItemClick">未發貨</tab-item>
            <tab-item @on-item-click
 
="onItemClick">全部訂單</tab-item>
        </tab>
    </div>
</template>

<script>
    import { Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem } from ‘vux‘
    export default {
        name: "HeadBar",
        methods:{
            onItemClick (index) {
                console.log(‘on item click:‘, index)
            },
        },
        components: {
            Tab,
            TabItem,
            Sticky,
            Divider,
            XButton,
            Swiper,
            SwiperItem
        },
    }
</script>

<style scoped>

</style>

App.vue 引用

<template>
  <div id="app">
    <HeadBar></HeadBar>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from ‘./components/HelloWorld.vue‘
import HeadBar from ‘./components/HeadBar‘

export default {
  name: ‘app‘,
  components: {
    HelloWorld,
    HeadBar
  }
}
</script>

vue/cli3 配置vux