| vant 介绍 | | | --- | --- | Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持 babel-plugin-import 支持 TypeScript 支持 SSR 组件中文文档地址：https://youzan.github.io/vant/#/zh-CN/intro | vant 安装配置 | | | --- | --- | 1、安装 ``` npm install vant -S ``` 2、安装 babel-plugin-import 插件，babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 ``` npm install babel-plugin-import -D [--save-dev] ``` 3、在.babelrc文件中配置plugins（插件） ``` "plugins": [ "transform-vue-jsx", "transform-runtime", ["import", [{ "libraryName": "vant", "style": true }]] ], ``` 4、按需要引入vant组件，比如我们要在HelloWord.vue组件中使用 Loading 组件，我们可以先 在组件中引入 ``` <script> import { Loading } from 'vant' export default { components: { [Loading.name]: Loading } } </script> ``` 5、然后在页面中加入组件代码 ``` <template> <div> <van-loading color="black" /> <van-loading color="white" /> <van-loading type="spinner" color="black" /> <van-loading type="spinner" color="white" /> </div> </template> ``` 这样就可以看到效果了