因为我们项目就是在
vue-cli3.x的基础上进行的一个能力的补充，新的脚手架生成的项目如何引入vant，简单的说一下。
项目地址：https://github.com/Ewall1106/mall
安装
如果你是老的脚手架（
vue-cli2.x）搭建的vue项目，如何引入使用vant可以看看这个-->有赞 vant 组件库的引入；新的脚手架引入 vant 也很简单，我们先安装一下：
$ npm install vant --save
- 因为我们的项目中本来是使用
sass来作为 css 的一个预编译器的，但是 vant 是用的less语法，所以我们还需要安装下less，不然会报错。
$ npm isntall less less-loader --save-dev
按需引入
配置安装参考官网的教程就可以了。
我们就按照教程的来，在我们的babel.config.js中配置一下：
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
// vant引入：
plugins: [
[
"import",
{
libraryName: "vant",
libraryDirectory: "es",
style: true,
},
"vant",
],
],
};
使用
- 在我们项目的main.js文件中引入一下：
// main.js
import { Button } from "vant";
Vue.use(Button);
按照上面这样引入后，就可以在全局任意页面中使用了。
但在我们的项目开发中，发现按需引入的 vant 组件越来越多，所以专门在src/components/Vant文件夹下维护了一份组件引入的
js文件，然后在main.js中统一引入，这样的话就不会把main.js搞的很繁杂了。
import Vue from 'vue'
// https://youzan.github.io/vant/#/zh-CN/home
import {
Button,
Toast,
Dialog,
Field,
...
} from 'vant'
Vue.use(Toast)
.use(Dialog)
.use(Notify)
.use(Field)
...
- 如果你使用
postcss-px-to-viewport来解决移动端的适配问题，并将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
}
}
}
其它
如何修改
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 样式表
