手把手教你如何使用Vant组件
发布时间
阅读量：
阅读量
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
二.引入组件和使用组件
方式一. 自动按需引入组件 (推荐使用)
(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: 配置按需引入后，将不允许直接导入所有组件。
全部评论 (0)
还没有任何评论哟~