wp大学wordpress建站流程,爱洛阳网,粮油移动端网页设计素材,什么网站开发外贸客户文章目录 前言一、项目中使用步骤1.安装#xff1a;2.样式的导入#xff08;2种方法#xff09;2.1 main.ts全局导入#xff08;平常自己的项目用的这个全局#xff09;2.2 按需引入组件样式 (简单介绍一下)1.安装插件2.配置插件 3.组件按需使用#xff1a;App.vue 总结 … 文章目录 前言一、项目中使用步骤1.安装2.样式的导入2种方法2.1 main.ts全局导入平常自己的项目用的这个全局2.2 按需引入组件样式 (简单介绍一下)1.安装插件2.配置插件 3.组件按需使用App.vue 总结 前言
在Vue 3项目中Vant是一个轻量、可靠的移动端Vue组件库它基于Vue 3开发提供了一套丰富的UI组件非常适合用于构建移动端的应用。以下是如何在Vue 3项目中引入和使用Vant组件库的步骤 一、项目中使用步骤
1.安装
代码如下示例
# Vue 3 项目安装最新版 Vant
npm i vant
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant2.样式的导入2种方法
2.1 main.ts全局导入平常自己的项目用的这个全局
代码如下示例
import { createApp } from vue
import App from ./App.vue
import pinia from ./stores
import router from ./router
// 样式全局使用
import vant/lib/index.css
import ./styles/main.scssconst app createApp(App)app.use(pinia)
app.use(router)
app.mount(#app)
2.2 按需引入组件样式 (简单介绍一下)
在基于 Rsbuild、Vite、webpack 或 vue-cli 的项目中使用 Vant 时可以使用 unplugin-vue-components 插件它可以自动引入组件。
Vant 官方基于 unplugin-vue-components 提供了自动导入样式的解析器 vant/auto-import-resolver两者可以配合使用。
相比于常规用法这种方式可以按需引入组件的 CSS 样式从而减少一部分代码体积但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致我们推荐使用更简便的常规用法。
1.安装插件
# 通过 npm 安装
npm i vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D# 通过 yarn 安装
yarn add vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D# 通过 pnpm 安装
pnpm add vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D# 通过 bun 安装
bun add vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
2.配置插件
如果是基于 Vite 的项目在 vite.config.js 文件中配置插件 配置完成后unplugin-auto-import 会自动导入对应的 Vant API 以及样式。
import vue from vitejs/plugin-vue;
import AutoImport from unplugin-auto-import/vite;
import Components from unplugin-vue-components/vite;
import { VantResolver } from vant/auto-import-resolver;export default {plugins: [vue(),AutoImport({resolvers: [VantResolver()],}),Components({resolvers: [VantResolver()],}),],
};
3.组件按需使用App.vue
script setup langts
import { Button as VanButton } from vant
/scripttemplatevan-button按钮/van-button
/templatestyle scoped/style 总结
现在你已经成功地在Vue 3项目中引入了Vant组件库你可以开始在你的组件中使用这些组件了。例如你可以使用Vant提供的按钮、对话框、列表等组件来构建你的用户界面。
