手摸手从零搭建vite+typescript+vue3项目（上）--eslint+prettier+husky+lint-staged

最新推荐文章于 2024-09-16 06:30:00 发布
最新推荐文章于 2024-09-16 06:30:00 发布
阅读量83 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57469822/article/details/128644985
版权

项目介绍

简介

  1. ==架构一个Vite + typescript + vue3生态链项目==。文档记录了作者搭建此项目架构的全过程，每个阶段的分支都留在了仓库中，可以一步一步跟着此文档的流程进入到相应的分支中查看对应代码，进而自己搭建出一个类似项目的开发环境。

  2. 此项目架构可作为一个通用架构便于开发相同技术栈的项目。

  3. 此项目可用于学习Vite + typescript + vue3生态链的相关技术

包含内容

  • Vite + typescript + vue3生态链 项目架构

  • Vite 分开发环境和生产环境进行配置

  • 新旧浏览器的兼容性处理

  • 配置eslint + stylelint + prettier 去统一代码风格

  • 配置 commitizen + commitlint 去规范代码提交，提交代码时不要执行git commit ，而是执行封装好的命令pnpm commit

  • 对vue-router 、 pinia、 本地mock、axios拦截器、表单验证进行封装

  • 支持自动注册组件和自动引入api

  • 集成icon-park库和animate.css以及gsap

关于类型声明

组件和apis的类型声明写在自身文件内

store里的类型声明单独创建一个types文件

版权声明

项目本身由作者一人开发完成，其中借鉴了许多网络和书籍的资料，如有侵犯您的权益，可联系作者删除相关内容。

项目地址

gitee

本文由 mdnice 多平台发布

