活动公告

系统通知
通知：关于部分勋章领取条件及购买价格调整的通知
05-18 21:22
系统通知
通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，资源失效请在帖子内回复要求补档，会尽快处理！
10-23 09:31
>社区 > 科技 > 经验交流 >帖子
本版发帖返回

Vue3结合Vant UI构建高效移动端应用 从环境搭建到组件使用再到项目优化与部署的完整实战指南助您成为移动开发领域的专家

这是个蓝孩子 当前离线 威震华夏关云长
SunJu_FaceMall

3万

主题

2860

科技点

3万

积分

白金月票

碾压王

积分
32872

塔罗立华奏
<font color=白金月票" /> 发表于 2025-9-4 01:50:07 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
引言

在当今移动互联网时代，高效、美观、易用的移动应用成为企业的核心竞争力。Vue3作为目前最流行的前端框架之一，凭借其响应式系统、组合式API和优化的性能，为开发者提供了更强大的开发能力。而Vant UI则是一款专为移动端设计的轻量、可靠的UI组件库，它提供了丰富的组件和良好的用户体验。将Vue3与Vant UI结合使用，可以大大提高移动应用的开发效率和质量。本文将详细介绍如何从零开始，使用Vue3和Vant UI构建高效的移动端应用，涵盖环境搭建、组件使用、项目优化与部署的全过程，助您成为移动开发领域的专家。

环境搭建

Node.js安装

首先，我们需要安装Node.js，它是Vue项目运行的基础环境。Vue3要求Node.js版本在12.0.0或以上。

1. 访问Node.js官网下载最新的LTS版本。
2. 根据操作系统选择对应的安装包进行安装。
3. 安装完成后，在终端或命令提示符中运行以下命令验证安装：
  2. node -v
  3. npm -v
复制代码

如果显示版本号，则表示安装成功。

安装Vue CLI或Vite

Vue CLI是Vue的官方脚手架工具，而Vite是下一代前端构建工具，两者都可以用来创建Vue3项目。Vite具有更快的冷启动和热更新速度，推荐使用。
  2. npm create vite@latest my-vue-app -- --template vue
复制代码

首先安装Vue CLI：
  2. npm install -g @vue/cli
复制代码

然后创建项目：
  2. vue create my-vue-app
复制代码

在创建过程中，选择Vue3预设。

项目初始化

创建Vue3项目

我们以Vite为例创建Vue3项目：
  2. npm create vite@latest my-vue-app -- --template vue
  3. cd my-vue-app
  4. npm install
复制代码

安装和配置Vant UI

Vant UI可以通过npm或yarn安装：
  2. npm install vant
复制代码

引入Vant UI

Vant UI支持两种引入方式：完整引入和按需引入。

在main.js中引入：
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  4. import Vant from 'vant'
  5. import 'vant/lib/index.css'
  7. const app = createApp(App)
  8. app.use(Vant)
  9. app.mount('#app')
复制代码

按需引入可以减少打包体积，提高应用加载速度。

首先安装插件：
  2. npm install unplugin-vue-components unplugin-auto-import -D
复制代码

然后在vite.config.js中配置：
  2. import { defineConfig } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import Components from 'unplugin-vue-components/vite'
  5. import { VantResolver } from 'unplugin-vue-components/resolvers'
  7. export default defineConfig({
  8.   plugins: [
  9.     vue(),
  10.     Components({
  11.       resolvers: [VantResolver()],
  12.     }),
  13.   ],
  14. })
复制代码

这样配置后，可以直接在模板中使用Vant组件，无需手动引入。

项目结构说明

一个典型的Vue3+Vant项目结构如下：
  2. my-vue-app/
  3. ├── public/             # 静态资源
  4. ├── src/                # 源代码
  5. │   ├── assets/         # 项目资源
  6. │   ├── components/     # 公共组件
  7. │   ├── views/          # 页面组件
  8. │   ├── router/         # 路由配置
  9. │   ├── store/          # 状态管理
  10. │   ├── utils/          # 工具函数
  11. │   ├── App.vue         # 根组件
  12. │   └── main.js         # 入口文件
  13. ├── .gitignore          # Git忽略文件
  14. ├── index.html          # HTML模板
  15. ├── package.json        # 项目配置
  16. ├── vite.config.js      # Vite配置
  17. └── README.md           # 项目说明
复制代码

基础配置

在vite.config.js中，我们可以进行一些基础配置：
  2. import { defineConfig } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import { resolve } from 'path'
  5. import Components from 'unplugin-vue-components/vite'
  6. import { VantResolver } from 'unplugin-vue-components/resolvers'
  8. export default defineConfig({
  9.   plugins: [
  10.     vue(),
  11.     Components({
  12.       resolvers: [VantResolver()],
  13.     }),
  14.   ],
  15.   resolve: {
  16.     alias: {
  17.       '@': resolve(__dirname, 'src'),
  18.     },
  19.   },
  20.   server: {
  21.     port: 3000,
  22.     open: true,
  23.     proxy: {
  24.       '/api': {
  25.         target: 'http://localhost:8080',
  26.         changeOrigin: true,
  27.         rewrite: (path) => path.replace(/^\/api/, ''),
  28.       },
  29.     },
  30.   },
  31. })
复制代码

基础组件使用

Vant UI提供了丰富的组件，下面我们介绍一些常用组件的使用方法。

布局组件

Vant提供了Row和Col组件来实现栅格布局：
  2. <template>
  3.   <van-row>
  4.     <van-col span="8">span: 8</van-col>
  5.     <van-col span="8">span: 8</van-col>
  6.     <van-col span="8">span: 8</van-col>
  7.   </van-row>
  8.   
  9.   <van-row>
  10.     <van-col span="12">span: 12</van-col>
  11.     <van-col span="12">span: 12</van-col>
  12.   </van-row>
  13.   
  14.   <van-row gutter="20">
  15.     <van-col span="8">span: 8</van-col>
  16.     <van-col span="8">span: 8</van-col>
  17.     <van-col span="8">span: 8</van-col>
  18.   </van-row>
  19. </template>
复制代码

Vant提供了Flex组件来实现弹性布局：
  2. <template>
  3.   <van-flex>
  4.     <div class="flex-item">1</div>
  5.     <div class="flex-item">2</div>
  6.     <div class="flex-item">3</div>
  7.   </van-flex>
  8.   
  9.   <van-flex justify="space-between">
  10.     <div class="flex-item">1</div>
  11.     <div class="flex-item">2</div>
  12.     <div class="flex-item">3</div>
  13.   </van-flex>
  14. </template>
  16. <style>
  17. .flex-item {
  18.   width: 50px;
  19.   height: 50px;
  20.   background-color: #f2f6fc;
  21.   text-align: center;
  22.   line-height: 50px;
  23. }
  24. </style>
复制代码

表单组件
  2. <template>
  3.   <van-button type="primary">主要按钮</van-button>
  4.   <van-button type="success">成功按钮</van-button>
  5.   <van-button type="default">默认按钮</van-button>
  6.   <van-button type="warning">警告按钮</van-button>
  7.   <van-button type="danger">危险按钮</van-button>
  8.   
  9.   <van-button plain type="primary">朴素按钮</van-button>
  10.   <van-button disabled type="primary">禁用按钮</van-button>
  11.   <van-button loading type="primary">加载中</van-button>
  12.   
  13.   <van-button square type="primary">方形按钮</van-button>
  14.   <van-button round type="primary">圆形按钮</van-button>
  15.   
  16.   <van-block>
  17.     <van-button type="primary" block>块级按钮</van-button>
  18.   </van-block>
  19.   
  20.   <van-button type="primary" size="large">大号按钮</van-button>
  21.   <van-button type="primary" size="normal">普通按钮</van-button>
  22.   <van-button type="primary" size="small">小型按钮</van-button>
  23.   <van-button type="primary" size="mini">迷你按钮</van-button>
  24. </template>
