一、项目初始化
1、使用 npm 初始化项目（也可以使用 yarn 或 pnpm）;
npm create vite@latest
根据提示，输入项目名称，选择要用的框架、语言等。
也可以通过附件命令直接指定项目名称和要使用的模板：
npm create vite@latest f-test-vite -- --template vue-ts
2、安装依赖
npm install
3、运行项目
npm run dev
二、移动端适配
1、更改index.html中的 meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
2、使用 postcss-px-to-viewport-8-plugin做像素转换
（1）安装 postcss-px-to-viewport-8-plugin
npm install postcss-px-to-viewport-8-plugin -Doryarn add postcss-px-to-viewport-8-plugin -D
（2）vite.config.ts中配置
三、添加UI库，这里使用vant
1、安装vant
npm install vant
2、配置自动注册组件及自动引入对应的组件样式
unplugin-vue-components 解析模板并自动注册对应的组件；
@vant/auto-import-resolver 自动引入对应的组件样式。
npm i @vant/auto-import-resolver unplugin-vue-components -D
3、vite.config.ts中进行配置
4、处理函数组件的样式
Toast、Dialog、Notify、ImagePreview这4个组件是以函数的形式提供的，unpluging-vue-components无法自动注册组件，所以@vant/auto-import-resolver 也无法自动导入对应的样式。
解决方法：
在需要使用的地方通过import单独导入（如 import { showToast } from 'vant';）；
在main.ts文件中统一引入上面这几个函数组件的样式：
import 'vant/es/toast/style'
import 'vant/es/dialog/style'
import 'vant/es/notify/style'
import 'vant/es/image-preview/style'
5、处理移动端适配兼容性
由于vant使用的设计稿尺寸是375，我们平时用的设计稿尺寸是750，所以要对 postcsspxtoviewport8plugin插件中的viewportWidth做兼容vant处理。
四、项目配置 scss
1、安装 scss
npm i sass -D
2、vite.config.ts中配置 scss全局变量
五、创建公共样式模块
1、src目录下新建 styles 文件夹，里面放公共的样式文件
reset.scss 重置浏览器给html标签添加的默认样式；
variables.scss中放公共的scss变量，如主题色等；
mixins文件夹下可以放一些scss混合，如定义 ellipsis.scss 、hairline.scss等；
common.scss 中 @import 上面这里文件，并定义全局的常用样式。
2、main.ts中导入全局公共样式文件
import './styles/common.scss'
六、配置路由
1、安装 vue-router
npm install vue-router@4
2、src目录下新建 router文件夹
src/router/index.ts
3、main.ts中引入路由配置文件
import router from './router'
app.use(router)
七、配置状态管理模块 pinia
1、安装pinia
npm install pinia
2、main.ts 中引入pinia
import { createPinia } from 'pinia'
app.use(createPinia())
3、创建store文件
（1）src根目录下新建 stores文件夹，stores下新建对应模块的状态文件。
如: src/stores/auth.ts
（2）项目中使用
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
authStore.setToken(token)
八、打包相关配置
1、配置自定义环境变量及打包命令，区分生产、测试、开发等
（1）项目根目录下新建 .env.xxx文件，文件中存放不同环境的环境变量。
如：.env.development 、.env.production 、 .env.test文件等。
注意：只有以 VITE_ 为前缀的变量才会暴露给经过vite处理后的代码。
例如.env.test文件内容如下：
VITE_APP_ENV = 'test'
（2）package.json中配置自定义的打包命令
命令中通过 --mode xxx 指定对应的 .env.xxx文件。
（3）项目中使用自定义的环境变量
vite.config.ts文件中通过 loadEnv 来访问自定义的环境变量。
loadEnv(mode, process.cwd()).xxx
其他文件中通过 import.meta.env.xxx 访问自定义的环境变量。
2、配置打包输出文件目录及文件名称
3、配置路径别名
4、配置打包移除 console 、debugger等信息
5、配置本地开发环境IP访问及服务端口
6、处理浏览器兼容性
（1）处理JS代码的兼容性
- 安装插件
npm install @vitejs/plugin-legacy -D
- vite.config.ts 中配置
- package.json 中统一配置要兼容的浏览器版本列表
（2）处理CSS样式的兼容性
- 安装插件
npm install autoprefixer -D
- vite.config.ts中配置
注意：要兼容的浏览器列表统一从 package.json 中的 browserslist 中读取。
7、开启gzip压缩
（1）安装插件
npm install vite-plugin-compression -D
（2）vite.config.ts中配置
8、配置打包分析
（1）安装插件
npm install --save-dev rollup-plugin-visualizer
（2）vite.config.ts中配置插件
执行npm run build命令后，会在项目根目录下生成一个stats.html文件，打开这个文件可以看到打包后的各个文件或模块的大小情况。
九、数据mock
1、安装相关插件
npm install mockjs vite-plugin-mock -D
2、vite.config.ts中配置
3、创建mock接口文件
（1）src目录下新建mock文件夹，里面分模块放接口文件；
如登录模块相关接口：
（2）src/mock/index.ts中汇总并导出所有接口；
4、main.ts中引入mock/index.ts文件
5、配置mock打包命令
（1）配置 .env.mock文件
VITE_APP_ENV = 'mock'
（2）package.json文件中配置mock打包命令
"scripts": {
"mock": "vite --mode mock"
}
（3）连接mock数据开发
npm run mock