百万前端
关注
react18 + vite5 + typeScript + commitLint + prettier + eslint + husky + lintStaged 实现后台管理系统基本框架
小白小白从不日别的博客
06-04 253
npm run eject：项目中的一些配置被隐藏起来了，通过这个命令可以将配置文件反编译到项目中，从而获得配置的权利，这个操作是不可逆的，一旦编译出来就无法编译回去，一般来说不会执行这个命令，我们会通过其他方式去修改配置。：React18 引入了并发模式，Zustand 设计为响应式的状态管理库，可以很好地兼容 React18 的并发特性，确保应用的状态管理在并发模式下仍然稳定和高效。：Zustand 采用了最小的 re-render 策略，只会在状态实际变化时触发组件重新渲染，避免了不必要的性能开销。
从零搭建一个vite+vue3+ts规范基础项目
qq_41559229的博客
05-27 1631
最简单的vite+vue+ts的配置，虽简单但详细！
基于Vue3+Vite+TS+ESLint+Prettier+Husky+lint-staged+commitlint+stylelint的项目构建
qq_44741577的博客
04-19 777
在新版 TypeScript 中，已经不在使用 package.json 根结构中的 types 字段。而是需要在 exprots 中添加 typs 字段。.eslintrc因为是node写的规范，所以遵循commonjs规范，所以是cjs后缀；如果是ESModel规范，则是mjs后缀。git commit 之前就可以 进行暂存区代码的style校验。创建完成后指令：1：进入项目 2：安装依赖 3：运行项目。此时证明ESLint已经配置成功。
vue3 +vite+ts实战项目添加 eslint + prettier + lint-staged 踩坑指南
mrhaoxiaojun的博客
05-12 8346
初始化项目 // 创建一个空的 vue3-ts 项目, yarn create vite my-vue-app --template vue-ts // 安装依赖 cd my-vue-app && yarn // 默认是没有创建git仓库的，这里我们初始化一下 git init 这个模板是没有使用配置eslint和prettier的，接下来我们依次安装这些依赖。 集成eslint 首先我们安装eslint yarn add eslint -D 接下来初始化eslint: npx esl
Vue 3 + Vite + Eslint + prettier + husky + lint-staged 搭建基础项目
梅花寺
06-17 503
代码规范 集成 editorconfig 配置 EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。 VSCode 需要安装一个插件：EditorConfig for VS Code 在根目录下建立 eslint 配置文件： .eslintrc.js 在根目录下建立 prettier 配置文件： .prettierrc.js Husky 和 Lint-staged 配置 Pre-commit 检查 运行上面这条命令后会在packa
Vue3 + TypeScript + Vite 初始项目搭建（ESLint、Prettier、Sass
tencentes的博客
04-17 846
为了使在使用 ESLint 进行代码检查时，遇到使用别名 import 模块时，不报错，使 ESLint 能够支持别名配置，所以在 ESLint 配置文件中 import/resolver 的 alias 选项，配置如何解析 import 语句中的别名，依赖 eslint-import-resolver-alias 和 eslint-plugin-import 插件。
在Vite+Vue3+TypeScript项目中，配置Eslint+Prettier
linhx1999的博客
06-09 1258
最少步骤配置Vite+Vue3+TypeScript中的Eslint+Prettier
基于vue3+vite+typescript+pinia后台管理系统模版源码+详细说明.zip
05-05
采用 vue3 全家桶（vite+pinia+element-plus+vue-router@4）功能介绍 使用 Vue3.2.45 + TypeScript 开发 采用 Vite4.0 作为项目开发、打包工具（配置 Gzip 打包、TSX 语法、跨域代理……） 使用 Prettier 统一格式化...
-webkit-box-reflect属性与倒影效果的实现
读心悦
09-13 409
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 398
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
JS笔记
2201_76100326的博客
09-11 527
Math对象属于Javascript内置对象，无需实例化（不需要添加new ），可以直接使用。只有一个Math.PI的属性。
uniapp中实现＜text＞文本内容点击可复制或拨打电话
最新发布
GoppViper的博客
09-16 323
标签时，会弹出一个操作菜单，用户可以选择复制电话号码或者直接拨打该号码。uni.setClipboardData用于实现复制功能，uni.makePhoneCall用于实现拨打电话功能。在上述代码中，当点击包含电话的。template 部分。
WebGL系列教程六（纹理映射与立方体贴图）
AIGIS的博客
09-12 1261
上一讲我们讲了如何使用索引绘制彩色立方体，还留了一个思考题：怎么让立方体的每个面都保持一个颜色?这一讲我们就来解决这个问题，并引出纹理映射和立方体贴图。其实这个词语还是比较好理解。见名知意，大概意思就是把纹理映射到某个地方，纹理是什么？现在你可以简单的认为纹理就是一张图片。把一张二维的图片映射到一个三维物体的表面，就叫纹理映射。本节我们从如何将立方体每个面的颜色改为相同的颜色开始，介绍到了如何将图片贴到立方体的表面，系统的分析了为什么不能再共用顶点，并将代码进行了修改，以及讲解了纹理坐标的使用。
Vue3中slot插槽的几种使用实践
小小默：进无止境
09-14 546
父组件子组件父组件中Category 组件标签内的东西将会呈现在子组件slot的位置（进行替换）。
前端CSS面试常见题
m0_73761441的博客
09-11 569
前端CSS面试常见题，包含边界塌陷、bfc、csshack、src和href的区别、浏览器内核、兼容性问题、flex和grid优劣对比
vue3 透传 Attributes
咸鱼滚滚
09-15 673
“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。 当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。 最常见的例子就是 class、style 和 id。
深入探讨ES6高级特性与实际应用
weixin_52392194的博客
09-09 1384
可以自定义迭代器以适应特定的需求。例如，创建一个自定义集合类并实现yield item;// 输出 1, 2, 3, 4自定义迭代器增强了数据结构的灵活性，使得可以实现自定义的遍历逻辑。
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 926
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
Vite3+Vue3+TS+Ant-design-vue3全栈实战：快速构建与配置教程
本篇文档详细介绍了如何进行全栈开发实战，主要结合了前端技术Vite3、Vue3、TypeScript (TS) 和 Ant-Design-Vue3，以及后端技术SpringBoot、MybatisPlus和MySQL。以下是关键知识点的总结： 1. **前端技术栈搭建** ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值