vue-cli3.x 使用vux
阿新 • • 發佈:2018-11-22
vue-cli使用vux分為兩種模式,1,建立專案的時候新增,2,已經建立過vue專案後新增
一,建立專案的時候新增
1,安裝vue-cli (https://cli.vuejs.org/zh/guide/installation.html)
npm install -g @vue/cli
# OR
yarn global add @vue/cli
2,建立帶有vux的專案(https://doc.vux.li/zh-CN/install/biolerplate.html)
vue init airyland/vux2 projectPath
3,進入專案,啟動程式
cd projectPath npm install --registry=https://registry.npm.taobao.org # 或者 cnpm install 或者 yarn npm run dev # 或者 yarn dev
過程中要檢視vue的版本,為3.x
二,已建立vue-cli專案,再加入vux(以下步驟是已經安裝vue-cli的新增下)
1,建立一個專案
vue create demo
2,進入專案,測試能不能啟動(不能啟動自己找原因吧,勿噴)
cd demo
yarn run serve
3,載入vux
yarn add vux
4,載入vux-loader
yarn add vux-loader
5,安裝less-loader
yarn add less less-loader
6,安裝yaml-loader (以正確進行語言檔案讀取)
yarn yaml-loader
7,在專案中建立vue.config.js進行配置(本人的如下)
module.exports = {
configureWebpack: config => {
require('vux-loader').merge(config, {
options: {},
plugins: ['vux-ui']
})
},
}
8,最後就是使用運行了
error:執行的時候出現
Module parse failed: Unexpected token (3:0) You may need an appropriate loader to handle this file type. | import { render, staticRenderFns } from "./App.vue?vue&type=template&id=7ba5bd90&" | import script from "./App.vue?vue&type=script&lang=js&" > ../node_modules/vux-loader/src/script-loader.js!export * from "./App.vue?vue&type=script&lang=js&" | import style0 from "./App.vue?vue&type=style&index=0&lang=css&"
則:執行下面程式碼
yarn add [email protected] -D
or
npm install [email protected] -D
報錯下面錯誤請看https://github.com/airyland/vux/issues/2503(目前本人還沒有其他解決辦法)
Uncaught ReferenceError: exports is not defined
注意:本人看了下vux github的內容發現,目前還未適配[email protected],而且vux是根據vue官方的webpack版本進行修改的,大家謹慎使用
然後再嘗試
本文參考:https://blog.csdn.net/Honnyee/article/details/82181620
https://segmentfault.com/a/1190000014586699
http://xd-code.com/2018/08/24/vue-cli-plugin-vux/