【前端开发】Vue3基础入门

一、前端主流框架

前端三大主流框架是 React、Vue 和 Angular‌，它们是当前网页开发中最广泛使用的技术方案。以下为你详细梳理各类前端框架及其特点，帮助你快速选型。

主流前端框架有哪些

1. React‌

‌开发者‌：Facebook（Meta）维护
‌定位‌：UI 库（非完整框架），强调组件化与状态管理
‌适用场景‌：动态交互强的单页应用（SPA）、大型 Web 项目
✅ ‌优势‌：

‌高效渲染‌：基于虚拟 DOM，仅更新变化部分，提升性能
‌高度灵活‌：可自由搭配路由（React Router）、状态管理（Redux/Zustand）等生态工具
‌跨平台能力强‌：配合 React Native 可开发移动端应用
‌社区庞大‌：全球超 300 万开发者使用，资源丰富
❌ ‌缺点‌：

‌学习曲线陡峭‌：JSX 语法、函数式编程理念对新手有门槛
‌文档分散‌：核心库轻量，但完整项目需自行集成多个库
‌不适合小型项目‌：配置成本高，小项目“杀鸡用牛刀”
📌 知名应用：Facebook、Instagram、Netflix、Airbnb 等均采用 React

2. Vue‌

‌开发者‌：尤雨溪（Evan You）主导，渐进式框架
‌定位‌：易上手、渐进增强的前端框架
‌适用场景‌：中小型项目、快速原型开发、企业内部系统
✅ ‌优势‌：

‌简单易学‌：API 清晰，文档友好，初学者友好
‌双向数据绑定‌：v-model 实现数据与视图自动同步
‌轻量高效‌：压缩后仅 ~18KB，加载速度快
‌渐进式架构‌：可从简单页面逐步扩展为复杂 SPA
❌ ‌缺点‌：

‌生态相对封闭‌：相比 React 社区规模较小
‌企业级支持较弱‌：大型项目案例少于 React/Angular
‌不支持 IE8‌：老旧浏览器兼容性差
📌 知名应用：阿里巴巴、小米官网、GitLab 前端部分使用 Vue

3. Angular‌

‌开发者‌：Google 官方出品
‌定位‌：全功能、企业级前端框架
‌适用场景‌：大型复杂系统、数据密集型应用、桌面级 Web 程序
✅ ‌优势‌：

‌开箱即用‌：内置路由、表单验证、HTTP 客户端、依赖注入等全套功能
‌类型安全‌：基于 TypeScript，提供强类型检查，减少运行时错误
‌CLI 强大‌：ng 命令行工具可一键生成组件、服务、模块
‌企业级支持‌：Google 长期维护，适合长期迭代项目
❌ ‌缺点‌：

‌学习成本高‌：需掌握模块、服务、装饰器、RxJS 等概念
‌性能略低‌：框架体积大，启动速度慢于 React/Vue
‌灵活性差‌：强制遵循特定架构，定制空间有限
📌 知名应用：Google Gmail、NBA 官网、Microsoft Dynamics 365 使用 Angular

其他值得关注的前端框架

框架	类型	特点	适用场景
‌ Svelte‌	编译时框架	无虚拟 DOM，编译成原生 JS，运行时极快	轻量级应用、嵌入式 UI
‌ Next.js‌	React 服务端框架	支持 SSR、SSG，SEO 友好	内容型网站、电商首页
‌ Nuxt.js‌	Vue 服务端框架	类似 Next.js，支持服务端渲染	需要 SEO 的 Vue 项目
‌ Preact‌	React 轻量替代	体积小（3KB），API 兼容 React	移动端、性能敏感项目

如何选择适合网页开发的框架？

项目类型	推荐框架	原因
企业级管理系统	‌Angular‌	功能完整、结构规范、团队协作友好
中小型 Web 应用 ‌	Vue‌	上手快、开发效率高、生态完善
高交互性产品	‌React‌	性能优、组件复用强、跨平台支持好
内容展示类网站	‌Next.js / Nuxt.js‌	支持服务端渲染，利于 SEO
极致性能需求	‌Svelte‌	编译时优化，运行时无框架开销