复制代码
  2. <template>
  3.   <van-field
  4.     v-model="value"
  5.     label="文本"
  6.     placeholder="请输入文本"
  7.   />
  8.   
  9.   <van-field
  10.     v-model="value2"
  11.     label="密码"
  12.     type="password"
  13.     placeholder="请输入密码"
  14.   />
  15.   
  16.   <van-field
  17.     v-model="value3"
  18.     label="手机号"
  19.     type="tel"
  20.     placeholder="请输入手机号"
  21.   />
  22.   
  23.   <van-field
  24.     v-model="value4"
  25.     label="数字"
  26.     type="number"
  27.     placeholder="请输入数字"
  28.   />
  29.   
  30.   <van-field
  31.     v-model="value5"
  32.     label="短信验证码"
  33.     center
  34.     placeholder="请输入短信验证码"
  35.   >
  36.     <template #button>
  37.       <van-button size="small" type="primary">发送验证码</van-button>
  38.     </template>
  39.   </van-field>
  40.   
  41.   <van-field
  42.     v-model="value6"
  43.     label="留言"
  44.     type="textarea"
  45.     placeholder="请输入留言"
  46.     rows="2"
  47.     autosize
  48.   />
  49. </template>
  51. <script>
  52. import { ref } from 'vue';
  54. export default {
  55.   setup() {
  56.     const value = ref('');
  57.     const value2 = ref('');
  58.     const value3 = ref('');
  59.     const value4 = ref('');
  60.     const value5 = ref('');
  61.     const value6 = ref('');
  62.    
  63.     return {
  64.       value,
  65.       value2,
  66.       value3,
  67.       value4,
  68.       value5,
  69.       value6
  70.     };
  71.   }
  72. }
  73. </script>
复制代码
  2. <template>
  3.   <van-radio-group v-model="radio" direction="horizontal">
  4.     <van-radio name="1">单选框 1</van-radio>
  5.     <van-radio name="2">单选框 2</van-radio>
  6.   </van-radio-group>
  7.   
  8.   <van-radio-group v-model="radio2">
  9.     <van-cell-group inset>
  10.       <van-cell title="单选框 1" clickable @click="radio2 = '1'">
  11.         <template #right-icon>
  12.           <van-radio name="1" />
  13.         </template>
  14.       </van-cell>
  15.       <van-cell title="单选框 2" clickable @click="radio2 = '2'">
  16.         <template #right-icon>
  17.           <van-radio name="2" />
  18.         </template>
  19.       </van-cell>
  20.     </van-cell-group>
  21.   </van-radio-group>
  22. </template>
  24. <script>
  25. import { ref } from 'vue';
  27. export default {
  28.   setup() {
  29.     const radio = ref('1');
  30.     const radio2 = ref('1');
  31.    
  32.     return {
  33.       radio,
  34.       radio2
  35.     };
  36.   }
  37. }
  38. </script>
复制代码
  2. <template>
  3.   <van-checkbox-group v-model="checked" direction="horizontal">
  4.     <van-checkbox name="a">复选框 a</van-checkbox>
  5.     <van-checkbox name="b">复选框 b</van-checkbox>
  6.     <van-checkbox name="c">复选框 c</van-checkbox>
  7.   </van-checkbox-group>
  8.   
  9.   <van-checkbox-group v-model="checked2">
  10.     <van-cell-group inset>
  11.       <van-cell
  12.         v-for="(item, index) in list"
  13.         clickable
  14.         :key="item"
  15.         :title="`复选框 ${item}`"
  16.         @click="toggle(index)"
  17.       >
  18.         <template #right-icon>
  19.           <van-checkbox :name="item" ref="checkboxes" />
  20.         </template>
  21.       </van-cell>
  22.     </van-cell-group>
  23.   </van-checkbox-group>
  24. </template>
  26. <script>
  27. import { ref } from 'vue';
  29. export default {
  30.   setup() {
  31.     const checked = ref(['a', 'b']);
  32.     const checked2 = ref([]);
  33.     const list = ['a', 'b', 'c'];
  34.     const checkboxes = ref([]);
  35.    
  36.     const toggle = (index) => {
  37.       checkboxes.value[index].toggle();
  38.     };
  39.    
  40.     return {
  41.       checked,
  42.       checked2,
  43.       list,
  44.       checkboxes,
  45.       toggle
  46.     };
  47.   }
  48. }
  49. </script>
复制代码
  2. <template>
  3.   <van-form @submit="onSubmit">
  4.     <van-cell-group inset>
  5.       <van-field
  6.         v-model="username"
  7.         name="username"
  8.         label="用户名"
  9.         placeholder="用户名"
  10.         :rules="[{ required: true, message: '请填写用户名' }]"
  11.       />
  12.       <van-field
  13.         v-model="password"
  14.         type="password"
  15.         name="password"
  16.         label="密码"
  17.         placeholder="密码"
  18.         :rules="[{ required: true, message: '请填写密码' }]"
  19.       />
  20.     </van-cell-group>
  21.     <div style="margin: 16px;">
  22.       <van-button round block type="primary" native-type="submit">
  23.         提交
  24.       </van-button>
  25.     </div>
  26.   </van-form>
  27. </template>
  29. <script>
  30. import { ref } from 'vue';
  31. import { showToast } from 'vant';
  33. export default {
  34.   setup() {
  35.     const username = ref('');
  36.     const password = ref('');
  37.    
  38.     const onSubmit = (values) => {
  39.       console.log('form submit', values);
  40.       showToast('提交成功');
  41.     };
  42.    
  43.     return {
  44.       username,
  45.       password,
  46.       onSubmit,
  47.     };
  48.   },
  49. };
  50. </script>
复制代码

反馈组件
  2. <template>
  3.   <van-button type="primary" @click="showToast">成功提示</van-button>
  4.   <van-button type="primary" @click="showLoadingToast">加载提示</van-button>
  5.   <van-button type="primary" @click="showFailToast">失败提示</van-button>
  6. </template>
  8. <script>
  9. import { showToast, showLoadingToast, showFailToast } from 'vant';
  11. export default {
  12.   setup() {
  13.     const showToast = () => {
  14.       showToast('成功提示');
  15.     };
  16.    
  17.     const showLoadingToast = () => {
  18.       showLoadingToast({
  19.         message: '加载中...',
  20.         forbidClick: true,
  21.       });
  22.     };
  23.    
  24.     const showFailToast = () => {
  25.       showFailToast('失败提示');
  26.     };
  27.    
  28.     return {
  29.       showToast,
  30.       showLoadingToast,
  31.       showFailToast
  32.     };
  33.   }
  34. }
  35. </script>
复制代码
  2. <template>
  3.   <van-button type="primary" @click="showDialog">提示弹窗</van-button>
  4.   <van-button type="primary" @click="showConfirmDialog">确认弹窗</van-button>
  5.   <van-button type="primary" @click="showAsyncCloseDialog">异步关闭</van-button>
  6. </template>
  8. <script>
  9. import { showDialog, showConfirmDialog } from 'vant';
  11. export default {
  12.   setup() {
  13.     const showDialog = () => {
  14.       showDialog({
  15.         title: '标题',
  16.         message: '这是一个提示弹窗',
  17.       }).then(() => {
  18.         // on close
  19.       });
  20.     };
  21.    
  22.     const showConfirmDialog = () => {
  23.       showConfirmDialog({
  24.         title: '标题',
  25.         message: '这是一个确认弹窗',
  26.       })
  27.         .then(() => {
  28.           // on confirm
  29.           console.log('确认');
  30.         })
  31.         .catch(() => {
  32.           // on cancel
  33.           console.log('取消');
  34.         });
  35.     };
  36.    
  37.     const showAsyncCloseDialog = () => {
  38.       showDialog({
  39.         title: '标题',
  40.         message: '弹窗内容',
  41.         beforeClose: (action, done) => {
  42.           if (action === 'confirm') {
  43.             setTimeout(done, 1000);
  44.           } else {
  45.             done();
  46.           }
  47.         },
  48.       });
  49.     };
  50.    
  51.     return {
  52.       showDialog,
  53.       showConfirmDialog,
  54.       showAsyncCloseDialog
  55.     };
  56.   }
  57. }
  58. </script>
复制代码

展示组件
  2. <template>
  3.   <van-cell-group>
  4.     <van-cell title="单元格" value="内容" />
  5.     <van-cell title="单元格" value="内容" label="描述信息" />
  6.   </van-cell-group>
  7.   
  8.   <van-cell-group inset>
  9.     <van-cell title="单元格" value="内容" />
  10.     <van-cell title="单元格" value="内容" label="描述信息" />
  11.   </van-cell-group>
  12.   
  13.   <van-cell-group>
  14.     <van-cell title="单元格" is-link />
  15.     <van-cell title="单元格" is-link value="内容" />
  16.     <van-cell title="单元格" is-link value="内容" label="描述信息" />
  17.   </van-cell-group>
  18.   
  19.   <van-cell-group>
  20.     <van-cell title="标题" icon="location-o" />
  21.     <van-cell title="标题" icon="location-o" value="内容" />
  22.     <van-cell title="标题" icon="location-o" value="内容" label="描述信息" is-link />
  23.   </van-cell-group>
  24. </template>
