前言：

之前發布了多個前端項目搭建教程，并提供了項目模板的下載通道。為了方便開發者隨時獲取和使用，本文將集中提供下載鏈接和教程鏈接的入口。需要注意的是，由于依賴包的不斷更新，之前上傳的項目模板可能會出現一些兼容性問題。建議開發者在使用時注意檢查依賴版本，或直接下載最新維護的項目模板，有時可能忘記維護依賴包，下載后如遇到啟動報錯，可在評論區下方評論，會及時更新，后續還會搭建一些服務端項目。

前端項目搭建模板，包含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規則的代碼