大家好,我是农村程序员,独立开发者,行业观察员,前端之虎陈随易。
- 关注公众号:
陈随易
,获取最新文章推送 (很多内容只在公众号发布
) - 个人网站 1️⃣:https://chensuiyi.me
- 个人网站 2️⃣:https://me.yicode.tech
- 加入交流群,公众号或者个人网站联系我即可
我会在这里分享关于 编程技术
、独立开发
、行业资讯
,思考感悟
等内容。
所有文章都是古法手打,经过了深度思考和总结,不含 AI 添加剂,请放心食用,一起灵魂交流。
如果本文能给你提供启发或帮助,欢迎动动小手指,一键三连 (点赞
、评论
、转发
),给我一些支持和鼓励,谢谢。
这是 开发风格系列
的第三篇文章,分别从 项目管理
、代码风格
和 构建打包
三个方面,分享我在使用 Vue3 做项目时 大道至简
的经验心得。
前两篇文章链接如下:
在上一篇文章结尾,提到了我用来编译和打包 Vue3 项目的并不是 vite
,而是自己写的一个基于 vite
进一步封装的 yite-cli
。
那么本文就详细分享一下,yite-cli
到底有什么样的魔力,让我对 vite
弃而远之。
其实不管是 vite
还是 vue3
,它们都是为世界上的大多数人,大多数项目而诞生的,这会导致一个共同特点:灵活性
。
如果你不够灵活,那么你就无法适应那么多的人,那么多的项目。
所以,在 vue3
的使用上,我的前一篇文章已经详细分享了我在使用 vue3
过程中的写法,可以说是从中定制了一个专属于自己风格的写法,这样就能做到写项目的时候快狠准。
那么 vite
也是如此,为了满足大多数人的习惯和不同的项目要求,它提供了很多配置,比如可以自由选择 sass
、less
、stylus
、postcss
、lightningcss
,也可以定制环境变量目录,前缀等等。
那么我要做的还是一样的,从中抽取部分配置,形成一个固定的模式,来减少灵活性,进一步提供方便和稳定。
怎么个提供法呢?比如 css
配置,我只允许使用 scss
,其他的都不允许。提供固定的目录自动导入,自动处理路由样式等。
那么下面我就举例详细分析一下,yite-cli
的理念和用法。
减少必要依赖
其他项目的依赖:
我的项目的依赖:
可以看到,没有 vue
、vue-router
、pinia
、sass
、vue-i18n
,但是项目也能跑,也能正常运行,也能照样编译。
为什么呢?
因为我把这几个包作为 yite-cli
内部依赖并进行了配置,只要使用了 yite-cli
,项目就会自动查找。
这样呢,每个项目都不用手动安装和维护以上依赖了,相当于项目可以少装几个依赖,这样我们的项目依赖看起来是不是更清爽呢。
自动路由
其他项目的路由:
我的项目的路由:
就是这么简单,yite-cli
会根据 pages
目录下的结构,自动生成路由配置,不用手动管理和维护。
而这就是通过 yite-cli
内部的 router
插件实现的。
自动国际化配置
yite-cli
配置国际化非常简单。
也是在 yite-cli
内部提供了一个 i18n
插件来让配置变得更加简单。
自动导入插件
在 main.js
入口文件中,并没有导入目录 plugins
中的文件,任何地方也没有导入,却可以直接使用该目录下的方法。
这是因为,在 yite-cli
内部,已经对图中标记的目录全部进行了自动导入,包括 vue
、vue-router
、pinia
的自动导入配置。
自动导入组件
同样的,对全局组件也设置了默认导入。
如果要对组件也自动导入怎么办呢?
yite-cli
提供了一个 yite.config.js
文件,可以在里面配置组件的自动导入配置。
如果使用原始的 vite
,那么项目中 unplugin-auto-import
和 unplugin-vue-components
两个依赖肯定要安装的,使用了 yite-cli
后,又能减少安装 2 个依赖了。
2 万多个图标随便用
在图标网站 yesicon.app
找到你需要的图标,直接粘贴到 vue
文件中,直接就能有效果。
这是因为,图标库也在 yite-cli
中配置好了,2 万多个图标,任性用,不用再做任何配置。
其他功能
那么像 unocss
。
调试面板
。
产物可视化
等等,也都内置在 yite-cli
中了。
尾言
那么这就是我 管理项目
、代码风格
、构建打包
的方法和理念了,感兴趣的可以把这 3 篇文章都看一下。
本文并没有将 yite-cli
的全部功能详细分享,也不想大力推广被更多人使用,因为时间有限,精力有限,还有更重要事情需要我去做。
所以,如果你也希望使用 yite-cli
的话,欢迎访问我的网站 https://chensuiyi.me
加我微信交流。