复制代码
  2. <template>
  3.   <van-image
  4.     width="100"
  5.     height="100"
  6.     src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
  7.   />
  8.   
  9.   <van-image
  10.     round
  11.     width="100"
  12.     height="100"
  13.     src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
  14.   />
  15.   
  16.   <van-image
  17.     width="100"
  18.     height="100"
  19.     fit="contain"
  20.     src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
  21.   />
  22.   
  23.   <van-image
  24.     width="100"
  25.     height="100"
  26.     src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
  27.     @click="previewImage"
  28.   />
  29.   
  30.   <van-image
  31.     width="100"
  32.     height="100"
  33.     src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
  34.     lazy-load
  35.   />
  36. </template>
  38. <script>
  39. import { showImagePreview } from 'vant';
  41. export default {
  42.   setup() {
  43.     const previewImage = () => {
  44.       showImagePreview([
  45.         'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
  46.       ]);
  47.     };
  48.    
  49.     return {
  50.       previewImage
  51.     };
  52.   }
  53. }
  54. </script>
复制代码
  2. <template>
  3.   <van-list
  4.     v-model:loading="loading"
  5.     :finished="finished"
  6.     finished-text="没有更多了"
  7.     @load="onLoad"
  8.   >
  9.     <van-cell v-for="item in list" :key="item" :title="item" />
  10.   </van-list>
  11. </template>
  13. <script>
  14. import { ref } from 'vue';
  16. export default {
  17.   setup() {
  18.     const list = ref([]);
  19.     const loading = ref(false);
  20.     const finished = ref(false);
  21.    
  22.     const onLoad = () => {
  23.       // 异步更新数据
  24.       // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  25.       setTimeout(() => {
  26.         for (let i = 0; i < 10; i++) {
  27.           list.value.push(list.value.length + 1);
  28.         }
  29.         // 加载状态结束
  30.         loading.value = false;
  31.         
  32.         // 数据全部加载完成
  33.         if (list.value.length >= 40) {
  34.           finished.value = true;
  35.         }
  36.       }, 1000);
  37.     };
  38.    
  39.     return {
  40.       list,
  41.       loading,
  42.       finished,
  43.       onLoad,
  44.     };
  45.   },
  46. };
  47. </script>
复制代码

导航组件
  2. <template>
  3.   <van-tabs v-model:active="active">
  4.     <van-tab title="标签 1">内容 1</van-tab>
  5.     <van-tab title="标签 2">内容 2</van-tab>
  6.     <van-tab title="标签 3">内容 3</van-tab>
  7.     <van-tab title="标签 4">内容 4</van-tab>
  8.   </van-tabs>
  9.   
  10.   <van-tabs v-model:active="active2" type="card">
  11.     <van-tab title="标签 1">内容 1</van-tab>
  12.     <van-tab title="标签 2">内容 2</van-tab>
  13.     <van-tab title="标签 3">内容 3</van-tab>
  14.   </van-tabs>
  15.   
  16.   <van-tabs v-model:active="active3" swipeable>
  17.     <van-tab v-for="index in 4" :title="'标签 ' + index" :key="index">
  18.       内容 {{ index }}
  19.     </van-tab>
  20.   </van-tabs>
  21. </template>
  23. <script>
  24. import { ref } from 'vue';
  26. export default {
  27.   setup() {
  28.     const active = ref(0);
  29.     const active2 = ref(0);
  30.     const active3 = ref(0);
  31.    
  32.     return {
  33.       active,
  34.       active2,
  35.       active3
  36.     };
  37.   }
  38. }
  39. </script>
复制代码
  2. <template>
  3.   <van-nav-bar
  4.     title="标题"
  5.     left-text="返回"
  6.     right-text="按钮"
  7.     left-arrow
  8.     @click-left="onClickLeft"
  9.     @click-right="onClickRight"
  10.   />
  11.   
  12.   <van-nav-bar
  13.     title="标题"
  14.     left-text="返回"
  15.     left-arrow
  16.   >
  17.     <template #right>
  18.       <van-icon name="search" size="18" />
  19.     </template>
  20.   </van-nav-bar>
  21. </template>
  23. <script>
  24. import { showToast } from 'vant';
  26. export default {
  27.   setup() {
  28.     const onClickLeft = () => showToast('返回');
  29.     const onClickRight = () => showToast('按钮');
  30.    
  31.     return {
  32.       onClickLeft,
  33.       onClickRight
  34.     };
  35.   }
  36. }
  37. </script>
复制代码
  2. <template>
  3.   <div class="content">
  4.     <router-view />
  5.   </div>
  6.   
  7.   <van-tabbar v-model="active">
  8.     <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  9.     <van-tabbar-item icon="search">标签</van-tabbar-item>
  10.     <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  11.     <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  12.   </van-tabbar>
  13. </template>
  15. <script>
  16. import { ref } from 'vue';
  18. export default {
  19.   setup() {
  20.     const active = ref(0);
  21.     return { active };
  22.   },
  23. };
  24. </script>
  26. <style>
  27. .content {
  28.   padding-bottom: 50px;
  29. }
  30. </style>
复制代码

高级组件与自定义

复杂组件的使用
  2. <template>
  3.   <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  4.     <van-swipe-item>1</van-swipe-item>
  5.     <van-swipe-item>2</van-swipe-item>
  6.     <van-swipe-item>3</van-swipe-item>
  7.     <van-swipe-item>4</van-swipe-item>
  8.   </van-swipe>
  9.   
  10.   <van-swipe :loop="false" class="my-swipe-2">
  11.     <van-swipe-item>1</van-swipe-item>
  12.     <van-swipe-item>2</van-swipe-item>
  13.     <van-swipe-item>3</van-swipe-item>
  14.     <van-swipe-item>4</van-swipe-item>
  15.   </van-swipe>
  16.   
  17.   <van-swipe class="my-swipe-3" :autoplay="3000">
  18.     <van-swipe-item v-for="(image, index) in images" :key="index">
  19.       <img :src="image" />
  20.     </van-swipe-item>
  21.   </van-swipe>
  22. </template>
  24. <script>
  25. import { ref } from 'vue';
  27. export default {
  28.   setup() {
  29.     const images = [
  30.       'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  31.       'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  32.     ];
  33.    
  34.     return {
  35.       images
  36.     };
  37.   }
  38. }
  39. </script>
  41. <style>
  42. .my-swipe .van-swipe-item {
  43.   color: #fff;
  44.   font-size: 20px;
  45.   line-height: 150px;
  46.   text-align: center;
  47.   background-color: #39a9ed;
  48. }
  50. .my-swipe-2 .van-swipe-item {
  51.   color: #fff;
  52.   font-size: 20px;
  53.   line-height: 150px;
  54.   text-align: center;
  55.   background-color: #39a9ed;
  56. }
  58. .my-swipe-3 .van-swipe-item {
  59.   display: flex;
  60.   justify-content: center;
  61.   align-items: center;
  62.   height: 200px;
  63. }
  65. .my-swipe-3 img {
  66.   width: 100%;
  67.   height: 100%;
  68.   object-fit: cover;
  69. }
  70. </style>
复制代码
  2. <template>
  3.   <van-grid :column-num="3">
  4.     <van-grid-item icon="photo-o" text="文字" />
  5.     <van-grid-item icon="photo-o" text="文字" />
  6.     <van-grid-item icon="photo-o" text="文字" />
  7.     <van-grid-item icon="photo-o" text="文字" />
  8.     <van-grid-item icon="photo-o" text="文字" />
  9.     <van-grid-item icon="photo-o" text="文字" />
  10.   </van-grid>
  11.   
  12.   <van-grid :border="false" :column-num="4">
  13.     <van-grid-item>
  14.       <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
  15.       <span style="margin-top: 8px">自定义内容</span>
  16.     </van-grid-item>
  17.     <van-grid-item>
  18.       <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" />
  19.       <span style="margin-top: 8px">自定义内容</span>
  20.     </van-grid-item>
  21.     <van-grid-item>
  22.       <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
  23.       <span style="margin-top: 8px">自定义内容</span>
  24.     </van-grid-item>
  25.     <van-grid-item>
  26.       <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg" />
  27.       <span style="margin-top: 8px">自定义内容</span>
  28.     </van-grid-item>
  29.   </van-grid>
  30.   
  31.   <van-grid :gutter="10" :column-num="3">
  32.     <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
  33.   </van-grid>
  34.   
  35.   <van-grid direction="horizontal" :column-num="3">
  36.     <van-grid-item icon="photo-o" text="文字" />
  37.     <van-grid-item icon="photo-o" text="文字" />
  38.     <van-grid-item icon="photo-o" text="文字" />
  39.   </van-grid>
  40. </template>
