vue-cli3.0与vant的引入

因为我们项目就是在vue-cli3.x的基础上进行的一个能力的补充，新的脚手架生成的项目如何引入vant，简单的说一下。

项目相关：

panda-vue-template

手把手搭建vue小商城2.0

1、安装

如果你是老的脚手架搭建的vue项目，如何引入使用vant可以看看这个-->有赞vant组件库的引入；

新的@vue/cli3.x脚手架引入vant也很简单，我们先安装一下：

$ npm install vant --save

因为我们的项目中本来是使用sass来作为css的一个预编译器的，但是vant是用的less语法，所以我们还需要安装下less，不然会报错。

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

2、配置

配置安装参考官网的引入组件教程就可以了。

我们就按照教程的来，在我们的babel.config.js中配置一下：

module.exports = {

 presets: ['@vue/cli-plugin-babel/preset'],

 // vant引入：

 plugins: [

   [

     'import',

     {

       libraryName: 'vant',

       libraryDirectory: 'es',

       style: name => `${name}/style/less`

     },

     'vant'

   ]

 ]

}

4、使用

按照官网的说明，按需引入一下即可，比如我们在main.js中引入一下：

// main.js

import { Button } from 'vant'

Vue.use(Button)

如果你使用postcss-px-to-viewport来配置vw解决移动端适配解决方案，将viewportWidth设置为了750，那么你还需要在postcss.config.js文件中将其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配置文件中向向预处理器Loader传递选项，就可以替换的vant的默认样式：

module.exports = {

 // ...

 css: {

   loaderOptions: {

     less: {

       modifyVars: {

         'font-size-sm': '100px',

         'font-size-md': '200px',

         'font-size-lg': '300px',

       }

     }

   }

 }

};

vant也给我们提供了一份它的样式表：vant样式表

6、小结

大概就是这么多，具体可以去看看项目中的使用。

参考链接：

修改vant的主题色

vant样式表

panda-vue-template

手把手搭建vue小商城2.0