第一章：Vue3入门——从历史到实战的全面认知

大家好，我是你们这门课的主讲。今天咱们聊聊Vue3的入门知识。说实话，我接触Vue已经好几年了，从Vue2一路用到Vue3，踩过不少坑，也积累了一些心得。这一章，我会带着大家从Vue的发展史讲起，再到Vue3的新特性、应用场景，最后手把手搭建开发环境。嗯，内容不少，但都是干货。

1.1 Vue.js发展史：从诞生到主流

Vue.js是尤雨溪在2014年发布的。那时候前端框架还是Angular和React的天下。Vue的出现，说白了就是提供了一个更轻量、更易上手的选择。我记得2016年我第一次用Vue时，就被它的简洁惊艳到了——一个HTML文件加一个script标签就能跑起来，太适合小项目了。

Vue2在2016年发布，带来了虚拟DOM和响应式系统，一下子成了主流。我那时候在公司做后台管理系统，Vue2配合Element UI，开发效率直接翻倍。但Vue2也有痛点，比如TypeScript支持不够好，逻辑复用靠mixins容易混乱。

2020年，Vue3正式发布。这次是重写，底层用Proxy替代了Object.defineProperty，性能提升明显。我升级第一个项目时，最直观的感受就是——打包体积小了，运行快了。你想想看，一个框架能保持向后兼容的同时，还做出这么大的突破，确实不容易。

1.2 Vue3新特性：到底新在哪？

Vue3的新特性，我挑几个最实用的讲。你不需要一次性全记住，后面课程会反复用到。

1.2.1 Composition API

这是Vue3最大的变化。以前Vue2用Options API，data、methods、computed分开写。小项目还行，但组件一复杂，逻辑分散在各处，维护起来很痛苦。Composition API允许你把相关逻辑聚在一起，用setup函数组织代码。

// Vue2 Options API
export default {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

// Vue3 Composition API
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    return { count, increment }
  }
}

我个人习惯用Composition API写复杂组件。比如一个表单页面，验证逻辑、提交逻辑、数据加载逻辑，用setup函数可以清晰分组。我曾经在一个项目中，把一个500行的Options API组件重构为Composition API，代码量没少，但可读性提升了一个档次。

1.2.2 响应式系统升级

Vue2用Object.defineProperty，只能监听已有属性，新增属性需要Vue.set。Vue3用Proxy，可以监听整个对象，包括新增和删除。说白了，就是更智能了。我在项目中遇到过一个问题：Vue2里给对象动态添加属性，视图不更新，排查了半天才发现是响应式没跟上。Vue3直接解决了这个痛点。

1.2.3 其他亮点

• Teleport：把组件渲染到DOM的任意位置，适合做弹窗、提示框
• Suspense：处理异步组件加载，可以显示加载状态
• Fragment：组件支持多个根节点，不用再包一层div
• Tree-shaking：按需引入API，打包体积更小

1.3 Vue3应用场景：它能做什么？

Vue3的应用场景很广。我总结了几类最常见的：

场景	说明	我的经验
企业级后台系统	数据管理、权限控制、报表展示	这是Vue3的强项，配合Element Plus效率极高
移动端H5应用	配合Vant或NutUI，开发小程序或H5	Vue3的Tree-shaking让移动端包体积更小
中大型单页应用	电商、社交、内容管理	Composition API适合复杂状态管理
桌面端应用	配合Electron，开发跨平台桌面软件	我做过一个内部工具，Vue3+Electron很稳

你想想看，Vue3的灵活性和性能，基本覆盖了前端开发的大部分场景。特别是企业级后台，我们这门课就是围绕这个场景展开的。

1.4 开发环境搭建：Node.js、Vite、Vue CLI

环境搭建是第一步。我建议你用Vite，它是Vue3官方推荐的构建工具，速度比Webpack快很多。Vue CLI虽然也能用，但Vite是未来趋势。

1.4.1 安装Node.js

Node.js是运行环境，Vite和Vue CLI都依赖它。去官网下载LTS版本就行。安装完成后，打开终端验证：

node -v   # 查看Node版本，建议18以上
npm -v    # 查看npm版本

嗯，这里要注意：Node版本太老会导致Vite报错。我曾经在旧服务器上装Vite，结果Node 12不支持，升级到18才解决。

1.4.2 使用Vite创建Vue3项目

Vite创建项目很简单，一行命令搞定：

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

然后进入项目目录，安装依赖：

cd my-vue3-app
npm install
npm run dev

浏览器打开 http://localhost:5173，就能看到Vue3的欢迎页面了。Vite的热更新速度，用过就回不去了。我开发时改个代码，几乎瞬间刷新，不像Webpack要等好几秒。

1.4.3 使用Vue CLI（备选方案）

如果你习惯Vue CLI，也可以用它：

npm install -g @vue/cli
vue create my-vue3-app

选择Vue3预设即可。不过说实话，Vue CLI现在更新慢了，我建议新项目直接用Vite。

1.4.4 安装Element Plus

我们这门课要用Element Plus，安装也很简单：

npm install element-plus --save

然后在main.js中引入：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

这样就能在组件中使用Element Plus的组件了。比如：

<template>
  <el-button type="primary">我是Element Plus按钮</el-button>
</template>

我个人习惯按需引入，减少打包体积。但初学阶段，全量引入更方便，后面课程会讲按需引入的配置。

小结

这一章我们讲了Vue3的来龙去脉、新特性、应用场景，还搭建了开发环境。说白了，Vue3就是更现代、更高效、更灵活。下一章我们会深入Vue3的核心——响应式原理和Composition API实战。嗯，做好准备，干货还在后面。