安裝各插件

試過(guò) 安裝“必須安裝”的部分亦可

1、安裝vuex

npm install vuex --save-dev

2、在項(xiàng)目里面安裝vux【必須安裝】

npm install vux --save

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

npm install vux-loader --save-dev

4、安裝less-loader（這個(gè)是用以正確編譯less源碼，否則會(huì)出現(xiàn) ' Cannot GET / '）【必須安裝】

npm install less less-loader --save-dev

5、安裝yaml-loader? (以正確進(jìn)行語(yǔ)言文件讀取)

npm install yaml-loader --save-dev

配置vux環(huán)境

這里注意由于vue-cli3使用的是webpack4而且更新過(guò)vue-loader，所以vux使用起來(lái)會(huì)存在一些兼容的問(wèn)題，這里需要額外配置一下。

官方更新過(guò)vue/cli3.x 的vue-loader，正常配置會(huì)導(dǎo)致加載錯(cuò)誤。所以需要手動(dòng)指定vue-loader的版本來(lái)解決加載問(wèn)題。

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

?

測(cè)試

<template><div><tab><tab-item selected @on-item-click="onItemClick">已發(fā)貨</tab-item><tab-item @on-item-click="onItemClick">未發(fā)貨</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>

?

轉(zhuǎn)載于:https://www.cnblogs.com/dudu123/p/10207215.html

總結(jié)

以上是生活随笔為你收集整理的vue/cli3 配置vux的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。