vue-cli 3.0腳手架與vux的配合使用

方式程式碼發表於2018-11-01
VueUX

　　在最近的專案中，引用了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  就醬紫~~~

相關文章