Skip to content

打造企业通用脚手架-具体实践

综述

  1. UI 组件库二开
  2. 前端框架二开
  3. ...

第一部分: UI 组件库二开

一、基于 Element Plus 二次开发

二、创建私有仓库/私有包

2.1 如何部署一个私有 npm 镜像(私有仓库)呢?

  • nexus
  • verdaccio
  • cnpm

以 nexus 为例,相关文档参考地址如下:

三、跑通 DEMO

第二部分: 前端框架二开

第三部分:脚手架搭建

一、概念(脚手架)

随着前端工程化的理念不断深入,脚手架的出现就是为减少重复性工作而引入的命令行工具,众所周知, 新建项目是很繁琐的一项工作, 要考虑项目目录结构,基础库的配置, 各种规范等等. 在此过程中如何摆脱 ctrl + c, ctrl + v,而通过脚手架从零到一搭建项目的方式变得更加有必要。

另外,对于很多系统,他们的页面相似度非常高,所以就可以基于一套模板来搭建,虽然是不同的人开发,但用脚手架来搭建,相同的项目结构与代码书写规范,是很利于项目的后期维护的; 以上就是为什么脚手架存在的意义, 让项目从"搭建-开发-部署"更加快速以及规范。

二、思路与搭建流程

  • 解耦:脚手架与模板分离
  • 脚手架负责构建流程,通过命令行与用户交互,获取项目信息
  • 模板负责统一项目结构、工作流程、依赖项管理
  • 脚手架需要检测模板的版本是否有更新,支持模板的删除与新建
  • 参考 vue-cli
  • 架构设计 An image
  • 基本流程 An image

三、TODO