环境搭建
使用下面命令查询是否安装node，没有查询都版本，请去安装node 附官网地址：nodejs.cn/
node -v
项目初始化
基于上面步骤打开终端命令行，输入如下命令：
npm create vite
输入命令后会出现如下几种情况：
- 提示是否需要安装以下软件包输入Y即可
- 输入项目名称
- 选择所需框架（我这边选择的是vue）
- 选择框架的变体（例如：vue， vue+ts）
至此脚手架模板已经生成，你可以执行下面命令：
// 进入项目目录
cd vite-project
// 安装依赖 npm install (npm下载包会很慢，npm的源可以切换至国内的镜像源)
// 启动项目 npm run dev
执行npm run dev可以看到如下：
项目加载运行
项目的目录结构如下:
├── .gitignore
├── index.html
├── package.json
├── README.md
├── public
| ├── favicon.ico
├── src
| ├── assets
| | ├── logo.png
| ├── components
| | ├── HelloWorld.vue
| └── App.vue
└── vite.config.js
在index.html这个文件中可以看到这样一行代码：
<script type="module" src="/src/main.js"></script>
由于现代浏览器原生支持了 ES 模块规范，因此原生的 ES 语法也可以直接放到浏览器中执行，只需要在 script 标签中声明 type="module" 即可。比如上面的 script 标签就声明了 type="module"，同时 src 指向了/src/main.js文件，此时相当于请求了http://localhost:3000/src/main.js这个资源,vite的 Dev Server收到这个请求就加载对应的内容，中间 Dev Server会进行一次中间处理编译，如下：
在viet项目中，每个import就代表了一个http请求，Vite 所倡导的no-bundle理念的真正含义: 利用浏览器原生 ES 模块的支持，实现开发阶段的 Dev Server，进行模块的按需加载，而不是先整体打包再进行加载。相比 Webpack 这种必须打包再加载的传统构建模式，Vite 在开发阶段省略了繁琐且耗时的打包过程，这也是它为什么快的一个重要原因。
