创建VUE3工程+TypeScripts

1、准备工作

• 下载node.js，需要保证node.js版本在18以上，因为vue3不支持低版本的node.js。

• 下载前端编译器（webstorm、vs code等），这里推荐下载vs code

2、创建vue3工程

• 在需要创建工程的路径（这里我的路径为D/learn_Vue3）中输入cmd，回车即可进入。

• 输入要创建vue3工程代码：npm create vue@latest
• 随后按照提示按需选择，即可完成项目初始化。

• 完成初始化Vue3项目后，用vs code打开刚刚创建好的工程文件（就是你在创建Vue3项目时命名的文件夹，我这里是hello_vue3）。

• 这里详细介绍一下VUE3工程文件都有哪些：

HELLO_VUE3：就是项目名称，这里会把所有的小写字母转成大写。

.vscode：中有一个extensions.json文件，该文件用来存储vscode安装的一些插件。

public：中有一个favicon.ico文件，该文件用来存储页签图标。

src：下包含所有后续需要编写的组件等代码。

.gitignore：是git忽略文件，也就是将代码上传到git中需要忽略哪些文件，将需要忽略文件写入.gitignore文件。

env.d.ts：文件刚创建工程时会标红，我们会发现在我们的项目中没有node_modules文件，没有该文件就意味着该工程没有依赖，这个时候，我们需要在终端上输入npm install命令为工程安装所有的依赖，执行完之后，我们发现工程文件夹中出现了node_modules文件且伴随着package-lock.json文件新建，env.d.ts红色标记消失。这个时候，最好关掉重新打开该项目，防止没有更新到位。这个文件用来让ts认识其他扩展文件，比如.jpg\.txt，对所有可能引入的文件做好了声明。

index.html：这个是入口文件，这里vite和webpack有区别，对于这个工程来说，入口文件就不是main.js，也不是main.ts，而是index.html。拿到手一个前端项目，如何去启动它呢？这个时候就需要查看package.json文件里的找scripts中的"dev": "vite"，运行npm run dev就可以执行前端项目。

package-lock.json：文件会保存 node_modules 中所有包的信息，包括精确版本 version 和下载地址 resolved 以及依赖关系 dependencies 等，用以记录当前状态下实际安装的各个模块的具体来源和版本号。当项目中已有package-lock.json 文件，在安装项目依赖时，将以该文件为主进行解析安装指定版本依赖包，而不是使用 package.json 来解析和安装模块。因为 package.json 指定的版本不够具体，而package-lock 为每个模块及其每个依赖项指定了版本，位置和完整性哈希，所以它每次的安装都是相同的。正因为有了 package-lock.json 文件锁定版本号，所以当你执行 npm install 的时候，node 不会自动更新 package.json 文件中的模块。参考博客：深入理解 package.json 文件与 package-lock.json 文件-CSDN博客

package.json：定义了这个项目所需要的各种模块，以及项目的配置信息，包括名称、版本、许可证、依赖模块等元数据。格式是严格的JSON格式。

README.md：对工程简单的介绍。

tsconfig.app.json：ts配置文件。

tsconfig.json：ts配置文件。

tsconfig.node.json：ts配置文件。

vite.config.ts：整个工程的配置文件，可以按照插件，配置一些代理。

注：停止项目快捷键：ctrl+c。