Vue3-02 脚手架创建项目及文件解释作用

文章目录

• 解释
• [windows 创建项目](#windows 创建项目)
• • .vscode
  • public
  • src
  • .gitignore
  • env.d.ts
  • index.html
  • package.json
  • README.md
  • [tsconfig ...](#tsconfig ...)
  • vite.config.ts
• [Linux 创建项目](#Linux 创建项目)

解释

Vue cli 脚手架是基于webpack 快速创建的，是vue2的创建项目脚手架命令

webpack 构建过程：是一次性根据路由加载完页面后才是准备完成；

Vue是直接准备后，然后根据访问的路由，需要哪个加载哪个页面；

所以Vue启动速度快。

安装了node.js 才能使用npm命令

windows 创建项目

不能输入中文和特殊字符，最好纯小写的字母和数字加下划线

安装vscode，确定后都是下一步。

用vscode打开的文件目录

.vscode

json 文件记录安裝的插件

public

脚手架的根目录

放页签图标

src

前端所有工作成果（.js .css .vue）,源代码文件

.gitignore

git的忽略文件

env.d.ts

没有node_modules，没有依赖，所以红色波浪线

npm -i 安装所有的依赖，多了一个node_modules文件夹，也不红色警示

这个文件的作用：让ts去认识文件

index.html

入口文件

package.json

package-lock.json

两个包管理文件，依赖声明文件

package-lock.json 这个是安装包以后才生成的

README.md

对工程的简单介绍，可以删掉的

tsconfig ...

tsconfig.app.json

tsconfig.json

tsconfig.node.json

ts的配置文件，三个，不要动，删掉后ts出问题

(使用相同的版本，发现我创建的里面的跟看视频的文件不太一样)

vite.config.ts

整个工程的配置文件：

安装插件；配置代理

启动命令：npm run dev （在package.json文件中查看使用命令）

关闭命令：ctrl + c

执行命令npm i后，多出来两个文件:

package-lock.json

node_modules 文件夹

Linux 创建项目

npm 终于好了，试试linux系统下创建项目

用Vscode打开项目