在vue中安裝使用vux

摘要： 最近因為的工作的原因在弄vue，從後端弄到前端之前一直用js，現在第一次接觸vue感覺還挺有意思的，就是自己太菜了，這個腦子呀。。。。不太夠用。。。。。頁面設計用了一個叫vux的東西，vux可以提供一些元件，用起來還是比較方便的，因為自己比較菜吧，所以有很多東西還是不太深入瞭解。。。比如對vu...

最近因為的工作的原因在弄vue，從後端弄到前端之前一直用js，現在第一次接觸vue感覺還挺有意思的，就是自己太菜了，這個腦子呀。。。。不太夠用。。。。。頁面設計用了一個叫vux的東西，vux可以提供一些元件，用起來還是比較方便的，因為自己比較菜吧，所以有很多東西還是不太深入瞭解。。。比如對vux自帶樣式的修改。。希望有大牛看到的話也可以多多指點。。。

今天就記錄一下vux的安裝使用吧。。。。。。

首先自己要先新建一個vue專案，cmd進入到專案目錄下，進行安裝

1. 在專案目錄下安裝vux（也可以使用yarn安裝，本人沒有使用過就不多介紹了，我是用npm安裝，網速慢的話可以使用淘寶映象安裝）

   npm install vux --save
   

   安裝淘寶映象

   npm install --registry=https://registry.npm.taobao.org
   npm config get registry//判斷淘寶映象是否安裝成功
   

   使用淘寶映象安裝vux

   cnpm install vux --save
   

    

2. 安裝成功後安裝vux-loader，如果使用的是vux2的話必須安裝vux-loader

   npm install vux-loader --save-dev
   

   安裝成功後在 build/webpack.base.conf.js 中進行配置

   const vuxLoader = require('vux-loader')
   
   

   將原來的 module.exports 程式碼賦值給變數 webpackConfig

   <img src="https://img2018.cnblogs.com/blog/1135675/201809/1135675-20180915124642376-1647004465.png" alt="" />

   並在build/webpack.base.conf.js中新增如下程式碼

   module.exports = vuxLoader.merge(webpackConfig, {
   plugins: ['vux-ui']
   })
   
   
   

3. 安裝less-loader以正確編譯less原始碼

   npm install less less-loader --save-dev
   

   <code>安裝成功後在程式碼的</code>resolve<code>中新增less 如圖：</code>

   <img src="https://img2018.cnblogs.com/blog/1135675/201809/1135675-20180915133052905-593515149.png" alt="" />　

4. 安裝yaml-loader

   npm install yaml-loader --save-dev 
   

5. 　重新編譯專案後就可以使用vux的元件了

   npm run dev