<返回目录     Powered by claud/xia兄

第1课: Vue3简介与环境搭建

深入理解Vue3核心概念，掌握多种开发环境搭建方式

📚 学习目标

🎯 什么是Vue3？

Vue3是一个渐进式JavaScript框架，用于构建用户界面。它由尤雨溪（Evan You）创建，于2020年9月正式发布。Vue3在架构、性能、开发体验等方面都进行了重大改进。

Vue3的设计哲学

渐进式框架意味着你可以根据项目需求逐步采用Vue3的功能：

🚀 Vue3的核心特性与改进

1. 组合式API（Composition API）

革命性的代码组织方式，解决了Options API在复杂组件中的代码组织问题：

2. 性能大幅提升

3. 更好的TypeScript支持

Vue3完全用TypeScript重写，提供一流的TypeScript开发体验。

4. 新特性

🔬 Vue3响应式原理深度解析

核心机制：基于Proxy的响应式系统

Vue2 vs Vue3响应式对比

特性Vue2（Object.defineProperty）Vue3（Proxy）
数组监听需要特殊处理，无法监听索引变化完美支持数组所有操作
对象新增属性需要使用Vue.set自动监听新增属性
性能递归遍历所有属性惰性监听，按需响应
嵌套对象深度递归，性能开销大延迟代理，性能优化

Proxy的工作原理

// Vue3响应式核心原理示例
const reactive = (obj) => {
  return new Proxy(obj, {
    get(target, key) {
      console.log(`读取属性: ${key}`)
      return target[key]
    },
    set(target, key, value) {
      console.log(`设置属性: ${key} = ${value}`)
      target[key] = value
      // 触发视图更新
      return true
    }
  })
}

const state = reactive({ count: 0 })
state.count++ // 触发set拦截器
原理说明：Proxy可以拦截对象的所有操作（get、set、delete等），Vue3利用这一特性实现了更强大的响应式系统。

🏗️ 环境搭建方式详解

根据不同的使用场景，Vue3提供了多种环境搭建方式：

方式1：使用CDN（快速体验/学习）

适用场景：快速原型开发、学习演示、简单的静态页面

原理说明：通过CDN引入Vue3的全局构建版本，直接在HTML中使用，无需构建步骤。 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 CDN示例</title>
    <!-- 引入Vue3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <p>计数器: {{ count }}</p>
        <button @click="increment">点击+1</button>
    </div>

    <script>
        // 从Vue全局对象中解构createApp
        const { createApp } = Vue;

        // 创建Vue应用实例
        const app = createApp({
            // 数据选项
            data() {
                return {
                    title: '我的第一个Vue3应用',
                    count: 0
                }
            },
            // 方法选项
            methods: {
                increment() {
                    this.count++;
                }
            }
        });

        // 挂载到DOM元素
        app.mount('#app');
    </script>
</body>
</html>

方式2：使用Vite创建项目（推荐用于生产）

适用场景：生产环境项目、需要构建优化的应用

原理说明：Vite是Vue团队开发的下一代前端构建工具，利用ES模块和原生浏览器支持实现极速的热更新。

创建项目步骤

# 使用npm（推荐）
npm create vue@latest

# 或者使用yarn
yarn create vue

# 或者使用pnpm
pnpm create vue

项目配置选项详解

✔ Project name: my-vue-app          # 项目名称
✔ Add TypeScript? No / Yes         # 是否添加TypeScript支持
✔ Add JSX Support? No / Yes        # 是否支持JSX语法
✔ Add Vue Router? No / Yes         # 是否添加Vue Router路由
✔ Add Pinia? No / Yes              # 是否添加Pinia状态管理
✔ Add Vitest? No / Yes             # 是否添加Vitest测试框架
✔ Add ESLint? No / Yes             # 是否添加ESLint代码检查
✔ Add Prettier? No / Yes           # 是否添加Prettier代码格式化

安装依赖并启动开发服务器

# 进入项目目录
cd my-vue-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev
技术原理：Vite利用浏览器原生ES模块支持，在开发时不需要打包整个应用，实现秒级启动和热更新。

方式3：使用Vue CLI（传统方式）

适用场景：需要兼容Vue2项目、企业级复杂应用

# 全局安装Vue CLI
npm install -g @vue/cli

# 创建项目
vue create my-vue3-app

# 选择Vue3预设
? Please pick a preset: 
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint) 
  Manually select features

🔧 构建工具对比：Vite vs Vue CLI

特性ViteVue CLI
启动速度秒级启动（基于ESM）较慢（基于Webpack打包）
热更新极快（按需编译）较慢（全量打包）
配置复杂度简单，开箱即用复杂，需要配置Webpack
生态成熟度较新，但发展迅速成熟稳定
推荐场景新项目、学习企业级、复杂项目

