目录vue3中Vant的使用一. 安装Vant组件库二. 引入组件(推荐)三. 引入组件 另外还有两种方法 Vue2,vue3引入vantvue2引入vant&n
1.通过npm安装
# Vue 3 项目,安装最新版 Vant
npm i vant
# Vue 2 项目,安装 Vant 2
npm i vant@latest-v2
在基于 vite
、webpack
或 vue-cli
的项目中使用 Vant 时,推荐安装 unplugin-vue-components 插件,它可以自动按需引入组件
1.安装插件
# 通过 npm 安装
npm i unplugin-vue-components -D
# 通过 yarn 安装
yarn add unplugin-vue-components -D
# 通过 pnpm 安装
pnpm add unplugin-vue-components -D
2.配置插件
基于 vue-cli
的项目,在 vue.config.js
文件中配置插件:
const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/WEBpack');
module.exports = {
configureWebpack: {
plugins: [
ComponentsPlugin({
resolvers: [VantResolver()],
}),
],
},
};
完成以上两步,就可以直接使用 Vant 组件了:
import { createApp } from 'vue';
import { Button } from 'vant';
const app = createApp();
app.use(Button);
1. 导入所有组件(不推荐)
Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法。
import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.CSS';
const app = createApp();
app.use(Vant);
2.手动按需引入组件(不推荐)
在不使用任何构建插件的情况下,可以手动引入需要使用的组件和样式。
// 引入组件脚本
import Button from 'vant/es/button/index';
// 引入组件样式
// 若组件没有样式文件,则无须引入
import 'vant/es/button/style/index';
这些都是根据官方文档给出的使用方法,详情可见官方 :Vant 3 - Mobile UI Components built on Vue
1.npm i vant -S
2.npm i babel-plugin-import -D
3.找到后缀名为.babelrc的文件
//在原本代码后面补充这段代码
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
//补充完后效果
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transfORM-vue-jsx", "transform-runtime", ["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]]
}
4.引入成功后,使用步骤如下
<template>
<div class="home">
<img alt="Vue loGo" src="../assets/logo.png" @click="go">
<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</div>
</template>
<script>
// @ is an alias to /src
import { Button } from 'vant';
export default {
name: 'Home',
methods:{
go(){
this.$router.push("/about");
}
},
components:{
"van-button":Button
}
}
</script>
npm i vant@next -S
main.js / main.ts中引入
import Vant from 'vant';
import 'vant/lib/index.css';
createApp(App).use(store).use(Vant).use(router).mount("#app");
组件中使用
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" @click="go">
<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</div>
</template>
<script>
// @ is an alias to /src
import { Button } from 'vant';
export default {
name: 'Home',
methods:{
go(){
this.$router.push("/about");
}
}
}
</script>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue3中Vant的使用及说明
本文链接: https://www.lsjlt.com/news/177857.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0