// 更改 pnpm 源
// pnpm config set registry https://registry.npmmirror.com/
pnpm create vite
后续的交互流程梳理如下:
- 输入项目名称；
- 选择前端框架；
- 选择开发语言。
首先是输入项目名称，这里你可以输入vite-project，然后按下回车，进入选择前端框架的部分:
✔ Project name: vite-project
? Select a framework: › - Use arrow-keys. Return to submit.
vanilla // 无前端框架
vue // 基于 Vue
react // 基于 React
preact // 基于 Preact（一款精简版的类 React 框架）
lit // 基于 lit（一款 Web Components 框架）
svelte // 基于 Svelte
文件结构
|-- vite-learn
|-- .gitignore
|-- README.md
|-- index.html
|-- package.json
|-- pnpm-lock.yaml
|-- tsconfig.json
|-- tsconfig.node.json
|-- vite.config.ts
|-- yarn.lock
|-- .vscode
| |-- extensions.json
|-- public
| |-- vite.svg
|-- src
|-- App.vue
|-- main.ts
|-- style.css
|-- vite-env.d.ts
|-- assets
| |-- vue.svg
|-- components
|-- HelloWorld.vue
在项目根目录中有一个index.html文件，这个文件十分关键，因为 Vite 默认会把项目根目录下的index.html作为入口文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
声明了type="module"的 script 标签:
<script type="module" src="/src/main.ts"></script>
由于现代浏览器原生支持了 ES 模块规范，因此原生的 ES 语法也可以直接放到浏览器中执行，只需要在 script 标签中声明 type="module" 即可。比如上面的 script 标签就声明了 type="module"，同时 src 指向了/src/main.ts文件，此时相当于请求了http://localhost:3000/src/main.ts这个资源，Vite 的 Dev Server 此时会接受到这个请求，然后读取对应的文件内容，进行一定的中间处理，最后将处理的结果返回给浏览器。
我们可以来看看 App.vue 的内容:
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
浏览器并不识别 tsx 语法，上面这段代码究竟是如何被浏览器正常执行的呢？
Vite Dev Server 所做的“中间处理”了，也就是说，在读取到 main.tsx文件的内容之后，Vite 会对文件的内容进行编译，大家可以从 Chrome 的网络调试面板看到编译后的结果
在 Vite 项目中，一个import 语句即代表一个 HTTP 请求。
生产环境构建
有人说Vite因为其不打包的特性而不能上生产环境，其实这种观点是相当有误的。在开发阶段 Vite 通过 Dev Server 实现了不打包的特性，而在生产环境中，Vite 依然会基于 Rollup 进行打包，并采取一系列的打包优化手段。
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
// 生产环境打包完预览产物
"preview": "vite preview"
},
