完整形式:npm install vant -save
指令:npm i babel-plugin-import -D (简写)
完整指令:npm install babel-plugin-import --save-dev
1.在main.js中引入如下
2.在src文件夹中创建如下文件夹
3.放置想要使用的文件
2.在需要的组建中直接引入然后使用
Vant 是轻量、可靠的移动端 Vue 组件库,是 有赞前端团队开发的产品。
通过vue-cli3创建项目,用vue ui 命令打开图形化界面,点击安装依赖按钮,然后搜索vant,安装。
安装完vant后,引入组件,才能使用。这里我选择自动按需引入组件,这也是官方推荐的一种引入方式。
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。
# 安装插件
npm: npm i babel-plugin-import -D
yarn: yarn add babel-plugin-import --dev
然后,在 babel.config.js 中配置
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true }, 'vant']
]
最后,就可以再组件中直接引入,使用vant组件了:
OK,完成!