news 2026/9/13 9:23:26

Vue3入门指南：从零构建你的第一个应用

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Vue3入门指南：从零构建你的第一个应用

1. 从零开始构建你的第一个Vue3应用

作为一名长期使用Vue进行前端开发的工程师，我见证了Vue3带来的诸多革新。今天我们就来手把手创建一个最基础的Vue3应用，这将是你Vue3之旅的起点。不同于官方文档的全面介绍，我会着重分享实际开发中的关键点和注意事项。

首先确保你已经安装了Node.js（建议16.x以上版本），这是现代前端开发的基础环境。我们将使用Vue3的Composition API风格，这是当前最主流的开发方式。

2. 项目初始化与环境准备

2.1 使用Vite快速搭建项目

在终端中执行以下命令（假设你使用npm）：

npm create vite@latest my-vue-app --template vue

这里有几个关键点需要注意：

  • Vite是现在Vue3项目的标配构建工具，比传统webpack快很多
  • --template vue指定了我们要创建Vue项目
  • 创建完成后，进入项目目录并安装依赖

提示：如果你看到关于@vitejs/plugin-vue的警告，这是正常的，它会被自动安装

2.2 项目结构解析

初始化完成后，你会看到如下目录结构：

my-vue-app/ ├── node_modules/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ ├── main.js │ └── style.css ├── index.html ├── package.json └── vite.config.js

重点关注几个核心文件：

  • main.js：应用入口文件
  • App.vue：根组件
  • index.html：页面模板

3. 核心概念与代码解析

3.1 应用实例创建

打开src/main.js，你会看到如下代码：

import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app')

这里发生了几个关键操作：

  1. 从vue包导入createApp函数
  2. 导入根组件App
  3. 创建应用实例并挂载到DOM

注意：createApp是Vue3的新API，替代了Vue2的new Vue()

3.2 根组件剖析

让我们看看App.vue的内容：

<template> <img alt="Vue logo" src="./assets/logo.png" /> <HelloWorld msg="Welcome to Your Vue.js App"/> </template> <script setup> import HelloWorld from './components/HelloWorld.vue' </script>

这里使用了Vue3的单文件组件(SFC)语法：

  • <template>：定义组件模板
  • <script setup>：使用Composition API的简洁语法
  • 引入了HelloWorld子组件

3.3 挂载过程详解

在index.html中，你会找到一个id为"app"的div：

<div id="app"></div>

这就是我们的挂载点。当调用app.mount('#app')时：

  1. Vue会找到这个DOM元素
  2. 将根组件的内容渲染到其中
  3. 建立响应式系统

4. 开发技巧与最佳实践

4.1 开发服务器使用

启动开发服务器：

npm run dev

Vite会启动一个本地开发服务器，通常运行在http://localhost:5173。它有这些特点：

  • 超快的热模块替换(HMR)
  • 按需编译
  • 原生ES模块支持

4.2 添加你自己的组件

让我们创建一个简单的计数器组件：

  1. 在components目录下新建Counter.vue
  2. 添加以下代码：
<template> <button @click="count++">Clicked {{ count }} times</button> </template> <script setup> import { ref } from 'vue' const count = ref(0) </script>
  1. 在App.vue中使用它：
<template> <Counter /> </template> <script setup> import Counter from './components/Counter.vue' </script>

4.3 样式处理技巧

Vue单文件组件支持多种样式处理方式：

<style scoped> /* 只作用于当前组件的样式 */ button { color: #42b983; } </style> <style module> /* CSS Modules方式 */ </style>

5. 常见问题与解决方案

5.1 浏览器兼容性问题

Vue3默认支持现代浏览器。如果需要支持旧版浏览器：

  1. 安装@vitejs/plugin-legacy
  2. 配置vite.config.js：
import legacy from '@vitejs/plugin-legacy' export default { plugins: [ legacy({ targets: ['defaults', 'not IE 11'] }) ] }

5.2 组件导入路径问题

在Vue3项目中，推荐使用以下路径引用方式：

// 正确 import MyComponent from '@/components/MyComponent.vue' // 需要配置 import MyComponent from './components/MyComponent.vue'

需要在vite.config.js中配置别名：

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, './src') } } })

5.3 响应式数据问题

