第1章前端基础与环境搭建

第2节：创建第一个Vue项目

在准备好开发环境后，我们可以开始创建第一个Vue项目了。Vue提供了多种创建项目的方式，我们将逐一介绍并重点学习现代化的Vite创建方式。

1.2.1 Vue项目的三种创建方式对比

Vue项目有三种主要的创建方式，每种方式适用于不同的场景：

1. CDN引入方式（学习原理）

CDN（Content Delivery Network）引入是最简单的方式，适合快速学习和原型开发。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue CDN Example</title>
    <!-- 引入Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <button @click="reverseMessage">反转消息</button>
    </div>

    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    message: 'Hello Vue!'
                };
            },
            methods: {
                reverseMessage() {
                    this.message = this.message.split('').reverse().join('');
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

优缺点：

✅ 简单易用，无需构建工具
✅ 适合快速原型开发和学习
❌ 不适合大型项目
❌ 无法使用单文件组件
❌ 依赖管理复杂

2. Vue CLI创建（传统方式）

Vue CLI是Vue 2时代的官方脚手架工具，虽然现在已经被Vite取代，但仍有一些项目在使用。

安装Vue CLI：

npm install -g @vue/cli

创建项目：

vue create my-vue-app

优缺点：

✅ 成熟稳定
✅ 丰富的插件生态
❌ 构建速度较慢
❌ 配置复杂
❌ 不符合现代前端开发趋势

3. Vite创建（现代化方式）

Vite是Vue 3推荐的构建工具，具有极速的开发服务器和优化的构建输出。

创建项目：

# 使用npm
npm create vite@latest my-vue-app -- --template vue

# 使用yarn
yarn create vite my-vue-app -- --template vue

# 使用pnpm
pnpm create vite my-vue-app -- --template vue

优缺点：

✅ 极速的开发服务器
✅ 优化的构建输出
✅ 简洁的配置
✅ 支持多种框架
✅ 符合现代前端开发趋势

1.2.2 Vite项目结构详解

使用Vite创建的Vue项目具有清晰的结构，让我们来详细了解一下：

my-vue-app/
├── public/              # 静态资源目录
│   └── vite.svg        # Vite默认图标
├── src/                # 源代码目录
│   ├── assets/          # 模块资源
│   │   └── vue.svg      # Vue默认图标
│   ├── components/      # 组件目录
│   │   └── HelloWorld.vue  # 示例组件
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── .gitignore          # Git忽略文件
├── index.html          # 页面模板
├── package.json        # 项目配置
├── README.md           # 项目说明
└── vite.config.js      # Vite配置

各文件/目录说明：

**public/**：存放静态资源，这些资源不会被Vite处理，会直接复制到输出目录
**src/**：存放源代码，所有需要被Vite处理的文件都放在这里
- **assets/**：存放图片、字体等静态资源，会被Vite处理并优化
- **components/**：存放Vue组件，每个组件是一个.vue文件
- App.vue：根组件，是整个应用的入口组件
- main.js：JavaScript入口文件，用于创建Vue应用实例
index.html：HTML模板文件，Vite会将编译后的JavaScript和CSS注入到这个文件中
package.json：项目配置文件，包含项目信息、依赖和脚本命令
vite.config.js：Vite配置文件，可以自定义Vite的行为

1.2.3 理解package.json中的脚本命令

package.json文件中定义了项目的脚本命令，让我们来了解一下：

{
  "name": "my-vue-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.2.0"
  }
}

脚本命令说明：

npm run dev：启动开发服务器，支持热重载
npm run build：构建生产版本，生成优化后的静态文件
npm run preview：预览生产构建的静态文件

依赖说明：

dependencies：生产环境依赖，包含Vue核心库
devDependencies：开发环境依赖，包含Vite和Vue插件

1.2.4 开发服务器与热重载原理

Vite的开发服务器具有极速的启动速度和热重载功能，这得益于其独特的设计：

ESM原生支持：Vite利用浏览器对ESM的原生支持，无需打包直接提供源码
按需编译：只编译当前需要的文件，而不是整个项目
热模块替换（HMR）：修改文件后只更新变化的部分，无需刷新整个页面

热重载的工作原理：

浏览器通过WebSocket与开发服务器建立连接
当文件发生变化时，开发服务器通知浏览器
浏览器只更新变化的模块，保持应用状态不变
Vue组件热更新时，还会保持组件的状态

1.2.5 项目构建与打包流程

当项目开发完成后，我们需要构建生产版本，以便部署到服务器上。

构建命令：

npm run build

构建流程：

依赖解析：分析项目依赖，构建依赖图
代码转换：将Vue单文件组件转换为JavaScript
代码优化：压缩代码、移除未使用的代码、优化CSS
资源处理：处理图片、字体等静态资源
生成输出：生成优化后的静态文件

构建输出目录：

dist/
├── assets/
│   ├── index-xxxxxxxx.css
│   └── index-xxxxxxxx.js
└── index.html

部署建议：

使用静态文件服务器部署dist目录
推荐使用CDN加速静态资源
配置适当的缓存策略

本章小结

在本节中，我们学习了创建Vue项目的三种方式，重点掌握了Vite创建方式：

Vue项目的三种创建方式对比（CDN、Vue CLI、Vite）
Vite项目结构详解
package.json脚本命令的理解
开发服务器与热重载原理
项目构建与打包流程

现在，我们已经掌握了创建Vue项目的方法，接下来可以开始学习Vue的基础语法了。

第1章 前端基础与环境搭建

第2节：创建第一个Vue项目

1.2.1 Vue项目的三种创建方式对比

1. CDN引入方式（学习原理）

2. Vue CLI创建（传统方式）

3. Vite创建（现代化方式）

1.2.2 Vite项目结构详解

1.2.3 理解package.json中的脚本命令

1.2.4 开发服务器与热重载原理

1.2.5 项目构建与打包流程

本章小结

第1章前端基础与环境搭建