1.安装
在现有项目中使用 Vant 时,可以通过 npm 或 yarn 进行安装:
Vue 2 项目,安装 Vant 2:
npm i vant -S
Vue 3 项目,安装 Vant 3:
npm i vant@next -S
yarn安装
yarn add vant -S
2.引入组件
自动按需引入组件 (推荐)
babel-plugin-import
是一款 babel
插件,它会在编译过程中将 import
的写法自动转换为按需引入的方式。
安装插件
npm i babel-plugin-import -D
yarn安装
yarn add babel-plugin-import -D
在.babelrc 中添加配置
注意:webpack 1 无需设置 libraryDirectory
接着你可以在代码中直接引入 Vant 组件
插件会自动将代码转化为方式二中的按需引入形式
在src文件中新建一个plugin文件夹,创建vant.js用来放引入的插件
3.全局引入
在全局的main.js中import引入
4.组件中使用
<van-button type="primary">主要按钮</van-button>
效果如图所示: