前端概览

码匠君 ... 2021-10-28 大约 7 分钟

# 前端概览

# 项目简介

Eurynome Cloud UIEurynome Cloud 后台管理界面。是前后端分离的,独立运行的前端应用。基于 Vue 2.0 和 Typescript 4.2.X 构建,是组件库式的,模块化的前端工程。

Vuetify 组件库为基础,依赖丰富的常用组件和 Material Design 的设计优势,让你无需大量美工工作的投入,就可以快速得到非常美观的界面功能。

# 为什么没有使用 Vue 3

Vue 3 已经出来将近一年了,很期待使用其新特性,让代码更简洁,更规范,更高效。为什么现在没有使用 Vue 3,主要原因是本项目定位于使用 Vuetify 组件,Vuetify 3 正在开发中,所以目前的版本仍旧在使用 Vue 2。目前工程代码已经全部切换为Typescript,就是为了迎接 Vue 3 和 Vuetify 3 做前序准备。

# 主要特性

  • Eurynome Cloud UI是基于 Lernayarn workspaces 构建的, 以 Monorepo 方式管理代码的项目。
  • 基于 Vue 2.0 和 Typescript 4.2.X 构建。是组件库式的,模块化的前端工程。
  • 共性组件采用 Rollup 进行编译,做了已有认知范围内,能够做到的所有性能优化处理
  • 支持 Vue Webpack 方式编译,并对工程打包进行了深入优化。
  • 浏览器本地存储采用 localForage,支持 IndexedDB,WebSQL 和 localStorage 三种存储模式

# 技术介绍

# Vuetify

Vuetify 是一个用于 Vue.js 的 Material Design 组件框架。它的目标是提供所有必要的工具来创建美丽的内容丰富的应用程序。能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面。

# 为什么选择Vuetify

Why

  • 与其他框架相比,Vuetify覆盖了几乎其他前端框架的功能,组件丰富,移动端和pc端能进行比较好的自适应。框架的可扩展性强,可以根据框架的组件,开发出更高效的组件。
  • 基于Vue cli提供了 Vuetify Plugin,集成更加方便,基本上实现一键集成,一个命令就能集成,省去很多配置。
  • 二次开发更加容易,基于 Vuetify 提供的框架进行二次开发,更加的容易。
  • 组件按需加载, Vuetify 框架内置了组件的按需加载,只要引用 Vuetify 组件,都是按需加载,大大减轻了进一步处理的时间成本。
  • Vuetify 与其他框架的集成,集成比较简单,以 Nuxt 框架的集成为例,能方便的进行集成,简单的集成,就能使用,并且和后台管理的功能页面使用无差别,可以加快使用的成本
  • 框架的持续的更新升级,基本每周都有更新,框架组件更新及时。便于系统技术升级。

# Typescript

# 什么是TypeScript

TypeScriptJavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发,代码开源于 GitHub 上。

TypeScriptJavaScript 的类型的超集,它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。

# 为什么选择TypeScript

  • TypeScript 增加了代码的可读性和可维护性

    • 类型系统实际上是最好的文档,大部分的函数看看类型的定义就可以知道如何使用了
    • 可以在编译阶段就发现大部分错误,这总比在运行时候出错好
    • 增强了编辑器和 IDE 的功能,包括代码补全,接口提示,跳转到定义,重构等
  • TypeScript 非常包容

    • TypeScript 是 JavaScript 的超集,.js 文件可以直接重命名为 .ts 即可
    • 即使不显式的定义类型,也能够自动做出类型推论
    • 可以定义从简单到复杂的几乎一切类型
    • 即使 TypeScript 编译报错,也可以生成 JavaScript 文件
    • 兼容第三方库,即使第三方库不是用 TypeScript 写的,也可以编写单独的类型文件供 TypeScript 读取
  • TypeScript 拥有活跃的社区

    • 大部分第三方库都有提供给 TypeScript 的类型定义文件
    • Google 开发的 Angular2 就是使用 TypeScript 编写的
    • TypeScript 拥抱了 ES6 规范,也支持部分 ESNext 草案的规范

# TypeScript 的缺点

