携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
一、vite项目创建
- 初始化项目，指令：
npm: 执行指令npm init vite@latest
yarn: 执行指令yarn create vite
- 输入项目名称，如vite-app；框架选vue、vue-ts
- 打开项目，安装依赖;
npm install
4.启动项目
npm run dev
使用过vue-cli的同学可以发现，vite启动项目比webpack启动项目要快很多
二、目录简介
Vite目录
- public 下面的不会被编译 可以存放静态资源
- assets 下面可以存放可编译的静态资源
- components 下面用来存放我们的组件
- App.vue 是全局组件
- main ts 全局的ts文件
- index.html 非常重要的入口文件 （webpack，rollup 他们的入口文件都是enrty input 是一个js文件 而Vite 的入口文件是一个html文件，他刚开始不会编译这些js文件 只有当你用到的时候 如script src="xxxxx.js" 会发起一个请求被vite拦截这时候才会解析js文件）
- vite.config.ts 这是vite的配置文件具体配置项 后面会详解
VsCode Vue3 插件推荐 Vue Language Features (Volar)
安装完成后右上角会出现两个小图标，一个是可以将template、script、style分屏；另外一个是可以在编辑器预览效果。自己动手试一试就知道了
三、了解npm run dev
当执行npm run dev后npm会去package.json里边的scripts字段里找dev这个命令，实际上就是执行了vite指令。
执行原理：
使用npm run script执行脚本的时候都会创建一个shell，然后在shell中执行指定的脚本。
这个shell会将当前项目的可执行依赖目录（即node_modules.bin）添加到环境变量path中，当执行之后之后再恢复原样。就是说脚本命令中的依赖名会直接找到node_modules/.bin下面的对应脚本，而不需要加上路径。
查找规则：
1.先从当前项目的node_modlue /bin去找,
2.找不到去全局的node_module/bin 去找
3.再找不到 去环境变量去找
