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