复制代码
  2. <template>
  3.   <van-collapse v-model="activeNames">
  4.     <van-collapse-item title="标题1" name="1">
  5.       内容1
  6.     </van-collapse-item>
  7.     <van-collapse-item title="标题2" name="2">
  8.       内容2
  9.     </van-collapse-item>
  10.     <van-collapse-item title="标题3" name="3" disabled>
  11.       内容3（禁用）
  12.     </van-collapse-item>
  13.   </van-collapse>
  14.   
  15.   <van-collapse v-model="activeNames2" accordion>
  16.     <van-collapse-item title="标题1" name="1">
  17.       内容1
  18.     </van-collapse-item>
  19.     <van-collapse-item title="标题2" name="2">
  20.       内容2
  21.     </van-collapse-item>
  22.     <van-collapse-item title="标题3" name="3">
  23.       内容3
  24.     </van-collapse-item>
  25.   </van-collapse>
  26. </template>
  28. <script>
  29. import { ref } from 'vue';
  31. export default {
  32.   setup() {
  33.     const activeNames = ref(['1']);
  34.     const activeNames2 = ref('1');
  35.    
  36.     return {
  37.       activeNames,
  38.       activeNames2
  39.     };
  40.   }
  41. }
  42. </script>
复制代码

自定义主题

Vant UI支持通过CSS变量覆盖主题样式。在App.vue或全局CSS文件中定义：
  2. :root {
  3.   --van-primary-color: #07c160;
  4.   --van-success-color: #07c160;
  5.   --van-danger-color: #ee0a24;
  6.   --van-warning-color: #ff976a;
  7.   --van-text-color: #323233;
  8.   --van-text-color-2: #666;
  9.   --van-text-color-3: #969799;
  10.   --van-active-color: #f2f3f5;
  11.   --van-background-color: #f7f8fa;
  12.   --van-background-color-light: #fafafa;
  13.   --van-white: #fff;
  14. }
复制代码

如果需要更深入的自定义，可以通过修改源码或使用less/sass变量来实现。

自定义组件开发

下面是一个自定义组件的示例，创建一个ProductCard组件：
  2. <!-- src/components/ProductCard.vue -->
  3. <template>
  4.   <div class="product-card" @click="onClick">
  5.     <div class="product-card__img">
  6.       <van-image :src="product.image" fit="cover" />
  7.     </div>
  8.     <div class="product-card__content">
  9.       <div class="product-card__title">{{ product.title }}</div>
  10.       <div class="product-card__desc">{{ product.desc }}</div>
  11.       <div class="product-card__price">
  12.         <span class="product-card__price--current">¥{{ product.price }}</span>
  13.         <span class="product-card__price--origin" v-if="product.originPrice">¥{{ product.originPrice }}</span>
  14.       </div>
  15.     </div>
  16.   </div>
  17. </template>
  19. <script>
  20. import { defineProps, defineEmits } from 'vue';
  22. export default {
  23.   name: 'ProductCard',
  24.   props: {
  25.     product: {
  26.       type: Object,
  27.       required: true,
  28.       default: () => ({
  29.         id: '',
  30.         image: '',
  31.         title: '',
  32.         desc: '',
  33.         price: 0,
  34.         originPrice: 0
  35.       })
  36.     }
  37.   },
  38.   emits: ['click'],
  39.   setup(props, { emit }) {
  40.     const onClick = () => {
  41.       emit('click', props.product);
  42.     };
  43.    
  44.     return {
  45.       onClick
  46.     };
  47.   }
  48. }
  49. </script>
  51. <style scoped>
  52. .product-card {
  53.   background: #fff;
  54.   border-radius: 8px;
  55.   overflow: hidden;
  56.   margin-bottom: 12px;
  57.   box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
  58. }
  60. .product-card__img {
  61.   height: 180px;
  62. }
  64. .product-card__content {
  65.   padding: 12px;
  66. }
  68. .product-card__title {
  69.   font-size: 14px;
  70.   font-weight: 500;
  71.   color: #323233;
  72.   margin-bottom: 4px;
  73.   overflow: hidden;
  74.   text-overflow: ellipsis;
  75.   display: -webkit-box;
  76.   -webkit-line-clamp: 2;
  77.   -webkit-box-orient: vertical;
  78. }
  80. .product-card__desc {
  81.   font-size: 12px;
  82.   color: #969799;
  83.   margin-bottom: 8px;
  84.   overflow: hidden;
  85.   text-overflow: ellipsis;
  86.   display: -webkit-box;
  87.   -webkit-line-clamp: 1;
  88.   -webkit-box-orient: vertical;
  89. }
  91. .product-card__price {
  92.   display: flex;
  93.   align-items: baseline;
  94. }
  96. .product-card__price--current {
  97.   font-size: 16px;
  98.   font-weight: 500;
  99.   color: #ee0a24;
  100. }
  102. .product-card__price--origin {
  103.   font-size: 12px;
  104.   color: #969799;
  105.   text-decoration: line-through;
  106.   margin-left: 4px;
  107. }
  108. </style>
复制代码

使用自定义组件：
  2. <template>
  3.   <div class="product-list">
  4.     <product-card
  5.       v-for="product in products"
  6.       :key="product.id"
  7.       :product="product"
  8.       @click="onProductClick"
  9.     />
  10.   </div>
  11. </template>
  13. <script>
  14. import { ref } from 'vue';
  15. import ProductCard from '@/components/ProductCard.vue';
  16. import { showToast } from 'vant';
  18. export default {
  19.   components: {
  20.     ProductCard
  21.   },
  22.   setup() {
  23.     const products = ref([
  24.       {
  25.         id: '1',
  26.         image: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  27.         title: '高品质苹果',
  28.         desc: '新鲜采摘，口感脆甜',
  29.         price: 6.8,
  30.         originPrice: 8.9
  31.       },
  32.       {
  33.         id: '2',
  34.         image: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  35.         title: '进口红富士',
  36.         desc: '产地直供，品质保证',
  37.         price: 12.8,
  38.         originPrice: 15.9
  39.       },
  40.       {
  41.         id: '3',
  42.         image: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
  43.         title: '有机青苹果',
  44.         desc: '无农药，健康食用',
  45.         price: 9.9,
  46.         originPrice: 12.9
  47.       }
  48.     ]);
  49.    
  50.     const onProductClick = (product) => {
  51.       showToast(`点击了商品: ${product.title}`);
  52.     };
  53.    
  54.     return {
  55.       products,
  56.       onProductClick
  57.     };
  58.   }
  59. }
  60. </script>
  62. <style>
  63. .product-list {
  64.   padding: 12px;
  65. }
  66. </style>
复制代码

组件封装技巧

在实际开发中，我们经常需要对一些常用功能进行封装，下面是一个封装表单组件的示例：
  2. <!-- src/components/BaseForm.vue -->
  3. <template>
  4.   <van-form @submit="onSubmit">
  5.     <van-cell-group inset>
  6.       <slot></slot>
  7.     </van-cell-group>
  8.     <div style="margin: 16px;">
  9.       <van-button round block type="primary" native-type="submit">
  10.         {{ submitText }}
  11.       </van-button>
  12.     </div>
  13.   </van-form>
  14. </template>
  16. <script>
  17. import { defineProps, defineEmits } from 'vue';
  19. export default {
  20.   name: 'BaseForm',
  21.   props: {
  22.     submitText: {
  23.       type: String,
  24.       default: '提交'
  25.     }
  26.   },
  27.   emits: ['submit'],
  28.   setup(props, { emit }) {
  29.     const onSubmit = (values) => {
  30.       emit('submit', values);
  31.     };
  32.    
  33.     return {
  34.       onSubmit
  35.     };
  36.   }
  37. }
  38. </script>
复制代码

使用封装的表单组件：
  2. <template>
  3.   <base-form submit-text="登录" @submit="onLogin">
  4.     <van-field
  5.       v-model="username"
  6.       name="username"
  7.       label="用户名"
  8.       placeholder="请输入用户名"
  9.       :rules="[{ required: true, message: '请填写用户名' }]"
  10.     />
  11.     <van-field
  12.       v-model="password"
  13.       type="password"
  14.       name="password"
  15.       label="密码"
  16.       placeholder="请输入密码"
  17.       :rules="[{ required: true, message: '请填写密码' }]"
  18.     />
  19.   </base-form>
  20. </template>
  22. <script>
  23. import { ref } from 'vue';
  24. import BaseForm from '@/components/BaseForm.vue';
  25. import { showToast } from 'vant';
  27. export default {
  28.   components: {
  29.     BaseForm
  30.   },
  31.   setup() {
  32.     const username = ref('');
  33.     const password = ref('');
  34.    
  35.     const onLogin = (values) => {
  36.       console.log('login form:', values);
  37.       showToast('登录成功');
  38.     };
  39.    
  40.     return {
  41.       username,
  42.       password,
  43.       onLogin
  44.     };
  45.   }
  46. }
  47. </script>
