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

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

前言:

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

前端项目搭建模板,包含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规则的代码

相关推荐
伍哥的传说8 分钟前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang45314 分钟前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself24329 分钟前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
苹果醋330 分钟前
iview中实现点击表格单元格完成编辑和查看(span和input切换)
运维·vue.js·spring boot·nginx·课程设计
武昌库里写JAVA33 分钟前
iView Table组件二次封装
vue.js·spring boot·毕业设计·layui·课程设计
三口吃掉你34 分钟前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself24336 分钟前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
烛阴40 分钟前
Tile Pattern
前端·webgl
前端工作日常1 小时前
前端基建的幸存者偏差
前端·vue.js·前端框架
Electrolux1 小时前
你敢信,不会点算法没准你赛尔号都玩不明白
前端·后端·算法