vant里面怎么使用import引用_Vant 的引入及使用

因为我们项目就是在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文件中引入