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

什么是Vue3？

Vue3是一个渐进式JavaScript框架，用于构建用户界面。它由尤雨溪（Evan You）创建，于2020年9月发布。Vue3在性能、TypeScript支持和组合式API方面进行了重大改进。

Vue3的核心特性

组合式API（Composition API）：更灵活的代码组织方式，更好的逻辑复用
性能提升：更快的渲染速度，更小的打包体积
更好的TypeScript支持：完全用TypeScript重写，类型推导更准确
Teleport：可以将组件渲染到DOM的任意位置
Fragments：支持多个根节点
Suspense：异步组件的优雅处理

环境搭建方式

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

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">{{ message }}</div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    message: 'Hello Vue3!'
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

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

# 使用npm
npm create vue@latest

# 使用yarn
yarn create vue

# 使用pnpm
pnpm create vue

按照提示选择配置：

✔ Project name: my-vue-app
✔ Add TypeScript? No / Yes
✔ Add JSX Support? No / Yes
✔ Add Vue Router? No / Yes
✔ Add Pinia? No / Yes
✔ Add Vitest? No / Yes
✔ Add ESLint? No / Yes

安装依赖并启动

cd my-vue-app
npm install
npm run dev

提示：项目将在 http://localhost:5173 启动

第一个Vue3应用

创建 index.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应用</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <p>{{ description }}</p>
        <button @click="count++">点击次数: {{ count }}</button>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    title: '欢迎学习Vue3',
                    description: 'Vue3是一个渐进式JavaScript框架',
                    count: 0
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

Vue3项目结构

my-vue-app/
├── node_modules/      # 依赖包
├── public/            # 静态资源
├── src/
│   ├── assets/        # 资源文件
│   ├── components/    # 组件
│   ├── App.vue        # 根组件
│   └── main.js        # 入口文件
├── index.html         # HTML模板
├── package.json       # 项目配置
└── vite.config.js     # Vite配置

main.js入口文件

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

createApp(App).mount('#app')

开发工具推荐

VS Code：配合Volar插件（Vue3官方推荐）
Vue DevTools：浏览器调试工具
Vite：快速的开发服务器和构建工具

练习

使用CDN方式创建一个简单的Vue3页面，显示"Hello Vue3"
使用Vite创建一个Vue3项目并成功启动
修改App.vue中的内容，观察热更新效果
安装Vue DevTools浏览器插件

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