开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第5天,点击查看活动详情。
前言
如果你是项目的总负责人,如何去考虑创建一个新的项目?有哪些点需要考虑到?
最近两年接手的项目都是已经成型的项目,有些项目设计的非常巧妙,上手很容易;有些项目则设计的很不合理,结构混乱,让人摸不着头脑。
你见过这样的项目吗?
- 基于 webpack 多入口打包的 vue 项目,并将打包结果放在 node 环境中,进行 服务端渲染。
- 在 vue 项目中 大范围使用 jQuery 并且经常性的 在 window 对象上挂载一些 看不懂的 方法和变量。
- 文件结构混乱,js文件和css文件放在一起,几个耦合度很高的js文件放在很远的地方。
- 文件名、class名、js变量混乱,甚至大批量的使用
拼音+缩写去命名一个函数。 - 配置了 eslint,但是换了一台电脑,各种报错导致编译不通过。
- ...
这篇文章就是我梳理自己的思路,如果我作为项目的负责人,如何去设计一个项目,让它 健康 的走下去。
以一个 vue3+ts 的案例为模板去考虑这个项目吧!
思路
一、创建项目模板
这个很容易呀,直接安装 vite ,然后按照提示选择模板,然后就会创建出一个新的项目了。
然后呢?自己去配置 husky、eslint、pretier,再封装 router、vuex、axios,然后 基于 elementPlus 修改默认样式,并 封装自己的组件... 头好大!!!
我们已经习惯了使用 vue-cli 或者 vite 去帮我们初始化一个项目模板,那么为什么我们不自己去整理一套适合自己的项目模板,然后用 node 写个 cli 工具呢?
上面这篇文章是一个大佬写的,非常详细的说明了一下 vue-cli 的原理。本文不说如何去学习它,但是可以想象一下,如果我们有一个项目模板,已经集成了大部分的功能,可以直接进行业务开发,是不是很爽?
1.1 目录结构
首先,根目录下会有如下几个必要的文件或者文件夹:
-|- src
|- public
|- package.json
|- vite.config.ts
|- tsconfig.json
1.2 功能支持
在上面的基础上,要完成几个功能的配置:
- 增加 .eslintrc.js ,完成 eslint 的设置,避免换电脑以后 eslint 校验不过
- 增加 .prettierrc.js, 完成 pretier 的设置,避免换电脑以后 prettier 规范不一致
- 增加 .husky ,完整 git commit-hooks 配置,让 git 提交规范化
- 安装 axios ,并将 axios 拦截器及基础设置规范一下,如果自己有能力的话做一下简单的封装,方便以后修改
- 安装 elementPlus,并提出主题样式,方便以后切换主题,家里条件好的,搞一个组件库,将常用的dialog、message、form、table-page 都统一管理一下
- 初始化 router 和 menu,可以在后面直接写页面
- 初始化 state 管理,vue3 大家都用 pinia 了,家里条件好的,把 cookie 和 localStorage 的操作都提前准备上
- 开发 layout,至少有两个,一个是不带结构的,用于 404 和 特殊页面使用,另一个是主要的 layout,根据项目设计,像我的话会选择 Header+Aside+Main 的结构,即上面是头部,下面分两列,左边固定宽度放 menu,右边自适应
- 在 src 中增加 common,用来存放公共变量,或者公共 类型
- 在 src 中增加 utils,用来存放自己提出去的可复用方法
- 在 src 中增加 plugin,用来存放第三方插件的二次开发或者封装
- 在 src 中增加 styles,用来存放公共的样式文件,和变量文件,iconfont 也会放在这里,暴露出一个 index.scss ,供 main 引入使用
- 在 src 中增加 pages,用来存放页面的代码
前端真的卷~~~~~~~~
1.3 READEME
为什么把 README 单独提出来嘞?
因为我看了好多个项目,都没怎么好好去设计写 README,我也不喜欢写 README。所以单独提出来,加深一下印象。
我的理解,一个好的 README 应该包含以下几个内容:
- 项目背景
- 项目人员
- 项目简介
- 技术栈
- 核心工具
- 环境说明
- 项目使用
- 初始化
- 启动
- 部署流程
- 多环境部署
- 多环境时修改地方
- 提交规范
- 分支说明
- 关键版本说明
着重说下,上述这些东西弄好以后,放在一个 git 仓库面,拷过来用也很香。
二、命名规范
只是我自己的习惯,欢迎探讨添加!
| 条目 | 规范 | 范围 | 例子 |
|---|---|---|---|
| 文件夹 | 中线 | 全局 | page-main |
| js文件名 | 中线 | 全局 | rewrite-file.js |
| css文件名 | 中线 | 全局 | layout-main.scss |
| vue文件名 | 中线 | 全局 | page-main-vue |
| js全局变量 | 大写加下划线 | window或global | NODE_ENV |
| js局部全局变量 | 前面增加下划线 | 方法内部最高一级 | _eventItem |
| js临时变量 | 前面增加tmp,小驼峰 | 全局 | temArr |
| js方法名 | 小驼峰 | 全局 | function readFile |
| js类名 | 大驼峰 | 全局 | class PersionCar |
| css class名 | 中线 | 全局 | header-logo |
三、编码规范
这个主要是交给了 eslint 和 prettier。
其实,可以在根目录中增加 .vscode 文件夹,将项目用到基于编辑器级别的设置也给放进去。
但是,配了就要用,好多项目里面就是一个摆设,换了个人就把 eslint 给关掉了。每个人拿到项目,不管多急还是建议能把这个都给调好。
四、团队协作
团队协作主要还是 git 的用法,及分支管理,我设计了如下几个规则:
- master 分支,只做合并,不做开发,可以保持最新状态。
- bug 修改 单独起分支,每个bug只留一条修改记录,合并完成以后,删除该分支。
- feature 为特性分支,每个模块或者功能单独开一个分支,优化提交记录,尽量保留关键节点,没用的提交rebase掉。
- v1.0.0 为版本分支。
- env_xxx为环境分支,针对特殊环境进行交付。
五、自动化
自动化有几块:
- 每个模块下都有 router/menu/page 三个属性,导出该模块的三个核心,将 router/menu 模块化。在总 router 中访问所有模块下的这三个属性,重新构建 router。这样就不用每次去修改总 router了,而且可以做到快速剥离模块。
- 一键上线,自动化部署。
- 命令行生成模板文件,或者直接生成一个模块,参考 nest 脚手架。
六、迭代与发布
有个项目中写了一个webpack工具,会在打包以后生成一个文本,来说明制品信息。这样就可以记录当前上线版本是哪个了。
后记
上面的东西,大部分都是经常用到的,但是如果扎身与业务中很难去从另一个角度了解一个项目的 生命周期。很多每天挂在嘴上的东西,一动手就不会做了。
关键字:工程化、模块化、自动化、现代化。
卷起来 ~ ~ ~