Vant组件库官网:Vant 2 - Mobile UI Components built on Vue
一.安装
1.通过 npm 安装(推荐使用)
# Vue 3 项目,安装最新版 Vant:
npm i vant -S
# Vue 2 项目,安装 Vant 2:
npm i vant@latest-v2 -S
2.通过 CDN 安装
(详见官网点击左侧快速上手,不推荐在企业生产环境中使用免费 CDN。)
3.通过脚手架安装
# 安装 Vue Cli
npm install -g @vue/cli
# 创建一个项目
vue create 项目名称
# 创建完成后,可以通过命令打开图形化界面,如下图所示
vue ui
在图形化界面中,点击 依赖
-> 安装依赖
,然后将 vant
添加到依赖中即可。
二.引入组件和使用组件
方式一. 自动按需引入组件 (推荐使用)
(1)安装插件
npm i babel-plugin-import -D
(2)babel.config.js 中配置如下
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
(3)main.js中配置如下
import Vue from 'vue';
import { Button } from 'vant';//引入需要用到的组件
Vue.use(Button);//use组件
(4)在vue页面直接使用组件
<van-button type="primary">主要按钮</van-button>
方式二. 手动按需引入组件
(1)在vue页面引入组件及样式
import Button from "vant/lib/button";//引入组件
import "vant/lib/button/style";//引入样式
(2)在vue页面注册组件(注册f2选1)
components: {
VanButton:Button//注册组件
[Button.name]: Button,//注册组件
},
//二选一
(3)在vue页面使用组件
<!-- 使用组件 -->
<van-button type="primary">主要按钮</van-button>
方式三.导入所有组件
Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法。
(1)在main.js中写入如下
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
(2)在任一需要使用vant组件的页面使用组件
<van-button type="primary">主要按钮</van-button>
Tips: 配置按需引入后,将不允许直接导入所有组件。