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

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