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

　　在最近的項目中，引用了vux，在可拓展性以及複用性，都算是比較優秀的框架了。可是美中不足的是對於vux在對於vue-cli3.0的跟進尚未同步 須要本身作下修改，同比 有讚的vant 以及 iview 都有了對於vue-cli3.0的兼容了

　　現記錄以下： 

　1、安裝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

　　

　2、配置vux
　　在網上搜了會，發現幾乎都是vue-cli舊版的配置方法，有一些已經不能用了，在這裏整理下正確的配置方法

　　安裝各插件

　　一、在項目裏面安裝vux

npm install vux --save

　　二、安裝vux-loader（必須安裝）

npm install vux-loader --save-dev

　　三、安裝less-loader（這個是用以正確編譯less源碼，不然會出現 ' Cannot GET / '）

npm install less less-loader --save-dev

　　四、安裝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  就醬紫~~~