二、Vue3介绍

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

单文件组件

Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个.vue文件里。

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

API 风格​

Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。

选项式 API (Options API)

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

组合式 API (Composition API)

在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

选项式 API 是在组合式 API 的基础上实现的，都是相通的，初学者推荐选项式API，开发完整但页应用推荐组合式API。熟悉后两种风格可随意切换使用。

Vue开发环境准备

1. Node.js安装
   Node官网下载：https://nodejs.org/zh-cn

Node.js >= 18.0

2. 编辑器
   VS Code或Pycharm
3. 浏览器
   Chrome / Edge，用于调试
   Vue插件下载

两种项目构建工具

• Vite（推荐）

  1. 开发服务器极快：基于原生 ES Module，开发时不打包整个项目，按需加载，冷启动几乎秒开，改代码热更新飞快。
  2. 内置 TS 支持，开箱支持 JSX。
  3. 生产构建底层使用 Rollup，打包产物精简。
  4. 配置简洁，相比 webpack 配置量少很多。
  5. Vue 官方未来主力工具，持续迭代更新。

• Vue‑CLI

  1. 兼容大量老项目，对 CommonJS 包兼容性好，坑少。
  2. GUI 可视化管理：vue ui。

  开发启动慢，项目越大冷启动越慢；热更新速度随项目增大明显下降。
  项目已经停止维护，不再更新新特性。

三、Vue项目开发

构建项目

1. 命令行中执行创建命令 npm create vue@latest
2. 根据提示：输入项目名称、开启支持功能（不确定就选No，后续可以再添加）
   
3. 创建完成后，进行安装依赖

cd <项目名称>
npm install

4. 运行项目npm run dev

项目可正常浏览器访问了

项目架构

my-vue-project
├── .vscode/                # VSCode编辑器配置
├── public/                 # 静态资源(原封不动直接复制到打包 dist，不经过 vite 编译)
├── src/                    # ✅源代码目录，业务代码全部写这里
│   ├── assets/             # 静态资源：图片、字体、less/scss全局样式
│   ├── components/         # 通用公共组件（可复用小组件:如按钮、弹窗、表单组件，多个页面复用的组件）
│   ├── composables/        # 组合式函数，抽离复用逻辑（如添加tab、关闭tab），替代 vue2 的 mixins，命名一般 useXxx。
│   ├── router/             # vue‑router路由配置
│   ├── stores/             # Pinia状态管理，存放全局状态，共享数据
│   ├── views/              # 页面组件，路由对应的页面
│   ├── types/              # 定义对象属性类型限制
│   ├── utils/              # 工具函数
│   ├── App.vue             # 根组件，所有页面挂载在这里
│   ├── main.ts             # ✅项目入口文件，整个程序启动入口
│   └── vite‑env.d.ts       # ts环境声明文件，识别vue文件
├── .eslintrc.cjs           # ESLint代码检查规则
├── .gitignore              # git忽略文件配置，哪些文件不上传git
├── .prettierrc.json        # Prettier代码格式化配置
├── index.html              # ✅html入口模板，vite项目真正的入口
├── package.json            # 项目依赖、脚本命令配置
├── package‑lock.json       # npm依赖锁定文件(pnpm是pnpm‑lock.yaml)
├── tsconfig.json           # Typescript编译配置
├── tsconfig.node.json      # ts针对vite配置文件的编译配置
└── vite.config.ts          # ✅Vite构建工具配置文件(配置别名、代理、端口、打包、插件等。)

学习代码基础

四、Vue项目实战

【Vue3进阶】【速构云台】项目实战

五、相关学习官网

Vue3官网
Vite官网
Element组件: https://element-plus.org/zh-CN
UI设计工具: https://pixso.cn/app/recent
B站Vue学习视频
CSS教程|菜鸟教程
Vue 单文件组件 CSS 官方文档 scoped、:deep、:global、css module，必看，权威准确

工具 & 辅助网站:
阿里图标库 iconfont 项目引入图标，Vue 项目高频使用。