在vue中安裝使用vux

最近由於的工做的緣由在弄vue,從後端弄到前端以前一直用js,如今第一次接觸vue感受還挺有意思的,就是本身太菜了,這個腦子呀。。。。不太夠用。。。。。頁面設計用了一個叫vux的東西,vux能夠提供一些組件,用起來仍是比較方便的,由於本身比較菜吧,因此有不少東西仍是不太深刻了解。。。好比對vux自帶樣式的修改。。但願有大牛看到的話也能夠多多指點。。。前端

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

首先本身要先新建一個vue項目,cmd進入到項目目錄下,進行安裝webpack

  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
    並在build/webpack.base.conf.js中添加以下代碼
    module.exports = vuxLoader.merge(webpackConfig, {
      plugins: ['vux-ui']
    })
  3. 安裝less-loader以正確編譯less源碼
    npm install less less-loader --save-dev
    resolve安裝成功後在代碼的中添加less 如圖:
     
  4. 安裝yaml-loader
    npm install yaml-loader --save-dev 
  5.  從新編譯項目後就可使用vux的組件了
    npm run dev
相關文章
相關標籤/搜索