现在项目开发接近尾声了，平时没有总结项目的习惯，现在空闲下来总结一下项目的构建过程，本人菜鸡一枚，不喜勿喷。 该项目使用vite3创建的，这里为什么用vite我就不说了哈，反正一个字快！，下面来创建项目，我用的是pnpm管理包。

pnpm create vite pnpm create vite my-vue-app --template vue
create vite 后面跟的是你的项目名字

如果项目需要ts支持和vue-router自行安装依赖，这里说一下vue-router的配置。首先建一个路由表：

然后注册路由，再到main.js导入路由全局引入app.use（router）

接下来说下pinia的配置和使用，这个和vuex的区别还是挺大的，pinia使用起来方便多了。创建store文件夹，创建index文件配置，再创建moudle来定义你的数据，然后还需要到 main.js 里面use一下，需要做个持久化处理，安装 pinia-plugin-persistedstate 插件，在index里配置， 下面直接上图简单明了。

接下来就去页面组件中使用了，直接导入使用，而且是响应式的，不需要dispath和commit

import useDemoStore from '@/store/modules/demo'

import { storeToRefs } from 'pinia'

const demoStore = useDemoStore()

const { status } = storeToRefs(demoStore)

项目eslint的配置

eslint的作用：

• 可强制规范团队编码规范，让新旧组员编码习惯得到一致提升
• 可灵活定制团队编码风格，让预设规则符合新旧组员心理预期
• 增加项目代码的可维护性和可接入性，让新组员能快速适应项目的架构与需求
• 保障项目整体质量，可减少无用代码、重复代码、错误代码和漏洞代码的产生几率

这个东西在公司项目中都是老大配置好的，但是这个项目搭建我自己搭的，所以就随便配置了一下，主要是看代码的规范要求去配置。首先安装eslint，然后会自动生成 .editorconfig 和 .eslintrc.cjs 这两文件，然后在后者的文件去配置规范，可以自行搜索一下相关的配置信息，我这里直接上图

项目配置环境变量

首先在根目录下新建几个env环境文件，分别是开发环境，生产环境和测试环境

然后在每个文件定义以VITE_开头的变量名，每个环境的api地址不一样，配置完后在package.json里面再配置启动环境的一些命令,直接上图：

使用方法就是在终端输入命令，举个例子，你想在测试环境启动该项目，直接pnpm dev：uat

在axios封装的请求接口时配置基本路径

export const http = axios.create({
    baseURL: import.meta.env.VITE_API_URL,
    timeout: 10000,
})

项目的开始搭建过程线简单介绍到这，总的来说一个项目的搭建是要根据项目的需求去配置一些你需要的东西，如果确认你项目的一些功能需求了，其实可以在github上找一些快速开发的模板，很多大佬给你们配置好了，直接拿来用就好了，但是我觉得前端还是需要学会怎么去从0搭建一个项目，这样我们才会不断进步嘿嘿嘿。

下篇文章我再写下项目的一些打包优化和性能优化。