在最近的項目中,引用了vux,在可拓展性以及復用性,都算是比較優秀的框架了。但是美中不足的是對於vux在對於vue-cli3.0的跟進還沒有同步 需要自己做下修改,同比 有贊的vant 以及 iview 都有了對於vue-cli3.0的相容了 現記錄如下: 一、安裝vue-cli 3 首先官方文檔: ...
在最近的項目中,引用了vux,在可拓展性以及復用性,都算是比較優秀的框架了。但是美中不足的是對於vux在對於vue-cli3.0的跟進還沒有同步 需要自己做下修改,同比 有贊的vant 以及 iview 都有了對於vue-cli3.0的相容了
現記錄如下:
一、安裝vue-cli 3
首先官方文檔:https://cli.vuejs.org/
官方文檔包含了很多的內容,很靠譜,比較全面,第一步當然是把官方文檔看一遍。
安裝
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦LTS)。你可以使用 nvm 或 nvm-windows在同一臺電腦中管理多個 Node 版本。
可以使用下列任一命令安裝這個新的包:
npm install -g @vue/cli # OR yarn global add @vue/cli
創建項目
運行以下命令來創建一個新項目. 選擇babel,eslint 還有router 等等!
vue create demo
安裝之後執行就可以使用了
cd 項目名
npm run serve
二、配置vux
在網上搜了會,發現幾乎都是vue-cli舊版的配置方法,有一些已經不能用了,在這裡整理下正確的配置方法
安裝各插件
1、在項目裡面安裝vux
npm install vux --save
2、安裝vux-loader(必須安裝)
npm install vux-loader --save-dev
3、安裝less-loader(這個是用以正確編譯less源碼,否則會出現 ' Cannot GET / ')
npm install less less-loader --save-dev
4、安裝yaml-loader (以正確進行語言文件讀取)
npm install yaml-loader --save-dev
配置vux環境
這裡註意由於vue-cli3使用的是webpack4而且更新過vue-loader,所以vux使用起來會存在一些相容的問題,這裡需要額外配置一下。
官方更新過vue/cli3.x 的vue-loader,正常配置會導致載入錯誤。所以需要手動指定vue-loader的版本來解決載入問題。
yarn add vue-loader@14.2.2 -D or npm install vue-loader@14.2.2 -D
在packageage同級目錄下新建一個文件vue.config.js
vue-cli3.x的一些服務配置整個的結構都遷移到CLI Service裡面了,對於一些基礎配置和一些擴展配置提供了vue.config.js。那麼問題來了,對於這麼一個入口,肯定不能直接按照vux-loader的方法直接在配置文件置空webpackConfig了。而單獨組件引用的話又被告知 使用錯誤(事實上都直接報錯了,因為沒有正確對於組件的load)。
參照vux-loader文檔的配置說明,那麼就是merge以下vux-loader的配置到webpackConfig裡面唄,接下來就簡單了。我們只需要在vue.config.js文件中的webpackConfig的配置中mergevux-loader就行了
根據官方文檔,在文件裡加入以下內容:
module.exports = { configureWebpack: config => { require('vux-loader').merge(config, { options: {}, plugins: ['vux-ui'] }) } }
目前就可以使用了, 不過到目前為止 還是有些小問題 提的issue 還沒有回應 如果採用解構的方式在main.js 引用 並不能成功引用
可以採用這種方式(示例)
import Popup from 'vux/src/components/popup' import Alert from 'vux/src/components/alert' import Confirm from 'vux/src/components/confirm' import Cell from 'vux/src/components/cell'
ok 就醬紫~~~