任何事物都是有两面性的,我认为 TypeScript 的弊端在于:

  • 有一定的学习成本,需要理解接口(Interfaces),泛型(Generics),类(Classes),枚举类型(Enums)等前端工程师可能不是很熟悉的概念
  • 短期可能会增加一些开发成本,毕竟要多写一些类型的定义,不过对于一个需要长期维护的项目,TypeScript 能够减少其维护成本
  • 集成到构建流程需要一些工作量
  • 可能和一些库结合的不是很完美

# Monorepo

Monorepo 是管理项目代码的一个方式,指在一个项目仓库 (repo) 中管理多个模块/包 (package),不同于常见的每个模块建一个 repo

MonorepoMultirepo 是两种不同的源码管理理念,Monorepo 是把所有的相关项目都放在一个仓库中(例如:React, Angular, Babel, Jest, Umijs, ...),Multirepo 则是按模块把子项目拆分到多个仓库中(例如:Rollup, ...)。前者允许多元化发展(各项目可以有自己的构建工具,依赖管理策略,单元测试方法),后者希望集中管理,减少项目间的差异带来的沟通成本。

Monorepo 最主要的好处是统一的工作流和 Code Sharing。比如我想看一个 pacakge 的代码,了解某段逻辑,不需要找它的 repo,直接就在当前 repo;当某个需求要修改多个 pacakge 时,不需要分别到各自的 repo 进行修改,测试,发版或者 npm link,直接在当前 repo 修改,统一测试,统一发版。只要搭建一套脚手架,就能管理(构建,测试,发布)多个 package。

# Lerna

Lerna 是一个管理多个 npm 模块的工具,是 Babel 自己用来维护自己的 Monorepo 并开源出的一个项目。优化维护多包的工作流,解决多个包互相依赖,且发布需要手动维护多个包的问题。

# Rollup

RollupJavaScript 的模块 bundler,可将一小段代码编译为更大或更复杂的内容,例如库或应用程序。

它对 JavaScriptES6 修订版中包含的代码模块使用了新的标准化格式,而不是先前的特殊解决方案(例如 CommonJSAMD)。ES 模块使用户可以自由,无缝地结合自己喜欢的库中最有用的单个函数。

# 模块说明

Vue 相比传统 Javascript 开发,最大优势之一就是其强大的组件化和代码可复用化能力。Vue 极大的提升了前端代码编写的规范性和可维护性, Eurynome Cloud UI 采用 Mononrepo 组件库的方式构建前端工程,就是在已有 Vue 强大的组件化能力之上,进一步通用化前端工程代码。提升代码的开发速度和可维护性。

# @hecate/h-bpmn-moddle

基于 bpmn-js,bpmn-js-properties-panel,camunda-bpmn-moddle,diagram-js 构建的标准化的 Bpmn 2.0 在线工作流编辑器。实现编辑器网格,放大缩小,Redo,Undo,模型导入,导出XML,SVG格式模型,部署至服务等功能。

以组件的形式定义的标准化组件,可在应用中直接引用。

# @hecate/h-button

结合实际应用需求,基于 Vuetify Button 等组件封装的按钮组件。通用化按钮使用,减少代码中重复性代码量。

以组件的形式定义的标准化组件,可在应用中直接引用。

# @hecate/h-table

结合实际应用需求,基于 Vuetify Table 等组件封装的按钮组件。通用化按钮使用,减少代码中重复性代码量。

以组件的形式定义的标准化组件,可在应用中直接引用。

# @hecate/plugins

所有基于 VueVuetify 构建的应用,都需要重复配置 plugins 等信息。@hecate/plugins 将常规工程中,常用的第三方插件 plugins 配置通用化,方便和简化新工程构建的配置。

以组件的形式定义的标准化组件,可在应用中直接引用。

# @hecate/utils

将系统中通用的,工具类代码以及Lodash等工具统一封装,以组件的形式定义的标准化组件,可在应用中直接引用。

# @herodotus/ui

基于 Vuetify, Vue, Typescript 构建的 Eurynome Cloud 前端工程。

上次编辑于: 2021年10月28日 23:24
贡献者: herodotus