下面使用vant插件的方法是官方推荐的一种方法，是自动按需引入的。如果您按照下面方法没能成功引入vant，您可以到官网去查看其它引入方法。vant官网
- 使用vue-cli脚手架创建项目，
- 使用 *npm install -g @vue/cli 命令全局安装 Vue Cli 脚手架
- 创建项目，使用 vue create myAppName 创建项目
目录结构
- 在项目的根目录下，使用 npm i vant -S 命令安装vant
- 在项目的根目录下，使用 npm i babel-plugin-import -D 命令安装babel 插件。它会在编译过程中将 import 的写法自动转换为按需引入的方式
- 配置 babel.config.js 文件
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
- 使用vant组件
src/app.vue
<template>
<div id="app">
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</div>
</template>
<script>
import { Button } from 'vant';
export default {
components: {
[Button.name]: Button
}
}
</script>
<style >
#app{
width: 100%;
height: 100%;
}
</style>
运行vue项目，您就可以看到vant插件的Button组件了
Button插件效果展示
vant其它的组件同理也是这样引入使用就可以了。
官方推荐这种是因为不需要再引入相对应组件的样式，也不需要把整个vant插件导入项目中来。此方法可按照项目中引入的vant组件，自动引入对应组件的样式，相对其它方法来说提高了项目的编译性能
