换个视角去新建一个项目

180 阅读6分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第5天,点击查看活动详情

前言

如果你是项目的总负责人,如何去考虑创建一个新的项目?有哪些点需要考虑到?
最近两年接手的项目都是已经成型的项目,有些项目设计的非常巧妙,上手很容易;有些项目则设计的很不合理,结构混乱,让人摸不着头脑。

你见过这样的项目吗?

  1. 基于 webpack 多入口打包的 vue 项目,并将打包结果放在 node 环境中,进行 服务端渲染。
  2. 在 vue 项目中 大范围使用 jQuery 并且经常性的 在 window 对象上挂载一些 看不懂的 方法和变量。
  3. 文件结构混乱,js文件和css文件放在一起,几个耦合度很高的js文件放在很远的地方。
  4. 文件名、class名、js变量混乱,甚至大批量的使用 拼音+缩写 去命名一个函数。
  5. 配置了 eslint,但是换了一台电脑,各种报错导致编译不通过。
  6. ...

这篇文章就是我梳理自己的思路,如果我作为项目的负责人,如何去设计一个项目,让它 健康 的走下去。

以一个 vue3+ts 的案例为模板去考虑这个项目吧!

思路

一、创建项目模板

这个很容易呀,直接安装 vite ,然后按照提示选择模板,然后就会创建出一个新的项目了。

然后呢?自己去配置 husky、eslint、pretier,再封装 router、vuex、axios,然后 基于 elementPlus 修改默认样式,并 封装自己的组件... 头好大!!!

我们已经习惯了使用 vue-cli 或者 vite 去帮我们初始化一个项目模板,那么为什么我们不自己去整理一套适合自己的项目模板,然后用 node 写个 cli 工具呢?

Vue-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或globalNODE_ENV
js局部全局变量前面增加下划线方法内部最高一级_eventItem
js临时变量前面增加tmp,小驼峰全局temArr
js方法名小驼峰全局function readFile
js类名大驼峰全局class PersionCar
css class名中线全局header-logo

三、编码规范

这个主要是交给了 eslint 和 prettier。

其实,可以在根目录中增加 .vscode 文件夹,将项目用到基于编辑器级别的设置也给放进去。

但是,配了就要用,好多项目里面就是一个摆设,换了个人就把 eslint 给关掉了。每个人拿到项目,不管多急还是建议能把这个都给调好。

四、团队协作

团队协作主要还是 git 的用法,及分支管理,我设计了如下几个规则:

  1. master 分支,只做合并,不做开发,可以保持最新状态。
  2. bug 修改 单独起分支,每个bug只留一条修改记录,合并完成以后,删除该分支。
  3. feature 为特性分支,每个模块或者功能单独开一个分支,优化提交记录,尽量保留关键节点,没用的提交rebase掉。
  4. v1.0.0 为版本分支。
  5. env_xxx为环境分支,针对特殊环境进行交付。

五、自动化

自动化有几块:

  1. 每个模块下都有 router/menu/page 三个属性,导出该模块的三个核心,将 router/menu 模块化。在总 router 中访问所有模块下的这三个属性,重新构建 router。这样就不用每次去修改总 router了,而且可以做到快速剥离模块。
  2. 一键上线,自动化部署。
  3. 命令行生成模板文件,或者直接生成一个模块,参考 nest 脚手架。

六、迭代与发布

有个项目中写了一个webpack工具,会在打包以后生成一个文本,来说明制品信息。这样就可以记录当前上线版本是哪个了。

后记

上面的东西,大部分都是经常用到的,但是如果扎身与业务中很难去从另一个角度了解一个项目的 生命周期。很多每天挂在嘴上的东西,一动手就不会做了。

关键字:工程化、模块化、自动化、现代化。

卷起来 ~ ~ ~