💻 第一个Vue3应用实战

单文件应用示例

创建一个完整的Vue3单文件应用，包含数据绑定、事件处理和计算属性：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3计数器应用</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
        .counter { text-align: center; margin-top: 50px; }
        button { padding: 10px 20px; margin: 0 5px; font-size: 16px; }
        .history { margin-top: 20px; }
    </style>
</head>
<body>
    <div id="app">
        <div class="counter">
            <h1>{{ title }}</h1>
            <p>当前计数: <span style="font-size: 2em; color: #42b883;">{{ count }}</span></p>
            <p>计数平方: {{ squaredCount }}</p>
            
            <div>
                <button @click="decrement" :disabled="count <= 0">-1</button>
                <button @click="reset">重置</button>
                <button @click="increment">+1</button>
            </div>
            
            <div class="history" v-if="history.length > 0">
                <h3>操作历史</h3>
                <ul>
                    <li v-for="(item, index) in history" :key="index">
                        {{ item.action }} - 结果: {{ item.value }}
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        const app = createApp({
            data() {
                return {
                    title: 'Vue3计数器应用',
                    count: 0,
                    history: []
                }
            },
            computed: {
                squaredCount() {
                    return this.count * this.count;
                }
            },
            methods: {
                increment() {
                    this.count++;
                    this.addToHistory('增加', this.count);
                },
                decrement() {
                    if (this.count > 0) {
                        this.count--;
                        this.addToHistory('减少', this.count);
                    }
                },
                reset() {
                    this.count = 0;
                    this.addToHistory('重置', this.count);
                },
                addToHistory(action, value) {
                    this.history.unshift({
                        action,
                        value,
                        timestamp: new Date().toLocaleTimeString()
                    });
                    // 只保留最近5条记录
                    if (this.history.length > 5) {
                        this.history.pop();
                    }
                }
            }
        });

        app.mount('#app');
    </script>
</body>
</html>
应用分析：这个示例展示了Vue3的核心功能：数据绑定、事件处理、计算属性、条件渲染和列表渲染。

📁 Vue3项目结构详解

标准Vite项目结构

my-vue-app/
├── node_modules/          # 项目依赖包（自动生成）
├── public/                # 静态资源目录（不参与构建）
│   ├── favicon.ico        # 网站图标
│   └── index.html         # HTML模板（Vite会处理）
├── src/                   # 源代码目录
│   ├── assets/            # 静态资源（图片、字体等）
│   ├── components/        # 可复用组件
│   ├── App.vue            # 根组件（应用入口）
│   ├── main.js            # 应用入口文件
│   └── style.css          # 全局样式
├── .gitignore             # Git忽略文件配置
├── index.html             # 主HTML文件
├── package.json           # 项目配置和依赖管理
├── package-lock.json      # 依赖版本锁定文件
├── README.md              # 项目说明文档
└── vite.config.js         # Vite构建配置

核心文件解析

main.js - 应用入口

import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

// 创建Vue应用实例
const app = createApp(App)

// 可以在这里注册全局组件、插件等
// app.component('MyComponent', MyComponent)

// 挂载到DOM
app.mount('#app')

App.vue - 根组件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="欢迎使用Vue3 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

🛠️ 开发工具与环境配置

必备开发工具

VS Code配置推荐

// settings.json
{
  "vetur.validation.template": false,
  "vetur.validation.script": false,
  "vetur.validation.style": false,
  "vetur.format.enable": false,
  "vetur.useWorkspaceDependencies": true,
  "typescript.preferences.autoImportFileExcludePatterns": [
    "vue/dist/vue.d.ts"
  ]
}

📝 实战练习

基础练习

  1. 使用CDN方式创建一个Vue3页面，实现一个简单的待办事项列表
  2. 使用Vite创建一个Vue3项目，观察项目结构并理解每个文件的作用
  3. 修改App.vue，添加一个计数器组件，实现增加、减少、重置功能

进阶挑战

  1. 创建一个用户信息管理系统，包含姓名、年龄、邮箱的CRUD操作
  2. 实现本地存储功能，刷新页面后数据不丢失
  3. 添加表单验证功能，确保输入数据的合法性

调试与优化

  1. 安装Vue DevTools，学习如何使用它调试Vue应用
  2. 配置VS Code的Volar扩展，体验智能提示和代码补全
  3. 学习使用浏览器的开发者工具分析Vue应用的性能

💡 学习建议

返回首页 下一课: 模板语法与数据绑定