【Vue3】02-Vue3工程目录分析

其它篇章：
一：【Vue3】01-创建Vue3工程

• 以下是vue3工程的目录
  

1. .vscode/extensions.json

• 点开.vscode/extensions.json，内容如下：
  其中
• 随便打开一个文件，右下角会出现一个提示：
  这是提示是否安装推荐的扩展，而这个扩展是根据.vscode下的extensions.json的内容决定的。
  这里点击安装就可以了。
• 点击安装后，会跳转到这个界面，并且自动安装这个插件。
  

这个插件是vue官方专门为vscode制作的插件。

2.public

public其实就是脚手架的根目录，这里面就一个文件：favicon.ico，这个文件就是浏览器访问该项目时，服务器返回的图标，就是网页标签上文字左边的图标。

3. src

前端工作所有的成果就放在src，写的.js、.css、.vue

4. env.d.ts

介绍

• ts不认识认识.jpg、.txt等文件，这个文件的作用就是让ts去认识这些文件。
• ctrl+鼠标左键 点进"vite/client"，发现那些ts不认识的文件类型在这已经写好了。
  

一些问题的解决方法：

1. 问题一：
   问题：这里为什么会飘红？
   
   原因：在目录里找找看，没有找到node_modules，也就是没有依赖。
   解决：ctrl+`打开终端，输入 npm i，安装所有需要的依赖。这时候再重新打开工程文件，发现错误就没有了。而且文件夹里也有了node_modules。

2. 问题二：

• 如果出现以下错误：

		PS D:\work\VUE\hello_vue3> npm inpm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置 行:1 字符: 1+ npm i+ ~~~+ CategoryInfo          : SecurityError: (:) []，PSSecurityException+ FullyQualifiedErrorId : UnauthorizedAccess

• 在终端输入Set-ExecutionPolicy -Scope CurrentUser后在输入RemoteSigned。终端输入get-ExecutionPolicy查看一下权限，显示RemoteSigned就可以了。

5.index.html

• 入口文件
• 想要运行工程文件，在终端输入npm run dev即可。很快就运行好了：
  
  浏览器访问Local上的http://localhost:5173/（直接点击也可以），发现就是index.html的内容。
  

6.package.json、package-lock.json

• 包的依赖声明文件
  

7. tsconfig.app.json、tsconfig.node.json

• ts的配置文件
  

其它篇章：
一：【Vue3】01-创建Vue3工程