安裝各插件

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

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 vue-loader@14.2.2 -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>

?

轉載于:https://www.cnblogs.com/dudu123/p/10207215.html

總結

以上是生活随笔為你收集整理的vue/cli3 配置vux的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。