2. 创建Vue3工程

1. 【基于 vue-cli 创建】点击查看[官方文档]

注：目前`vue-cli`已处于维护模式，官方推荐基于 `Vite` 创建项目。

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version

## 安装或者升级你的@vue/cli
npm install -g @vue/cli

## 执行创建命令
vue create vue_test

##  随后选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x

## 启动
cd vue_test
npm run serve

2. 【基于 vite 创建】(推荐)

vite 是新一代前端构建工具，官网地址：https://vitejs.cn/，vite的优势如下：

• 轻量快速的热重载（HMR），能实现极速的服务启动。
• 对 TypeScript、JSX（js和结构混着写的一种语法）、CSS 等支持开箱即用。
•  真正的按需编译，不再等待整个应用编译完成。
•  webpack构建 与 vite构建对比图如下：

总结：第一种属于webpack的方式,由于路由，模块，组件特别多，那么分析就非常慢

这种属于vite创建，上来就启动开发服务器，从入口进来之后看什么处理什么模块，也就是懒加载

 具体操作如下（点击查看官方文档）

注意：电脑上需按照node.js环境，如果不安装是没有npm 这个命令的

## 1.创建命令
npm create vue@latest

## 2.具体配置
## 配置项目名称
√ Project name: vue3_test

## 是否添加TypeScript支持
√ Add TypeScript?  Yes

## 是否添加JSX支持
√ Add JSX Support?  No

## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No

## 是否添加pinia环境
√ Add Pinia for state management?  No

## 是否添加单元测试
√ Add Vitest for Unit Testing?  No

## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No

## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes

## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

```

(1)分析 vue项目目录

（2） 分析src-main.ts的内容

import './assets/main.css'
//创建应用（造花盆）
import { createApp } from 'vue'
//组件（根），后续我们写的A.vue,B.vue,C.vue都相当于花的枝插
import App from './App.vue'

createApp(App).mount('#app')
//相当于把花插在花盆里面，mount就是将花摆在哪个位置
//创建一个前端应用，且这个应用的所有组件的根组件是app,mount的意思是挂载，mount('#app')就是将其挂载在一个id为app的容器里面