复制代码

状态管理

Pinia的安装与配置

Pinia是Vue3官方推荐的状态管理库，它比Vuex更轻量、更直观。

安装Pinia：
  2. npm install pinia
复制代码

在main.js中引入：
  2. import { createApp } from 'vue'
  3. import { createPinia } from 'pinia'
  4. import App from './App.vue'
  6. const app = createApp(App)
  7. app.use(createPinia())
  8. app.mount('#app')
复制代码

状态定义与使用

创建一个store：
  2. // src/store/counter.js
  3. import { defineStore } from 'pinia'
  5. export const useCounterStore = defineStore('counter', {
  6.   state: () => ({
  7.     count: 0,
  8.   }),
  9.   getters: {
  10.     doubleCount: (state) => state.count * 2,
  11.   },
  12.   actions: {
  13.     increment() {
  14.       this.count++
  15.     },
  16.     decrement() {
  17.       this.count--
  18.     },
  19.     reset() {
  20.       this.count = 0
  21.     },
  22.   },
  23. })
复制代码

在组件中使用store：
  2. <template>
  3.   <div>
  4.     <h2>计数器: {{ count }}</h2>
  5.     <h2>双倍计数: {{ doubleCount }}</h2>
  6.     <button @click="increment">增加</button>
  7.     <button @click="decrement">减少</button>
  8.     <button @click="reset">重置</button>
  9.   </div>
  10. </template>
  12. <script>
  13. import { storeToRefs } from 'pinia';
  14. import { useCounterStore } from '@/store/counter';
  16. export default {
  17.   setup() {
  18.     const counterStore = useCounterStore();
  19.     // 使用storeToRefs解构state和getters，保持响应性
  20.     const { count, doubleCount } = storeToRefs(counterStore);
  21.     // 直接解构actions
  22.     const { increment, decrement, reset } = counterStore;
  23.    
  24.     return {
  25.       count,
  26.       doubleCount,
  27.       increment,
  28.       decrement,
  29.       reset
  30.     };
  31.   }
  32. }
  33. </script>
复制代码

异步操作

在Pinia中处理异步操作：
  2. // src/store/user.js
  3. import { defineStore } from 'pinia'
  4. import { login as userLogin, getUserInfo } from '@/api/user'
  6. export const useUserStore = defineStore('user', {
  7.   state: () => ({
  8.     token: '',
  9.     userInfo: null,
  10.   }),
  11.   getters: {
  12.     isLogin: (state) => !!state.token,
  13.     userName: (state) => state.userInfo?.name || '',
  14.   },
  15.   actions: {
  16.     // 登录
  17.     async login(loginForm) {
  18.       try {
  19.         const { token } = await userLogin(loginForm)
  20.         this.token = token
  21.         return Promise.resolve()
  22.       } catch (error) {
  23.         return Promise.reject(error)
  24.       }
  25.     },
  26.    
  27.     // 获取用户信息
  28.     async fetchUserInfo() {
  29.       try {
  30.         const userInfo = await getUserInfo()
  31.         this.userInfo = userInfo
  32.         return Promise.resolve(userInfo)
  33.       } catch (error) {
  34.         return Promise.reject(error)
  35.       }
  36.     },
  37.    
  38.     // 登出
  39.     logout() {
  40.       this.token = ''
  41.       this.userInfo = null
  42.     },
  43.   },
  44. })
复制代码

在组件中使用：
  2. <template>
  3.   <div v-if="isLogin">
  4.     <h2>欢迎, {{ userName }}</h2>
  5.     <button @click="handleLogout">登出</button>
  6.   </div>
  7.   <div v-else>
  8.     <van-form @submit="handleLogin">
  9.       <van-field
  10.         v-model="loginForm.username"
  11.         name="username"
  12.         label="用户名"
  13.         placeholder="请输入用户名"
  14.         :rules="[{ required: true, message: '请填写用户名' }]"
  15.       />
  16.       <van-field
  17.         v-model="loginForm.password"
  18.         type="password"
  19.         name="password"
  20.         label="密码"
  21.         placeholder="请输入密码"
  22.         :rules="[{ required: true, message: '请填写密码' }]"
  23.       />
  24.       <div style="margin: 16px;">
  25.         <van-button round block type="primary" native-type="submit">
  26.           登录
  27.         </van-button>
  28.       </div>
  29.     </van-form>
  30.   </div>
  31. </template>
  33. <script>
  34. import { ref } from 'vue';
  35. import { storeToRefs } from 'pinia';
  36. import { useUserStore } from '@/store/user';
  37. import { showToast } from 'vant';
  39. export default {
  40.   setup() {
  41.     const userStore = useUserStore();
  42.     const { isLogin, userName } = storeToRefs(userStore);
  43.     const { login, logout } = userStore;
  44.    
  45.     const loginForm = ref({
  46.       username: '',
  47.       password: ''
  48.     });
  49.    
  50.     const handleLogin = async () => {
  51.       try {
  52.         await login(loginForm.value);
  53.         await userStore.fetchUserInfo();
  54.         showToast('登录成功');
  55.       } catch (error) {
  56.         showToast('登录失败');
  57.         console.error(error);
  58.       }
  59.     };
  60.    
  61.     const handleLogout = () => {
  62.       logout();
  63.       showToast('已登出');
  64.     };
  65.    
  66.     return {
  67.       isLogin,
  68.       userName,
  69.       loginForm,
  70.       handleLogin,
  71.       handleLogout
  72.     };
  73.   }
  74. }
  75. </script>
复制代码

持久化存储

使用插件实现Pinia状态持久化：
  2. npm install pinia-plugin-persistedstate
复制代码

在main.js中配置：
  2. import { createApp } from 'vue'
  3. import { createPinia } from 'pinia'
  4. import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
  5. import App from './App.vue'
  7. const pinia = createPinia()
  8. pinia.use(piniaPluginPersistedstate)
  10. const app = createApp(App)
  11. app.use(pinia)
  12. app.mount('#app')
复制代码

在store中启用持久化：
  2. // src/store/user.js
  3. import { defineStore } from 'pinia'
  4. import { login as userLogin, getUserInfo } from '@/api/user'
  6. export const useUserStore = defineStore('user', {
  7.   state: () => ({
  8.     token: '',
  9.     userInfo: null,
  10.   }),
  11.   getters: {
  12.     isLogin: (state) => !!state.token,
  13.     userName: (state) => state.userInfo?.name || '',
  14.   },
  15.   actions: {
  16.     async login(loginForm) {
  17.       try {
  18.         const { token } = await userLogin(loginForm)
  19.         this.token = token
  20.         return Promise.resolve()
  21.       } catch (error) {
  22.         return Promise.reject(error)
  23.       }
  24.     },
  25.    
  26.     async fetchUserInfo() {
  27.       try {
  28.         const userInfo = await getUserInfo()
  29.         this.userInfo = userInfo
  30.         return Promise.resolve(userInfo)
  31.       } catch (error) {
  32.         return Promise.reject(error)
  33.       }
  34.     },
  35.    
  36.     logout() {
  37.       this.token = ''
  38.       this.userInfo = null
  39.     },
  40.   },
  41.   // 启用持久化
  42.   persist: {
  43.     enabled: true,
  44.     strategies: [
  45.       {
  46.         key: 'user',
  47.         storage: localStorage,
  48.       },
  49.     ],
  50.   },
  51. })
复制代码

路由管理

Vue Router的安装与配置

安装Vue Router：
  2. npm install vue-router@4
复制代码

