前端项目搭建集锦：vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展，开箱即用，附带项目搭建教程

前端项目搭建集锦：vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展，开箱即用，附带项目搭建教程

• 前言：
• 一、Vue项目下载快速通道
• 二、React项目下载快速通道
• 三、BrowserPlugins项目下载快速通道
• 四、项目搭建教程
• 五、prettier蹩脚配置printWidth
• 六、如何修改下载后项目的Prettier
• 七、webstrom配置eslint、prettierrcttier

前言：

之前发布了多个前端项目搭建教程，并提供了项目模板的下载通道。为了方便开发者随时获取和使用，本文将集中提供下载链接和教程链接的入口。需要注意的是，由于依赖包的不断更新，之前上传的项目模板可能会出现一些兼容性问题。建议开发者在使用时注意检查依赖版本，或直接下载最新维护的项目模板，有时可能忘记维护依赖包，下载后如遇到启动报错，可在评论区下方评论，会及时更新，后续还会搭建一些服务端项目。

前端项目搭建模板，包含Vue移动端、Vue PC端、React移动端、React PC端以及浏览器扩展开发项目。所有项目均集成ESLint和Prettier代码规范校验，移动端支持自适应布局，并内置国际化配置及Store状态管理器配置。项目采用Ant Design和Vant UI框架，因其对动态主题配置友好，开发者也可根据需求自行更换其他UI框架。项目模板会定期更新依赖包版本，确保与最新依赖包兼容。下载后请仔细阅读README.md文档，项目已解决常见配置问题，开箱即用。

一、Vue项目下载快速通道

手机访问：https://pan.quark.cn/s/fe38ba821a2a，保存网盘下载即可

1.vue3移动端项目搭建，vue3+vant+vite+axios+pinia+sass：vite+vue+vant

2.vue3移动端项目构建TS，vue3+vant+vite+axios+pinia+sass+typescript：vite+vue+ts+vant

3.vue3 PC端项目构建，vue3+antd+vite+pinia+axios+sass：vite+vue+antd

4.vue3 PC端项目构建TS，vue3+antd+vite+axios+pinia+sass+typescript：vite+vue+ts+antd

二、React项目下载快速通道

手机访问：https://pan.quark.cn/s/fe38ba821a2a，保存网盘下载即可

1.react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts：vite+react+ts+antd

2.react PC端项目构建，react@18.2.0+antd+vite+axios+redux+sass：vite+react+antd

3.react移动端项目构建TS，react@18.2.0+react-vant+vite+axios+redux+sass+ts：vite+react+ts+vant

4.react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass：vite+react+vant

三、BrowserPlugins项目下载快速通道

手机访问：https://pan.quark.cn/s/fe38ba821a2a，保存网盘下载即可：wxt+vue

四、项目搭建教程

1.vue3移动端项目搭建，vue3+vant+vite+axios+pinia+sass

2.vue3移动端项目构建TS，vue3+vant+vite+axios+pinia+sass+typescript

3.vue3 PC端项目构建，vue3+antd+vite+pinia+axios+sass

4.vue3 PC端项目构建TS，vue3+antd+vite+axios+pinia+sass+typescript

5.react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts

6.react PC端项目构建，react@18.2.0+antd+vite+axios+redux+sass

7.react移动端项目构建TS，react@18.2.0+react-vant+vite+axios+redux+sass+ts

8.react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass

五、prettier蹩脚配置printWidth

Prettier 的 printWidth 配置存在局限性，且不能禁用，printWidth会与 ESLint 的缩进、换行规则配置冲突，如：vue/max-attributes-per-line、vue/first-attribute-linebreak。这种冲突主要体现在 HTML 属性的格式化上：当属性过多时，开发者只能选择两种不太理想的格式化方式------要么让属性超过 printWidth 自动换行，要么让每个属性独立换行。这两种方式都不够灵活，且可能不符合团队的代码风格偏好。相比之下，直接在 ESLint 中配置格式化规则可以避免 printWidth 的限制，从而更灵活地控制代码的缩进和换行。ESLint 的规则配置更加细致，能够在不影响其他规则的前提下，实现与 Prettier 类似的功能。不过，Prettier 的优势在于它能够直接修改开发者工具的默认格式化行为，这对于使用多种开发工具的团队来说，是一个统一代码风格的有效方案。因此，选择 ESLint 还是 Prettier，更多取决于团队的具体需求和开发环境，下面来详细说明Prettier、ESLint规则配置的区别

1.eslint.config.js、.prettierrc配置如下，eslint.config.js配置了vue模板第一个属性之前不换行、模板中每行的最大属性数量是3，.prettierrc配置了每行最大宽度为500、单个属性放在一行、结束标签与内容保持在一行

2.vue模板效果，可以看到下图的效果，代码格式化后会报错vue/max-attributes-per-line，这是因为printWidth限制了每行的宽度，在这个宽度之内代码不会换行，而vue/max-attributes-per-line规则是每行属性最多三个，这与printWidth产生冲突

3.显然上面的printWidth数值过大，当有很多属性，或者属性值过长后，格式化后代码并不容易阅读，接下来把printWidth设置为40，再格式化代码，可以看到每个属性都是单独占一行，但是报vue/first-attribute-linebreak错误，这是由于vue/first-attribute-linebreak限制第一个属性不换行，所以报错，而且当属性过多时每个属性占一行显然看起来并不太好，不过比起不换行看起来友好很多

4.接下来不配置Prettier，使用eslint规则配置，可以看到下图中的规则可以实现与prettier相同的效果，然后再格式化代码，显然要比之前的两种格式化友好很多，换行是属性会自动对齐

六、如何修改下载后项目的Prettier

由于printWidth不能禁用，就算不设置数值，也会有默认值80；所以项目中目前默认采用的是eslint格式化，但是也集成了Prettier，如果需要Prettier格式化可按照下面方式修改

1.根目录下新建.prettierrc文件，把根目录下的.prettierrc.js代码转成JSON，复制到.prettierrc，webstrom默认自动识别.prettierrc配置文件

2.修改eslint.config.js，配置Prettier规则，注释掉与Prettier冲突的规则即可

3.如果不使用prettier，webstrom需要修改下vue的缩进方式，webstrom默认缩进是2，但是eslint配置的是4，最好不要修改eslint中得缩进，因为webstrom中得js、html默认缩进都是4，可通过settings>code style>vue template修改

七、webstrom配置eslint、prettierrcttier

1.prettier插件，打开设置找到Plugins选项，搜索prettier安装即可。eslint已经内置在webstrom，不用安装插件

2.设置界面搜索prettier，勾选自动识别配置文件，会自动识别根目录下的.prettierrc。勾选保存文件时运行prettier，在文件保存时会自动格式化成prettier配置的规则

3.设置界面搜索eslint，勾选自动识别配置文件，会自动识别根目录下的eslint.config.js文件。勾选保存文件时运行eslint，在文件保存时会自动修复不符合eslint规则的代码