一、项目初始化
1. 安装 Node.js
Vite 是基于 Node.js 构建的开发工具，所以首先需要确保已经安装了合适版本的 Node.js（建议使用较新版本，比如 LTS 版本）。可以通过在命令行输入 node -v 来查看已安装的版本信息。
2. 创建项目目录
使用命令行创建一个新的项目文件夹，例如：
mkdir my-vite-project
cd my-vite-project
3. 初始化项目
在项目目录下，运行以下命令初始化一个 package.json 文件，它用于管理项目的依赖和脚本等信息：
npm init -y
或者使用 yarn 进行初始化：
yarn init -y
4. 安装 Vite
根据项目需求选择对应的 Vite 模板来安装，以创建一个 Vue 3 项目为例，使用以下命令（这里以 npm 为例，yarn 类似）：
npm install vite @vue/compiler-sfc -g
npm init vite@latest
按照命令行提示输入项目名称、选择框架（如 Vue、React 等）以及其他相关配置，完成后进入项目目录并安装依赖：
cd <your-project-name>
npm install
5. 启动开发服务器
在项目目录下执行以下命令启动 Vite 开发服务器：
npm run dev
此时，打开浏览器访问命令行中提示的本地开发地址（通常是 http://localhost:3000 等），就能看到初始化后的项目页面了。
二、使用 Sass/Scss & CSS Modules
1. 安装相关依赖
如果要在 Vite 项目中使用 Sass/Scss，需要先安装对应的依赖。以 npm 为例：
npm install sass -D
这里 -D 表示将依赖安装为开发依赖，因为在生产环境中，样式通常会经过编译等处理。
2. 导入样式文件
在 Vue 或 React 组件中，可以像下面这样导入 Scss 文件。以 Vue 组件为例：
<template>
<div class="container">
<!-- 组件内容 -->
</div>
</template>
<script>
export default {
// 组件逻辑
};
</script>
<style lang="scss" scoped>
// 这里使用 scoped 可以让样式只作用于当前组件
.container {
background-color: #f0f0f0;
padding: 20px;
}
</style>
3. CSS Modules
Vite 对 CSS Modules 也有很好的支持。在组件中使用 CSS Modules 时，样式文件的命名一般采用 .module.scss 格式。例如：
<template>
<div :class="$style.container">
<!-- 组件内容 -->
</div>
</template>
<script>
import styles from './styles.module.scss';
export default {
setup() {
return {
$style: styles,
};
},
};
</script>
<style lang="scss" module>
// 定义 CSS Modules 样式
.container {
border: 1px solid #ccc;
margin: 10px;
}
</style>
这样，生成的类名会被编译成唯一的哈希值，避免样式冲突，而且方便在组件间复用样式的同时保证独立性。
三、使用静态资源
1. 图片资源
在 Vite 项目中使用图片资源很简单。比如在 Vue 组件中要展示一张图片，可以这样做：
<template>
<img src="@/assets/logo.png" alt="项目 logo" />
</template>
这里 @ 通常是 Vite 配置好的别名，指向项目的 src 目录（具体可根据项目配置调整）。Vite 在处理图片资源时，会根据配置进行优化，如在生产环境压缩图片等。
2. 其他静态资源（如字体文件等）
对于字体文件，将其放置在合适的 assets 目录下（例如 src/assets/fonts），然后在样式文件中按照常规方式引入，比如：
@font-face {
font-family: 'MyFont';
src: url('@/assets/fonts/myfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyFont', sans-serif;
}
Vite 会正确处理这些静态资源的引用，确保在不同环境下都能正常加载和显示。
四、生产环境 Tree Shaking
1. 原理概述
Tree Shaking （摇树优化）是一种在打包过程中剔除未使用代码的技术。在 Vite 中，它基于 ES6 模块的静态分析特性来实现。因为 ES6 模块在编译时就能确定模块的依赖关系和导出、导入情况，所以 Vite 可以准确判断哪些代码是没有被项目实际使用的，进而在生产环境打包时将这些冗余代码去除，减小最终生成的包体积，提高页面加载速度。
2. 代码层面体现
例如，有一个工具函数文件 utils.js，内容如下：
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
在项目的其他文件中，如果只使用了 add 函数，像这样导入：
import { add } from './utils.js';
console.log(add(3, 5));
那么在生产环境打包时，Vite 通过 Tree Shaking 就会把 subtract 函数相关的代码从最终的包中剔除掉，因为它没有被项目实际调用。
3. 配置与优化
Vite 本身默认就支持 Tree Shaking，一般不需要额外配置就能发挥作用。不过，可以通过一些配置来进一步优化，比如确保项目中的模块都是 ES6 模块形式导入导出（避免使用 CommonJS 等可能影响静态分析的方式），并且对于一些第三方库，如果有提供 ES6 模块版本，优先使用该版本，这样能让 Tree Shaking 更充分地发挥作用，最大程度减小包体积，提升项目性能。