创建路由配置文件：
  2. // src/router/index.js
  3. import { createRouter, createWebHistory } from 'vue-router'
  5. const routes = [
  6.   {
  7.     path: '/',
  8.     name: 'Home',
  9.     component: () => import('@/views/Home.vue'),
  10.     meta: {
  11.       title: '首页',
  12.       keepAlive: true
  13.     }
  14.   },
  15.   {
  16.     path: '/category',
  17.     name: 'Category',
  18.     component: () => import('@/views/Category.vue'),
  19.     meta: {
  20.       title: '分类',
  21.       keepAlive: true
  22.     }
  23.   },
  24.   {
  25.     path: '/cart',
  26.     name: 'Cart',
  27.     component: () => import('@/views/Cart.vue'),
  28.     meta: {
  29.       title: '购物车',
  30.       keepAlive: false
  31.     }
  32.   },
  33.   {
  34.     path: '/user',
  35.     name: 'User',
  36.     component: () => import('@/views/User.vue'),
  37.     meta: {
  38.       title: '我的',
  39.       keepAlive: true
  40.     }
  41.   },
  42.   {
  43.     path: '/product/:id',
  44.     name: 'Product',
  45.     component: () => import('@/views/Product.vue'),
  46.     meta: {
  47.       title: '商品详情',
  48.       keepAlive: false
  49.     }
  50.   },
  51.   {
  52.     path: '/login',
  53.     name: 'Login',
  54.     component: () => import('@/views/Login.vue'),
  55.     meta: {
  56.       title: '登录',
  57.       keepAlive: false
  58.     }
  59.   },
  60.   {
  61.     path: '/:pathMatch(.*)*',
  62.     name: 'NotFound',
  63.     component: () => import('@/views/NotFound.vue'),
  64.     meta: {
  65.       title: '页面不存在',
  66.       keepAlive: false
  67.     }
  68.   }
  69. ]
  71. const router = createRouter({
  72.   history: createWebHistory(),
  73.   routes
  74. })
  76. // 全局前置守卫
  77. router.beforeEach((to, from, next) => {
  78.   // 设置页面标题
  79.   document.title = to.meta.title || 'Vue3+Vant App'
  80.   
  81.   // 登录权限控制
  82.   const userStore = useUserStore()
  83.   if (to.meta.requiresAuth && !userStore.isLogin) {
  84.     next({ name: 'Login', query: { redirect: to.fullPath } })
  85.   } else {
  86.     next()
  87.   }
  88. })
  90. export default router
复制代码

在main.js中引入路由：
  2. import { createApp } from 'vue'
  3. import { createPinia } from 'pinia'
  4. import App from './App.vue'
  5. import router from './router'
  7. const app = createApp(App)
  8. app.use(createPinia())
  9. app.use(router)
  10. app.mount('#app')
复制代码

路由定义与导航

在App.vue中使用路由：
  2. <template>
  3.   <div class="app">
  4.     <!-- 路由视图 -->
  5.     <router-view v-slot="{ Component }">
  6.       <keep-alive :include="keepAliveViews">
  7.         <component :is="Component" />
  8.       </keep-alive>
  9.     </router-view>
  10.    
  11.     <!-- 底部导航 -->
  12.     <van-tabbar v-model="active" route>
  13.       <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
  14.       <van-tabbar-item replace to="/category" icon="apps-o">分类</van-tabbar-item>
  15.       <van-tabbar-item replace to="/cart" icon="cart-o">购物车</van-tabbar-item>
  16.       <van-tabbar-item replace to="/user" icon="user-o">我的</van-tabbar-item>
  17.     </van-tabbar>
  18.   </div>
  19. </template>
  21. <script>
  22. import { ref, computed } from 'vue';
  23. import { useRoute } from 'vue-router';
  25. export default {
  26.   setup() {
  27.     const route = useRoute();
  28.     const active = ref(0);
  29.    
  30.     // 需要缓存的页面
  31.     const keepAliveViews = computed(() => {
  32.       return route.matched
  33.         .filter(item => item.meta.keepAlive)
  34.         .map(item => item.name);
  35.     });
  36.    
  37.     return {
  38.       active,
  39.       keepAliveViews
  40.     };
  41.   }
  42. }
  43. </script>
  45. <style>
  46. .app {
  47.   padding-bottom: 50px;
  48. }
  49. </style>
复制代码

在组件中进行导航：
  2. <template>
  3.   <div>
  4.     <h2>首页</h2>
  5.    
  6.     <!-- 声明式导航 -->
  7.     <van-button type="primary" to="/category">跳转到分类页</van-button>
  8.    
  9.     <!-- 编程式导航 -->
  10.     <van-button type="primary" @click="goToCategory">跳转到分类页</van-button>
  11.    
  12.     <!-- 动态路由导航 -->
  13.     <van-button type="primary" @click="goToProduct">跳转到商品详情</van-button>
  14.    
  15.     <!-- 带查询参数的导航 -->
  16.     <van-button type="primary" @click="goToCategoryWithQuery">跳转到分类页(带参数)</van-button>
  17.   </div>
  18. </template>
  20. <script>
  21. import { useRouter } from 'vue-router';
  23. export default {
  24.   setup() {
  25.     const router = useRouter();
  26.    
  27.     const goToCategory = () => {
  28.       router.push('/category');
  29.     };
  30.    
  31.     const goToProduct = () => {
  32.       router.push({
  33.         name: 'Product',
  34.         params: {
  35.           id: '123'
  36.         }
  37.       });
  38.     };
  39.    
  40.     const goToCategoryWithQuery = () => {
  41.       router.push({
  42.         path: '/category',
  43.         query: {
  44.           id: '1',
  45.           name: '电子产品'
  46.         }
  47.       });
  48.     };
  49.    
  50.     return {
  51.       goToCategory,
  52.       goToProduct,
  53.       goToCategoryWithQuery
  54.     };
  55.   }
  56. }
  57. </script>
复制代码

路由守卫

路由守卫用于控制路由的访问权限，Vue Router提供了全局守卫、路由独享守卫和组件内守卫。
  2. // src/router/index.js
  4. // 全局前置守卫
  5. router.beforeEach((to, from, next) => {
  6.   // 设置页面标题
  7.   document.title = to.meta.title || 'Vue3+Vant App'
  8.   
  9.   // 登录权限控制
  10.   const userStore = useUserStore()
  11.   if (to.meta.requiresAuth && !userStore.isLogin) {
  12.     next({ name: 'Login', query: { redirect: to.fullPath } })
  13.   } else {
  14.     next()
  15.   }
  16. })
  18. // 全局后置钩子
  19. router.afterEach((to, from) => {
  20.   // 可以在这里进行页面滚动等操作
  21.   window.scrollTo(0, 0)
  22. })
复制代码
  2. // src/router/index.js
  3. const routes = [
  4.   {
  5.     path: '/admin',
  6.     name: 'Admin',
  7.     component: () => import('@/views/Admin.vue'),
  8.     meta: {
  9.       title: '管理后台',
  10.       requiresAuth: true,
  11.       requiresAdmin: true
  12.     },
  13.     beforeEnter: (to, from, next) => {
  14.       const userStore = useUserStore()
  15.       if (userStore.userInfo?.role !== 'admin') {
  16.         next({ name: 'Home' })
  17.       } else {
  18.         next()
  19.       }
  20.     }
  21.   }
  22. ]
