vue项目中使用vant插件

下面使用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组件了

vant其它的组件同理也是这样引入使用就可以了。
官方推荐这种是因为不需要再引入相对应组件的样式，也不需要把整个vant插件导入项目中来。此方法可按照项目中引入的vant组件，自动引入对应组件的样式，相对其它方法来说提高了项目的编译性能