Vue3使用ref和reactive创建响应式数据：

import { ref, reactive } from 'vue' // 基本类型用ref const count = ref(0) // 对象用reactive const state = reactive({ message: 'Hello' })

常见错误：

  • 直接解构reactive对象会失去响应性
  • 忘记使用.value访问ref值

6. 项目构建与部署

6.1 生产环境构建

运行构建命令：

npm run build

这会生成：

  • 压缩后的JavaScript
  • 处理过的CSS
  • 优化过的静态资源

6.2 部署注意事项

部署时需要注意：

  1. 确保服务器正确配置了history模式（如果使用Vue Router）
  2. 静态资源路径可能需要调整
  3. 可能需要配置404回退

在vite.config.js中配置基础路径：

export default defineConfig({ base: '/my-app/' })

7. 进阶配置建议

7.1 添加Vue Router

安装路由：

npm install vue-router@4

创建路由配置：

import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] }) app.use(router)

7.2 状态管理(Pinia)

安装Pinia：

npm install pinia

配置和使用：

import { createPinia } from 'pinia' app.use(createPinia()) // store示例 export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } } })

8. 调试与性能优化

8.1 使用Vue DevTools

确保安装最新版Vue DevTools，它支持：

  • 组件树查看
  • 状态调试
  • 时间旅行调试

8.2 性能监测

Vue3内置了性能标记：

app.config.performance = true

这会：

  • 在开发工具中显示组件渲染时间
  • 帮助识别性能瓶颈

9. 从Vue2迁移注意事项

如果你熟悉Vue2，需要注意这些变化：

  1. 不再使用new Vue()
  2. Options API仍然可用，但推荐Composition API
  3. v-model用法改变
  4. 事件API变化
  5. 过滤器(filter)被移除

10. 项目结构优化建议

随着项目增长，建议采用这样的结构：

src/ ├── api/ # API请求 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── composables/ # 组合式函数 ├── router/ # 路由配置 ├── stores/ # Pinia状态 ├── utils/ # 工具函数 ├── views/ # 页面组件 ├── App.vue └── main.js

在实际项目中，我发现这种结构能很好地保持代码组织性，特别是当团队协作时。每个目录都有明确的职责，减少了文件查找时间。

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/9/13 9:20:36

AI视觉公司跨界投资机器人：从芯片到场景的技术协同逻辑

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/9/13 9:20:09

Marimo 笔记本导出为纯 Python 脚本（Flat Script）完整指南

Marimo 笔记本导出为纯 Python 脚本&#xff08;Flat Script&#xff09;完整指南 【免费下载链接】marimo A reactive notebook for Python — run reproducible experiments, query with SQL, execute as a script, deploy as an app, and version with git. Stored as pure …

作者头像 李华
网站建设 2026/9/13 9:19:54

STM32F103电机位置闭环系统：DMP姿态解算与I²C实时控制

简介&#xff1a;本资源是一套基于STM32F10系列微控制器实现的电机位置闭环控制系统完整工程代码&#xff0c;面向嵌入式开发初学者与电机控制实践者&#xff0c;解决高精度位置定位、PID参数调试与实时闭环控制落地难题。压缩包共133个文件&#xff0c;含20余个C源文件&#x…

作者头像 李华
网站建设 2026/9/13 9:18:49

基于CNN的农作物病虫害识别：从数据增强到Flask部署的完整Python工程

简介&#xff1a;面向计算机专业毕业生、课程设计学生及算法学习者&#xff0c;提供基于深度学习卷积神经网络的农作物病虫害识别检测系统完整源码与运行说明。项目聚焦农业生产中的病虫害识别难题&#xff0c;覆盖图像预处理、模型训练、评估与部署全流程&#xff0c;帮助读者…

作者头像 李华
网站建设 2026/9/13 9:18:12

MOOSE框架下的电热耦合仿真实践与优化

1. MOOSE电热耦合案例解析概述MOOSE&#xff08;Multiphysics Object-Oriented Simulation Environment&#xff09;作为开源的多物理场仿真框架&#xff0c;在核能、材料科学等领域有着广泛应用。电热耦合分析是其中最具工程价值的应用场景之一&#xff0c;它能够准确模拟电流…

作者头像 李华