1. 程式人生 > >vue 環境的配置

vue 環境的配置

vue的專案的環境的配置,對我們有用到的依賴以及配置的總結,方便以後使用:

如果配置了cnpm,把下面的npm換成cnpm會節約你好多時間。如果沒有配置,那就這樣配置一下:

npm install -g cnpm --registry=https://registry.npm.taobao.org

具體的可以看這個 http://npm.taobao.org/


1、安裝sass的依賴包

npm install --save-dev sass-loader
//sass-loader依賴於node-sass npm install --save-dev node-sass

在vue檔案中引用
<style lang="scss" scoped>
      @import './home.scss'; </style> 
 

2、安裝less的依賴包

npm install less less-loader --save

在vue檔案中引用

<style lang="less" scoped>     @import './home.less'; </style>   3.如果是移動端我們可以安裝lib-flexible  彈性盒佈局 具體的可以參考  https://www.npmjs.com/package/flexibility
    1. 安裝lib-flexible
    npm i lib-flexible --save

2. 在專案入口檔案main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

3.在專案根目錄的index.html 頭部加入手機端適配的meta的程式碼,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
這個可以不加
flexible.js中有判斷如果沒有自己會自動新增,如果你加了可能會報一個這樣的警告



4.安裝px2rem-loader

npm install px2rem-loader
在實際的開發中,使用flexible外掛時 會自動把px轉換成rem單位,這樣我們在開發的時候直接就用px,
px2rem-loader 直接幫我們轉成rem

5.配置px2rem-loader

在vue-cli生成的webpack 配置中,vue-loader 的options和其他樣式檔案loader 最終都是由build/untils.js裡的一個方法生成的。

我們只需要在cssLoader後面加上一個px2remLoader即可,px2rem-loader的remUnit 選項意思是1rem=多少畫素,結合lib-flexible,我們將px2remLoader的option.remUnit 設定成設計稿寬度的1/10,

這裡我們假設設計稿的寬度為750px ,並將px2remLoader 放進loaders陣列中

 var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75 
    }
  }
  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }