创建Vue3工程

两种方式：基于vite或基于vue-cli创建

一、基于vite创建（官方推荐）

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

优势：速度更快、可以直接写ts、按需编译，不再等待整个应用编译完成

具体操作：

官方文档指路：https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application

1、首先需要安装好node.js，可以通过输入cmd打开命令提示符，输入node查看，如果有node版本则说明有node环境，如果没有，去官网安装即可，安装之后重启电脑

2、在命令提示符中完成以下操作（最好在桌面打开终端），回车表示确定

检查完node版本后，回到这个命令行，再开始创建

（按下 Ctrl+D同时按回车，可以退出 Node.js 的交互式解释器，npm 是 Node.js 的包管理器，它应该在命令行界面（CLI, Command Line Interface）中运行，而不是在 Node.js 的 REPL 环境中。） 

## 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

二、基于vue-cli（已处于维护状态）创建

## 查看@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

三、通过vscode打开项目文件夹

发现飘红

是因为缺少依赖，我们需要用npm i 安装依赖，然后关掉vscode重新再打开

 发现不再飘红，同时出现新文件夹

检查index.html里有没有引入main.ts