vue-cli3.0與vant的引入

因為我們專案就是在vue-cli3.x的基礎上進行的一個能力的補充，新的腳手架生成的專案如何引入vant，簡單的說一下。
專案相關：

1、安裝

• 如果你是老的腳手架搭建的vue專案，如何引入使用vant可以看看這個；
• 新的@vue/cli3.x腳手架引入vant也很簡單，我們先安裝一下：

$ npm install vant --save

• 因為我們的專案中本來是使用sass來作為css的一個預編譯器的，但是vant是用的less語法，所以我們還需要安裝下less，不然會報錯。

$ npm isntall less less-loader --save-dev

2、配置

• 配置安裝參考官網的就可以了。
• 我們就按照教程的來，在我們的中配置一下：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  // vant引入：
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: name => `${name}/style/less`
      },
      'vant'
    ]
  ]
}

4、使用

• 按照官網的說明，按需引入一下即可，比如我們在中引入一下：

// main.js
import { Button } from 'vant'
Vue.use(Button)

• 如果你使用postcss-px-to-viewport來，將viewportWidth設定為了750，那麼你還需要在檔案中將其selectorBlackList名單中把vant加進去，因為vant的樣式是按325px來設計的，不然vant的元件都會縮小一半。

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px',
      viewportWidth: 750,
      unitPrecision: 3,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
+     selectorBlackList: ['.ignore', 'van'],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [],
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 568
    }
  }
}

5、其它

• 如何修改vant的主題色？在@vue/cli3.x的專案中，修改主題色變的是件簡單的事情。
• 我們可以在vue.config.js配置檔案中向，就可以替換的vant的預設樣式：

module.exports = {
  // ...
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          'font-size-sm': '100px',
          'font-size-md': '200px',
          'font-size-lg': '300px',
        }
      }
    }
  }
};

• vant也給我們提供了一份它的樣式表：

6、小結

• 大概就是這麼多，具體可以去看看專案中的使用。

參考連結：