Skip to content

大家好,我是农村程序员,独立开发者,行业观察员,前端之虎陈随易。

  • 关注公众号:陈随易,获取最新文章推送 (很多内容只在公众号发布)
  • 个人网站 1️⃣:https://chensuiyi.me
  • 个人网站 2️⃣:https://me.yicode.tech
  • 加入交流群,公众号或者个人网站联系我即可

我会在这里分享关于 编程技术独立开发行业资讯思考感悟 等内容。

所有文章都是古法手打,经过了深度思考和总结,不含 AI 添加剂,请放心食用,一起灵魂交流。

如果本文能给你提供启发或帮助,欢迎动动小手指,一键三连 (点赞评论转发),给我一些支持和鼓励,谢谢。


这是 开发风格系列 的第三篇文章,分别从 项目管理代码风格构建打包 三个方面,分享我在使用 Vue3 做项目时 大道至简 的经验心得。

前两篇文章链接如下:

在上一篇文章结尾,提到了我用来编译和打包 Vue3 项目的并不是 vite,而是自己写的一个基于 vite 进一步封装的 yite-cli

那么本文就详细分享一下,yite-cli 到底有什么样的魔力,让我对 vite 弃而远之。

其实不管是 vite 还是 vue3,它们都是为世界上的大多数人,大多数项目而诞生的,这会导致一个共同特点:灵活性

如果你不够灵活,那么你就无法适应那么多的人,那么多的项目。

所以,在 vue3 的使用上,我的前一篇文章已经详细分享了我在使用 vue3 过程中的写法,可以说是从中定制了一个专属于自己风格的写法,这样就能做到写项目的时候快狠准。

那么 vite 也是如此,为了满足大多数人的习惯和不同的项目要求,它提供了很多配置,比如可以自由选择 sasslessstyluspostcsslightningcss,也可以定制环境变量目录,前缀等等。

那么我要做的还是一样的,从中抽取部分配置,形成一个固定的模式,来减少灵活性,进一步提供方便和稳定。

怎么个提供法呢?比如 css 配置,我只允许使用 scss,其他的都不允许。提供固定的目录自动导入,自动处理路由样式等。

那么下面我就举例详细分析一下,yite-cli 的理念和用法。

减少必要依赖

其他项目的依赖:

我的项目的依赖:

可以看到,没有 vuevue-routerpiniasassvue-i18n,但是项目也能跑,也能正常运行,也能照样编译。

为什么呢?

因为我把这几个包作为 yite-cli 内部依赖并进行了配置,只要使用了 yite-cli,项目就会自动查找。

这样呢,每个项目都不用手动安装和维护以上依赖了,相当于项目可以少装几个依赖,这样我们的项目依赖看起来是不是更清爽呢。

自动路由

其他项目的路由:

我的项目的路由:

就是这么简单,yite-cli 会根据 pages 目录下的结构,自动生成路由配置,不用手动管理和维护。

而这就是通过 yite-cli 内部的 router 插件实现的。

自动国际化配置

yite-cli 配置国际化非常简单。

也是在 yite-cli 内部提供了一个 i18n 插件来让配置变得更加简单。

自动导入插件

main.js 入口文件中,并没有导入目录 plugins 中的文件,任何地方也没有导入,却可以直接使用该目录下的方法。

这是因为,在 yite-cli 内部,已经对图中标记的目录全部进行了自动导入,包括 vuevue-routerpinia 的自动导入配置。

自动导入组件

同样的,对全局组件也设置了默认导入。

如果要对组件也自动导入怎么办呢?

yite-cli 提供了一个 yite.config.js 文件,可以在里面配置组件的自动导入配置。

如果使用原始的 vite,那么项目中 unplugin-auto-importunplugin-vue-components 两个依赖肯定要安装的,使用了 yite-cli 后,又能减少安装 2 个依赖了。

2 万多个图标随便用

在图标网站 yesicon.app 找到你需要的图标,直接粘贴到 vue 文件中,直接就能有效果。

这是因为,图标库也在 yite-cli 中配置好了,2 万多个图标,任性用,不用再做任何配置。

其他功能

那么像 unocss

调试面板

产物可视化 等等,也都内置在 yite-cli 中了。

尾言

那么这就是我 管理项目代码风格构建打包 的方法和理念了,感兴趣的可以把这 3 篇文章都看一下。

本文并没有将 yite-cli 的全部功能详细分享,也不想大力推广被更多人使用,因为时间有限,精力有限,还有更重要事情需要我去做。

所以,如果你也希望使用 yite-cli 的话,欢迎访问我的网站 https://chensuiyi.me 加我微信交流。

何以解忧,唯有代码。不忘初心,方得始终。