前端开发构建工具：Vite - 支持模板 vue、vue-ts
Vs code 安装Vue3配套语法支持、TS支持：Volar - 需要禁用vue2对应的vetur，推荐使用Less
一、搭建Vite项目
- 创建项目，运行
npm init vite@latest命令，按照提示操作即可！
（1）若想构建一个 Vite + Vue 项目，运行 npm init vite@latest my-vue-app --template vue
（1）若想构建一个 Vite + Vue + Typescript 项目，运行 npm init vite@latest my-vue-app --template vue-ts
更多框架-基础模板：create-vite、社区模板：awesome-vite
- 运行项目
npm install
npm run dev
二、功能
ESM格式：
es — 将 bundle 保存为 ES 模块文件。在现代浏览器中用<script type=module>标签引入（别名：ems, module）。
模块热重载
Vite 提供了一套原生 ESM 的 HMR APITypeScript
（1）Vite 仅执行 .ts 文件的转译工作，并不执行任何类型检查。
在构建脚本中运行 tsc --noEmit 或者安装 vue-tsc 然后运行 vue-tsc --noEmit 来对你的 *.vue 文件做类型检查
（2）TS 编译器选项
tsconfig.json 中 compilerOptions 下的一些配置项需要特别注意。第一优先级支持插件
（1）Vue 3 单文件组件支持：@vitejs/plugin-vue
（2）Vue 3 JSX 支持：@vitejs/plugin-vue-jsx - 提供Vue3特性支持，包括 HMR，全局组件解析，指令和插槽。CSS
（1）@import 内联和变基
Vite 通过 postcss-import 预配置支持了 CSS @import 内联，路径别名也遵从 CSS @import。
（2）CSS Modules
以.module.css为后缀名的CSS文件被认为是一个CSS modules文件。
导入这样的文件会返回一个相应的模块对象：
import classes from './example.module.css'
document.getElementById('foo').className = classes.red
三、使用插件
- 插件配置
（1）要使用一个插件，需要将它添加到项目的devDependencies，并在 vite.config.js 配置文件中的 plugins 数组中引入它。
// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not IE 11']
})
]
})
（2）plugins 也可以接受将多个插件作为单个元素的预设。这对于使用多个插件实现的复杂特性（如框架集成）很有用。
// 1）框架插件
import frameworkRefresh from 'vite-plugin-framework-refresh'
import frameworkDevtools from 'vite-plugin-framework-devtools'
export default function framework(config) {
return [frameworkRefresh(config), frameworkDevTools(config)]
}
// 2）vite.config.js
import { defineConfig } from 'vite'
import framework from 'vite-plugin-framework'
export default defineConfig({
plugins: [framework()]
})
按需应用
默认情况下插件在开发 (serve) 和生产 (build) 模式中都会调用。
如果插件在服务/构建期间按需使用，使用 apply 属性指明它们仅在 'build' 或 'serve' 模式时调用：
export default defineConfig({
plugins: [
{
...typescript2(),
apply: 'build'
}
]
})
四、构建生产版本
公共基础路径
（1）当访问过程中需要使用动态连接的 url 时，可以使用全局注入的 import.meta.env.BASE_URL 变量，它的值为公共基础路径。自定义构建
可以通过多种 构建配置选项 来自定义构建。
五、环境变量和模式
- Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。
import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (与 import.meta.env.PROD相反)
- 从环境目录中的下列文件加载额外的环境变量：
.env # 所有情况下都会加载
.env.local # 所有情况下都会加载，但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载，但会被 git 忽略
环境变量也会通过 import.meta.env 暴露给客户端源码。
为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。
- TypeScript 的智能提示
想要在代码中获取以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示。
在 src 目录下创建一个 env.d.ts 文件，增加 ImportMetaEnv 的定义：
interface ImportMetaEnv {
readonly VITE_APP_TITLE: string
// 更多环境变量...
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
- 模式
当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量。
一个典型的例子是，你可能希望有一个 “staging” (预发布|预上线) 模式，具有开发的环境变量，生产的行为。
(1)通过传递 --mode 选项标志来覆盖命令使用的默认模式。
vite build --mode staging # 为staging 模式构建应用
(2)还需要一个 .env.staging 文件：
# .env.staging
NODE_ENV=production
VITE_APP_TITLE=My App (staging)
现在，staging 应用具有类似于生产的行为，但显示的标题与生产环境不同。
