vant组件库入门demo
简介Vant 是有赞前端团队开源的移动端vue组件库,适用于手机端h5页面。cdn使用已有项目中使用,Vant提供了简单的cdn引入的使用方式。第一步:引入css和js<!-- 引入样式文件 --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"/><!--
·
简介
Vant 是有赞前端团队开源的移动端vue组件库,适用于手机端h5页面。
cdn使用
已有项目中使用,Vant提供了简单的cdn引入的使用方式。
- 第一步:引入css和js
<!-- 引入样式文件 -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"
/>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
- 第二步:实例化Vant
<script>
// 在 #app 标签下渲染一个按钮组件
const app = Vue.createApp({
});
app.use(vant);
//挂载
app.mount('#app');
</script>
//html部分
<div id="app">
<van-button type="primary" size="large">大号按钮</van-button>
</div>
- 注册组件引用
<script>
// 调用函数组件,弹出一个 Toast
vant.Toast('提示');
// 通过 CDN 引入时不会自动注册 Lazyload 组件
// 可以通过下面的方式手动注册
app.use(vant.Lazyload);
</script>
脚手架安装
在新项目中使用,推荐使用vue-cli 创建项目安装Vant.
# 安装 Vue Cli
npm install -g @vue/cli
# 创建一个项目
vue create hello-world
# 创建完成后,可以通过命令打开图形化界面
vue ui
点击 依赖 -> 安装依赖,然后将 vant 添加到依赖中即可
引入组件
手动引入组件
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法。
import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
const app = createApp();
app.use(Vant);
使用 babel 插件 babel-plugin-import是一款babel插件,在编译过程中将import的写法自动转换成按需引入的方式.
# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D
.babelrc配置
// 在 .babelrc 或 babel-loader 中添加插件配置
// 注意:webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
更多细节请点击
更多推荐
已为社区贡献1条内容
所有评论(0)