首页
/ 正文

uniapp vue3（手把手讲解）

更新时间: 2025-03-17 22:55:34

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

前言

在移动互联网快速发展的今天，跨平台开发框架凭借其高效、低成本的优势，成为开发者的重要选择。uniapp作为国内领先的跨平台开发框架，结合Vue3的全新特性，为开发者提供了从Web到App的无缝开发体验。本文将从基础概念、核心知识点、实战案例到性能优化，系统性地讲解如何利用uniapp与Vue3构建高效、灵活的移动应用，帮助编程初学者和中级开发者快速掌握这一技术组合。

uniapp与Vue3的协同优势

1.1 uniapp的核心特性

uniapp是基于Vue.js的跨平台开发框架，支持通过一套代码同时编译为多个平台应用（如iOS、Android、小程序等）。其核心优势包括：

一次编写，多端运行：无需重写代码，即可适配不同平台。
丰富的生态支持：依托Vue.js的社区资源和HBuilderX开发工具，提供完善的文档和插件。
轻量级与高性能：通过虚拟DOM和模块化设计，优化了应用的启动速度和内存占用。

1.2 Vue3的革新与适配

Vue3是Vue框架的重大升级版本，其核心改进包括：

Composition API：通过setup()函数和响应式函数，提升代码复用性和可维护性。
响应式系统优化：基于Proxy的响应式数据观测，相比Vue2的Object.defineProperty更高效、灵活。
TypeScript深度集成：支持TypeScript原生语法，提升代码健壮性。

1.3 两者的结合价值

uniapp与Vue3的结合，相当于为开发者提供了一把“瑞士军刀”：

开发效率：通过组件化开发和跨平台特性，减少重复劳动。
代码质量：Vue3的Composition API和TypeScript支持，帮助开发者写出更规范、可维护的代码。
生态兼容性：无缝继承Vue.js社区的插件、工具和最佳实践。

快速入门：环境搭建与基础项目

2.1 开发环境准备

步骤1：安装HBuilderX

HBuilderX是uniapp官方推荐的开发工具，支持代码编写、调试和一键编译。下载地址：https://www.dcloud.io/hbuilderx.html 。

步骤2：创建uniapp项目

打开HBuilderX，选择 【文件】→【新建】→【项目】。
在模板中选择 “Vue3模板”，填写项目名称后点击“创建”。

步骤3：运行项目

点击工具栏的 【运行】→【运行到手机真机】，选择模拟器或连接真机即可预览效果。

2.2 第一个uniapp+Vue3应用

代码示例：Hello World

<template>
  <view class="container">
    <text class="greeting">Hello, UniApp Vue3!</text>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Welcome to the world of cross-platform development!');
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.greeting {
  font-size: 24px;
  color: #1890ff;
}
</style>

关键点解析

<script setup>：Vue3的单文件组件语法糖，简化了Composition API的使用。
ref()：用于创建响应式变量，当message的值变化时，视图会自动更新。

核心概念详解

3.1 组件化开发模式

3.1.1 组件的定义与使用

uniapp遵循Vue的组件化思想，通过.vue文件定义组件。例如，创建一个按钮组件：

<!-- components/CustomButton.vue -->
<template>
  <view class="button" @click="handleClick">
    <slot>{{ text }}</slot>
  </view>
</template>

<script setup>
const props = defineProps({
  text: {
    type: String,
    default: 'Click Me'
  }
});

const emit = defineEmits(['click']);

function handleClick() {
  emit('click');
}
</script>

<style scoped>
.button {
  padding: 12px 24px;
  background-color: #409eff;
  color: white;
  border-radius: 4px;
}
</style>

3.1.2 父子组件通信

Props传递：父组件通过v-bind传递数据：

<template>
  <CustomButton :text="buttonText" @click="handleButtonClicked" />
</template>

<script setup>
const buttonText = ref('Submit');
function handleButtonClicked() {
  console.log('Button clicked!');
}
</script>

事件触发：子组件通过emit触发父组件的方法。

3.2 响应式系统与状态管理

3.2.1 响应式数据绑定

在Vue3中，响应式数据可通过ref和reactive实现：

// 使用 ref
const count = ref(0);
count.value++; // 数据变化，视图自动更新  

// 使用 reactive
const state = reactive({
  name: 'Alice',
  age: 25
});
state.age = 26; // 自动触发更新

3.2.2 状态管理（Pinia）

对于复杂应用，推荐使用Pinia进行状态管理：

// stores/counterStore.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

在组件中使用：

<script setup>
import { useCounterStore } from '@/stores/counterStore';

const store = useCounterStore();
</script>

实战案例：待办事项应用

4.1 功能设计

开发一个简单的待办事项应用，包含以下功能：

添加任务
标记任务完成
删除任务

4.2 代码实现

4.2.1 数据模型

const tasks = reactive([
  { id: 1, text: '学习uniapp', completed: false },
  { id: 2, text: '练习Vue3', completed: true }
]);

4.2.2 添加任务

<template>
  <input v-model="newTask" @keyup.enter="addTask" placeholder="输入任务..." />
</template>

<script setup>
const newTask = ref('');
const tasks = reactive([]);

function addTask() {
  if (newTask.value.trim()) {
    tasks.push({
      id: Date.now(),
      text: newTask.value,
      completed: false
    });
    newTask.value = '';
  }
}
</script>

4.2.3 标记完成与删除

<template>
  <view v-for="task in tasks" :key="task.id" class="task-item">
    <checkbox v-model="task.completed" />
    <text :class="{ completed: task.completed }">{{ task.text }}</text>
    <button @click="deleteTask(task.id)">删除</button>
  </view>
</template>

<script setup>
function deleteTask(id) {
  tasks.value = tasks.value.filter(task => task.id !== id);
}
</script>

<style>
.completed {
  text-decoration: line-through;
  color: #999;
}
</style>

进阶技巧与性能优化

5.1 路由管理

uniapp使用Vue Router进行页面跳转，配置示例：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/list',
    component: () => import('@/pages/TodoList.vue')
  },
  {
    path: '/detail',
    component: () => import('@/pages/TodoDetail.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

5.2 性能优化策略

5.2.1 组件复用与懒加载

按需加载：通过import()实现组件的动态加载：

const LazyComponent = defineAsyncComponent(() => import('@/components/LazyComponent.vue'));

避免冗余渲染：使用v-if替代v-show来隐藏复杂组件。

5.2.2 减少计算量

使用computed缓存复杂计算结果：

const filteredTasks = computed(() => {
  return tasks.value.filter(task => !task.completed);
});

结论

通过本文的讲解，开发者可以掌握uniapp与Vue3的核心概念、开发流程及优化技巧。无论是快速搭建跨平台应用，还是通过Vue3的Composition API提升代码质量，这一技术组合都展现了强大的灵活性和实用性。建议读者通过实际项目不断练习，并参考官方文档https://uniapp.dcloud.io/ 和Vue3文档进一步深入学习。

下一步行动建议：

尝试将本例的待办事项应用扩展为多平台版本（如小程序、App）。
探索uniapp的原生API，如地图、支付等高级功能。
加入Vue.js和uniapp社区，获取最新技术动态与解决方案。

掌握uniapp与Vue3，你将站在移动开发的高效之路上，以更少的代码实现更丰富的功能。