复制代码
  2. <template>
  3.   <div>
  4.     <h2>商品详情</h2>
  5.     <p>商品ID: {{ productId }}</p>
  6.   </div>
  7. </template>
  9. <script>
  10. import { ref, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue';
  11. import { useRoute, useRouter } from 'vue-router';
  13. export default {
  14.   setup() {
  15.     const route = useRoute();
  16.     const router = useRouter();
  17.     const productId = ref(route.params.id);
  18.    
  19.     // 组件内守卫：离开当前路由时
  20.     onBeforeRouteLeave((to, from, next) => {
  21.       // 如果表单有未保存的更改，可以提示用户
  22.       if (hasUnsavedChanges()) {
  23.         const answer = window.confirm(
  24.           '您有未保存的更改，确定要离开吗？'
  25.         )
  26.         if (answer) {
  27.           next()
  28.         } else {
  29.           next(false)
  30.         }
  31.       } else {
  32.         next()
  33.       }
  34.     });
  35.    
  36.     // 组件内守卫：在当前路由改变，但是该组件被复用时调用
  37.     onBeforeRouteUpdate((to, from, next) => {
  38.       // 例如，从 /product/1 导航到 /product/2
  39.       productId.value = to.params.id;
  40.       fetchProductData(to.params.id);
  41.       next();
  42.     });
  43.    
  44.     const hasUnsavedChanges = () => {
  45.       // 检查是否有未保存的更改
  46.       return false;
  47.     };
  48.    
  49.     const fetchProductData = (id) => {
  50.       // 根据ID获取商品数据
  51.       console.log('Fetching product data for ID:', id);
  52.     };
  53.    
  54.     return {
  55.       productId
  56.     };
  57.   }
  58. }
  59. </script>
复制代码

懒加载

懒加载可以按需加载页面组件，减少初始加载时间。在路由配置中，我们可以使用动态导入实现懒加载：
  2. // src/router/index.js
  3. const routes = [
  4.   {
  5.     path: '/',
  6.     name: 'Home',
  7.     component: () => import('@/views/Home.vue'),
  8.     meta: {
  9.       title: '首页',
  10.       keepAlive: true
  11.     }
  12.   },
  13.   {
  14.     path: '/category',
  15.     name: 'Category',
  16.     component: () => import('@/views/Category.vue'),
  17.     meta: {
  18.       title: '分类',
  19.       keepAlive: true
  20.     }
  21.   },
  22.   {
  23.     path: '/cart',
  24.     name: 'Cart',
  25.     component: () => import('@/views/Cart.vue'),
  26.     meta: {
  27.       title: '购物车',
  28.       keepAlive: false
  29.     }
  30.   },
  31.   {
  32.     path: '/user',
  33.     name: 'User',
  34.     component: () => import('@/views/User.vue'),
  35.     meta: {
  36.       title: '我的',
  37.       keepAlive: true
  38.     }
  39.   }
  40. ]
复制代码

我们还可以使用魔法注释为懒加载的组件命名，方便调试：
  2. const routes = [
  3.   {
  4.     path: '/',
  5.     name: 'Home',
  6.     component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
  7.     meta: {
  8.       title: '首页',
  9.       keepAlive: true
  10.     }
  11.   },
  12.   {
  13.     path: '/category',
  14.     name: 'Category',
  15.     component: () => import(/* webpackChunkName: "category" */ '@/views/Category.vue'),
  16.     meta: {
  17.       title: '分类',
  18.       keepAlive: true
  19.     }
  20.   }
  21. ]
复制代码

项目优化

代码分割

代码分割是优化应用加载性能的重要手段。除了路由懒加载，我们还可以对第三方库和大型组件进行代码分割。

在vite.config.js中配置：
  2. import { defineConfig } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import Components from 'unplugin-vue-components/vite'
  5. import { VantResolver } from 'unplugin-vue-components/resolvers'
  7. export default defineConfig({
  8.   plugins: [
  9.     vue(),
  10.     Components({
  11.       resolvers: [VantResolver()],
  12.     }),
  13.   ],
  14.   build: {
  15.     rollupOptions: {
  16.       output: {
  17.         manualChunks: {
  18.           'vendor': ['vue', 'vue-router', 'pinia'],
  19.           'vant': ['vant']
  20.         }
  21.       }
  22.     }
  23.   }
  24. })
复制代码

对于大型组件，我们可以使用动态导入实现按需加载：
  2. <template>
  3.   <div>
  4.     <h2>首页</h2>
  5.     <button @click="showLargeComponent">加载大型组件</button>
  6.    
  7.     <div v-if="showComponent">
  8.       <component :is="LargeComponent" />
  9.     </div>
  10.   </div>
  11. </template>
  13. <script>
  14. import { ref, defineAsyncComponent } from 'vue';
  16. export default {
  17.   setup() {
  18.     const showComponent = ref(false);
  19.    
  20.     // 异步加载大型组件
  21.     const LargeComponent = defineAsyncComponent(() =>
  22.       import('@/components/LargeComponent.vue')
  23.     );
  24.    
  25.     const showLargeComponent = () => {
  26.       showComponent.value = true;
  27.     };
  28.    
  29.     return {
  30.       showComponent,
  31.       LargeComponent,
  32.       showLargeComponent
  33.     };
  34.   }
  35. }
  36. </script>
复制代码

懒加载

Vant UI的Image组件已经内置了懒加载功能：
  2. <template>
  3.   <van-image
  4.     width="100"
  5.     height="100"
  6.     src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
  7.     lazy-load
  8.   />
  9. </template>
复制代码

使用Vant的List组件实现列表的懒加载：
  2. <template>
  3.   <van-list
  4.     v-model:loading="loading"
  5.     :finished="finished"
  6.     finished-text="没有更多了"
  7.     @load="onLoad"
  8.   >
  9.     <van-cell v-for="item in list" :key="item" :title="item" />
  10.   </van-list>
  11. </template>
  13. <script>
  14. import { ref } from 'vue';
  16. export default {
  17.   setup() {
  18.     const list = ref([]);
  19.     const loading = ref(false);
  20.     const finished = ref(false);
  21.    
  22.     const onLoad = () => {
  23.       // 异步更新数据
  24.       setTimeout(() => {
  25.         for (let i = 0; i < 10; i++) {
  26.           list.value.push(list.value.length + 1);
  27.         }
  28.         // 加载状态结束
  29.         loading.value = false;
  30.         
  31.         // 数据全部加载完成
  32.         if (list.value.length >= 40) {
  33.           finished.value = true;
  34.         }
  35.       }, 1000);
  36.     };
  37.    
  38.     return {
  39.       list,
  40.       loading,
  41.       finished,
  42.       onLoad,
  43.     };
  44.   },
  45. };
  46. </script>
复制代码

缓存策略

在vite.config.js中配置HTTP缓存：
  2. import { defineConfig } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  5. export default defineConfig({
  6.   plugins: [vue()],
  7.   build: {
  8.     rollupOptions: {
  9.       output: {
  10.         chunkFileNames: 'static/js/[name]-[hash].js',
  11.         entryFileNames: 'static/js/[name]-[hash].js',
  12.         assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
  13.       }
  14.     }
  15.   }
  16. })
复制代码

使用Workbox实现Service Worker缓存：
  2. npm install workbox-webpack-plugin -D
复制代码

在vite.config.js中配置：
  2. import { defineConfig } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import { GenerateSW } from 'workbox-webpack-plugin'
  6. export default defineConfig({
  7.   plugins: [
  8.     vue(),
  9.     {
  10.       ...GenerateSW({
  11.         clientsClaim: true,
  12.         skipWaiting: true,
  13.         runtimeCaching: [
  14.           {
  15.             urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
  16.             handler: 'CacheFirst',
  17.             options: {
  18.               cacheName: 'image-cache',
  19.               expiration: {
  20.                 maxEntries: 60,
  21.                 maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
  22.               },
  23.             },
  24.           },
  25.           {
  26.             urlPattern: /\.(?:js|css)$/,
  27.             handler: 'StaleWhileRevalidate',
  28.             options: {
  29.               cacheName: 'static-resources',
  30.               expiration: {
  31.                 maxEntries: 60,
  32.                 maxAgeSeconds: 24 * 60 * 60, // 24 hours
  33.               },
  34.             },
  35.           },
  36.         ],
  37.       }),
  38.       apply: 'build'
  39.     }
  40.   ]
  41. })
复制代码

性能优化技巧

对于长列表，可以使用虚拟滚动来提高性能：
  2. <template>
  3.   <van-list
  4.     v-model:loading="loading"
  5.     :finished="finished"
  6.     finished-text="没有更多了"
  7.     @load="onLoad"
  8.   >
  9.     <van-cell v-for="item in list" :key="item" :title="item" />
  10.   </van-list>
  11. </template>
  13. <script>
  14. import { ref } from 'vue';
  16. export default {
  17.   setup() {
  18.     const list = ref([]);
  19.     const loading = ref(false);
  20.     const finished = ref(false);
  21.    
  22.     const onLoad = () => {
  23.       // 异步更新数据
  24.       setTimeout(() => {
  25.         for (let i = 0; i < 10; i++) {
  26.           list.value.push(list.value.length + 1);
  27.         }
  28.         // 加载状态结束
  29.         loading.value = false;
  30.         
  31.         // 数据全部加载完成
  32.         if (list.value.length >= 40) {
  33.           finished.value = true;
  34.         }
  35.       }, 1000);
  36.     };
  37.    
  38.     return {
  39.       list,
  40.       loading,
  41.       finished,
  42.       onLoad,
  43.     };
  44.   },
  45. };
  46. </script>
复制代码

对于频繁触发的事件，如滚动、输入等，可以使用防抖和节流来优化性能：
  2. // src/utils/debounce.js
  3. export function debounce(fn, delay) {
  4.   let timer = null;
  5.   return function (...args) {
  6.     if (timer) clearTimeout(timer);
  7.     timer = setTimeout(() => {
  8.       fn.apply(this, args);
  9.     }, delay);
  10.   };
  11. }
  13. // src/utils/throttle.js
  14. export function throttle(fn, delay) {
  15.   let last = 0;
  16.   return function (...args) {
  17.     const now = Date.now();
  18.     if (now - last > delay) {
  19.       fn.apply(this, args);
  20.       last = now;
  21.     }
  22.   };
  23. }
复制代码

在组件中使用：
  2. <template>
  3.   <div>
  4.     <van-search
  5.       v-model="searchValue"
  6.       placeholder="请输入搜索关键词"
  7.       @input="onSearch"
  8.     />
  9.    
  10.     <div class="scroll-container" @scroll="onScroll">
  11.       <!-- 滚动内容 -->
  12.     </div>
  13.   </div>
  14. </template>
  16. <script>
  17. import { ref } from 'vue';
  18. import { debounce, throttle } from '@/utils';
  20. export default {
  21.   setup() {
  22.     const searchValue = ref('');
  23.    
  24.     // 使用防抖处理搜索输入
  25.     const onSearch = debounce((value) => {
  26.       console.log('搜索:', value);
  27.       // 执行搜索逻辑
  28.     }, 300);
  29.    
  30.     // 使用节流处理滚动事件
  31.     const onScroll = throttle((event) => {
  32.       console.log('滚动位置:', event.target.scrollTop);
  33.       // 执行滚动逻辑
  34.     }, 200);
  35.    
  36.     return {
  37.       searchValue,
  38.       onSearch,
  39.       onScroll
  40.     };
  41.   }
  42. }
  43. </script>
复制代码

对于非首屏的组件，可以使用Intersection Observer API实现懒加载：
  2. <template>
  3.   <div>
  4.     <h2>首页</h2>
  5.    
  6.     <div ref="lazyComponentContainer" class="lazy-container">
  7.       <component :is="LazyComponent" v-if="showLazyComponent" />
  8.     </div>
  9.   </div>
  10. </template>
  12. <script>
  13. import { ref, onMounted, defineAsyncComponent } from 'vue';
  15. export default {
  16.   setup() {
  17.     const lazyComponentContainer = ref(null);
  18.     const showLazyComponent = ref(false);
  19.    
  20.     // 异步加载懒加载组件
  21.     const LazyComponent = defineAsyncComponent(() =>
  22.       import('@/components/LazyComponent.vue')
  23.     );
  24.    
  25.     onMounted(() => {
  26.       const observer = new IntersectionObserver((entries) => {
  27.         entries.forEach(entry => {
  28.           if (entry.isIntersecting) {
  29.             showLazyComponent.value = true;
  30.             observer.unobserve(entry.target);
  31.           }
  32.         });
  33.       }, {
  34.         threshold: 0.1
  35.       });
  36.       
  37.       if (lazyComponentContainer.value) {
  38.         observer.observe(lazyComponentContainer.value);
  39.       }
  40.     });
  41.    
  42.     return {
  43.       lazyComponentContainer,
  44.       showLazyComponent,
  45.       LazyComponent
  46.     };
  47.   }
  48. }
  49. </script>
  51. <style>
  52. .lazy-container {
  53.   min-height: 200px;
  54.   margin-top: 500px;
  55. }
  56. </style>
复制代码

SEO优化

对于SPA应用，SEO是一个挑战。我们可以使用以下方法来优化SEO：

使用prerender-spa-plugin进行预渲染：
  2. npm install prerender-spa-plugin -D
复制代码

在vite.config.js中配置：
  2. import { defineConfig } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import path from 'path'
  6. export default defineConfig({
  7.   plugins: [
  8.     vue(),
  9.     {
  10.       name: 'prerender',
  11.       closeBundle() {
  12.         const PrerenderSPAPlugin = require('prerender-spa-plugin');
  13.         const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
  14.         
  15.         new PrerenderSPAPlugin({
  16.           staticDir: path.join(__dirname, 'dist'),
  17.           routes: ['/', '/about', '/contact'],
  18.           renderer: new Renderer({
  19.             headless: true,
  20.             renderAfterDocumentEvent: 'render-event'
  21.           })
  22.         }).apply();
  23.       }
  24.     }
  25.   ]
  26. })
复制代码

在main.js中添加：
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  5. const app = createApp(App)
  6. app.mount('#app')
  8. // 添加渲染事件
  9. document.dispatchEvent(new Event('render-event'))
复制代码

使用vue-meta管理页面的meta标签：
  2. npm install vue-meta -S
复制代码

在main.js中配置：
  2. import { createApp } from 'vue'
  3. import { createMetaManager } from 'vue-meta'
  4. import App from './App.vue'
  6. const app = createApp(App)
  7. app.use(createMetaManager())
  8. app.mount('#app')
复制代码

在组件中使用：
  2. <template>
  3.   <div>
  4.     <h2>关于我们</h2>
  5.     <p>这是关于我们的页面</p>
  6.   </div>
  7. </template>
  9. <script>
  10. import { useMeta } from 'vue-meta';
  12. export default {
  13.   setup() {
  14.     useMeta({
  15.       title: '关于我们 - Vue3+Vant App',
  16.       meta: [
  17.         { name: 'description', content: '这是关于我们的页面描述' },
  18.         { name: 'keywords', content: '关于我们,公司介绍' },
  19.         { property: 'og:title', content: '关于我们 - Vue3+Vant App' }
  20.       ]
  21.     });
  22.    
  23.     return {};
  24.   }
  25. }
  26. </script>
复制代码

项目部署

构建生产版本

使用Vite构建生产版本：
  2. npm run build
复制代码

构建完成后，会在项目根目录下生成一个dist文件夹，包含了所有生产环境所需的文件。

部署到服务器

将dist文件夹中的内容上传到服务器的Web目录，如Nginx的html目录。

配置Nginx：
  2. server {
  3.     listen 80;
  4.     server_name yourdomain.com;
  5.     root /usr/share/nginx/html;
  6.     index index.html;
  7.    
  8.     location / {
  9.         try_files $uri $uri/ /index.html;
  10.     }
  11.    
  12.     # 静态资源缓存
  13.     location ~* \.(?:css|js)$ {
  14.         expires 1y;
  15.         add_header Cache-Control "public, immutable";
  16.     }
  17.    
  18.     # 图片资源缓存
  19.     location ~* \.(?:jpg|jpeg|gif|png|webp|svg|ico)$ {
  20.         expires 1y;
  21.         add_header Cache-Control "public";
  22.     }
  23. }
复制代码

使用Express作为静态文件服务器：
  2. // server.js
  3. const express = require('express');
  4. const path = require('path');
  5. const app = express();
  7. // 静态文件服务
  8. app.use(express.static(path.join(__dirname, 'dist')));
  10. // 所有路由都返回index.html
  11. app.get('*', (req, res) => {
  12.   res.sendFile(path.join(__dirname, 'dist', 'index.html'));
  13. });
  15. const port = process.env.PORT || 3000;
  16. app.listen(port, () => {
  17.   console.log(`Server is running on port ${port}`);
  18. });
复制代码

安装依赖并启动：
  2. npm install express
  3. node server.js
复制代码

CDN配置

将静态资源上传到CDN，可以加快访问速度。在vite.config.js中配置：
  2. import { defineConfig } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  5. export default defineConfig({
  6.   plugins: [vue()],
  7.   base: 'https://cdn.yourdomain.com/your-project/',
  8.   build: {
  9.     rollupOptions: {
  10.       output: {
  11.         chunkFileNames: 'static/js/[name]-[hash].js',
  12.         entryFileNames: 'static/js/[name]-[hash].js',
  13.         assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
  14.       }
  15.     }
  16.   }
  17. })
复制代码

域名配置

配置HTTPS：
  2. server {
  3.     listen 443 ssl http2;
  4.     server_name yourdomain.com;
  5.    
  6.     ssl_certificate /path/to/your/certificate.crt;
  7.     ssl_certificate_key /path/to/your/private.key;
  8.    
  9.     root /usr/share/nginx/html;
  10.     index index.html;
  11.    
  12.     location / {
  13.         try_files $uri $uri/ /index.html;
  14.     }
  15. }
  17. # HTTP重定向到HTTPS
  18. server {
  19.     listen 80;
  20.     server_name yourdomain.com;
  21.     return 301 https://$server_name$request_uri;
  22. }
复制代码

总结与展望

本文详细介绍了如何使用Vue3和Vant UI构建高效的移动端应用，从环境搭建、项目初始化、组件使用、状态管理、路由管理到项目优化与部署的全过程。通过本文的学习，您应该已经掌握了Vue3和Vant UI的核心使用方法，并能够独立开发高质量的移动端应用。

Vue3的组合式API、响应式系统和优化的性能为开发者提供了更强大的开发能力，而Vant UI丰富的组件和良好的用户体验则大大提高了移动应用的开发效率。两者结合使用，可以快速构建出美观、高效、易用的移动应用。

未来，随着Vue3和Vant UI的不断发展，我们可以期待更多的新特性和优化。同时，随着5G、AI等技术的发展，移动应用将会有更多的创新和突破。作为开发者，我们需要不断学习和探索，紧跟技术发展的步伐，才能在移动开发领域保持竞争力。

学习资源推荐

1. Vue3官方文档
2. Vant UI官方文档
3. Pinia官方文档
4. Vue Router官方文档
5. Vite官方文档

希望本文能够帮助您成为移动开发领域的专家，祝您在移动应用开发的道路上取得更大的成功！
竞争力, 版本号
「七転び八起き（ななころびやおき）」
回复

使用道具 举报

返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册
高级模式
B Color Image Link Quote Code Smilies

本版积分规则