首页手记 vue-cli3.0与vant的引入

vue-cli3.0与vant的引入

标签：

Html/CSS JavaScript Vue.js

因为我们项目就是在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',
        }
      }
    }
  }
};