网站建设销售销售流程,淘宝代运营去哪里找,wordpress美化底部,做外贸个人网站好吗目录 Vue3 引入使用 vant组件详解1.安装2.引入2.1 全局引入2.2 按需引入2.2.1 vite项目:vite.config.js2.2.2 Webpack项目#xff1a;webpack.config.js2.2.3 配置在vue.config.js中 3.使用 Vue3 引入使用 vant组件详解
Vant是一个强大的移动端组件库#xff0c;目前Vant 官… 目录 Vue3 引入使用 vant组件详解1.安装2.引入2.1 全局引入2.2 按需引入2.2.1 vite项目:vite.config.js2.2.2 Webpack项目webpack.config.js2.2.3 配置在vue.config.js中 3.使用 Vue3 引入使用 vant组件详解
Vant是一个强大的移动端组件库目前Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。本文主要介绍vue3中的vant组件引入使用。
1.安装
vue3中使用如下命令通过 npm 安装本人项目使用的安装方式
# Vue 3 项目安装最新版 Vant
npm i vant也可以使用其他的包管理起进行安装
# 通过 yarn 安装
yarn add vant# 通过 pnpm 安装
pnpm add vant# 通过 Bun 安装
bun add vant2.引入
Vant分为全局引入和按需引入两种方式一般在工程项目中由于全局引入会导致不必要的资源加载为提升项目性能建议进行按需引入。以下我们对两种引入方式进行介绍。
2.1 全局引入
全局引入就是在项目入口main.ts文件直接引入组件以及组件全部的样式文件代码如下所示
// main.ts
import { createApp } from vue;
// 1. 引入你需要的组件
import { Button } from vant;
// 2. 引入组件样式
import vant/lib/index.css;const app createApp();// 3. 注册你需要的组件
app.use(Button);
app.mount(#app)2.2 按需引入
在vue3中按需引入Vant需要使用其他的插件辅助需要安装自动引入组件插件unplugin-vue-components 和Vant 官方提供的 自动导入样式的解析器 vant/auto-import-resolver这两款插件安装方法如下
npm install -D unplugin-vue-components vant/auto-import-resolver然后再vite或者webpack配置中添加相应的配置如下所示
2.2.1 vite项目:vite.config.js
// vite.config.ts
import { defineConfig } from vite
import AutoImport from unplugin-auto-import/vite
import Components from unplugin-vue-components/vite
import { VantResolver } from vant/auto-import-resolver;export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [VantResolver()],}),Components({resolvers: [VantResolver()],}),],
})2.2.2 Webpack项目webpack.config.js
// webpack.config.js
const AutoImport require(unplugin-auto-import/webpack)
const Components require(unplugin-vue-components/webpack)
const { VantResolver } require(vant/auto-import-resolver);module.exports {// ...plugins: [AutoImport({resolvers: [VantResolver()],}),Components({resolvers: [VantResolver()],}),],
}2.2.3 配置在vue.config.js中
导入方法相同
const { defineConfig } require(vue/cli-service)
const AutoImport require(unplugin-auto-import/webpack)
const Components require(unplugin-vue-components/webpack)
const { VantResolver } require(vant/auto-import-resolver);module.exports defineConfig({configureWebpack: {plugins: [AutoImport({resolvers: [VantResolver()],}),Components({resolvers: [VantResolver()],}),],}
})3.使用
引入完毕之后unplugin-vue-components 会解析模板并自动注册对应的组件, vant/auto-import-resolver 会自动引入对应的组件样式。我们可进行按需引入需要使用的组件使用方法如下引入input组件和button组件
templatedivlabelvant示例/labelvan-swipe classmy-swipe :autoplay3000 indicator-colorwhitevan-swipe-itemvant-swipe/van-swipe-itemvan-swipe-item classdif2/van-swipe-itemvan-swipe-item3/van-swipe-itemvan-swipe-item4/van-swipe-item/van-swipe/div
/template
style
.my-swipe .van-swipe-item {color: #fff;font-size: 20px;line-height: 150px;text-align: center;background-color: #39a9ed;}
.my-swipe .dif {background-color: #ccdba3;
}
/style效果如下 此外Vant中还有其他组件基本能满足开发需求提升开发效率详情请见官网Vant
注在vue3中由于vite打包拥有良好的性能本文使用的示例为vite打包方式同时建议使用其他包最新的支持版本进行开发。
