web前端技术路线

# web 前端技术路线

目前集团有技术路线管理平台 (opens new window)，当然你看这里会更加方便。

# 开发与运行环境

# 开发工具

VSCode

微软2015年推出的一个轻量但功能强大的源代码编辑器

NVM

node版本管理工具

NRM

npm 源管理器,允许你快速地在 npm源间切换

NPM

NodeJS包管理和分发工具

Gitbash

Git SCM

- name: VSCode
  desc: 微软2015年推出的一个轻量但功能强大的源代码编辑器
  avatar: https://imgsa.baidu.com/forum/pic/item/e54e416134a85edf16c2b54046540923dc547583.jpg
  link: http://vscode.bianjiqi.net/
- name: NVM
  desc: node版本管理工具
  avatar: https://raw.githubusercontent.com/nvm-sh/logos/HEAD/nvm-logo-color.svg
  link: /pages/nvm/
- name: NRM
  desc:  npm 源管理器,允许你快速地在 npm源间切换
  link: /pages/nrm/
- name: NPM
  desc: NodeJS包管理和分发工具
  avatar: https://static.npmjs.com/b0f1a8318363185cc2ea6a40ac23eeb2.png
  link: /pages/npm/
- name: Gitbash
  desc: Git SCM
  avatar: https://gitforwindows.org/img/git_logo.png
  link: /pages/gitbash/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 开发语言

HTML

描述网页结构的语言

CSS

描述网页显示的语言

JavaScript

基于原型编程、多范式的动态脚本语言

TypeScript

JavaScript的超集

- name: HTML
  desc: 描述网页结构的语言
  link: https://html.spec.whatwg.org/multipage/
- name: CSS
  desc: 描述网页显示的语言
  link: https://www.w3.org/TR/CSS/
- name: JavaScript
  desc: 基于原型编程、多范式的动态脚本语言
- name: TypeScript
  desc: JavaScript的超集
  link: http://www.typescriptlang.org/

1
2
3
4
5
6
7
8
9
10
11

# Web服务器

Nginx

高性能的HTTP和反向代理web服务器

- name: Nginx
  desc: 高性能的HTTP和反向代理web服务器
  avatar: http://nginx.org/nginx.png
  link: http://nginx.org/

1
2
3
4

# 框架

# Web应用框架

Vue

渐进式 JavaScript 框架

- name: Vue
  desc: 渐进式 JavaScript 框架
  avatar: https://cn.vuejs.org/images/logo.svg
  link: https://cn.vuejs.org/

1
2
3
4

# 桌面应用框架

Electron

使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序

- name: Electron
  desc: 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序
  avatar: https://www.electronjs.org/zh/assets/img/logo.svg
  link: http://www.electronjs.org/zh/docs/latest/

1
2
3
4

# 混合应用框架

Hydra

集团混合开发框架

- name: Hydra
  desc: 集团混合开发框架
  avatar: http://cbb.iflytek.com/cbbsmp/assets/img/logo.61dc9550.png
  link: http://cbb.iflytek.com/cbbsmp/Shelves/CbbDetail/119

1
2
3
4

# 微前端框架

single-spa

将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架

qiankun

基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统

- name: single-spa
  desc: 将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架
  avatar: https://single-spa.js.org/img/single-spa-mark-magenta.svg
  link: https://single-spa.js.org/
- name: qiankun
  desc: 基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统
  link: https://qiankun.umijs.org/

1
2
3
4
5
6
7

# 医疗自研库

# 公共库

iflymed-ui
iflymed-vui
imfe-ui
imfe-vui
v-fly-broswer

# 智慧卫生业务库

待补充

# 智慧医院业务库

待补充

# Vue相关库

Vetur

vscode插件，用于为.vue单文件组件提供代码高亮以及语法支持

Volar

与vetur相同，volar是一个针对vue的vscode插件，不过与vetur不同的是，volar提供了更为强大的功能

Vue-Cli

基于 Vue.js 进行快速开发的完整系统

Vue-Router

Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举

Vuex

专为 Vue.js 应用程序开发的状态管理模式

Vue-Video-Player

适用于 Vue 的 video.js 播放器组件

Vuedraggable

Vue 组件 (Vue.js 2.0) 或指令 (Vue.js 1.0) 允许拖放和与视图模型数组同步

Vue-Rasy-Dnd

基于 vue 实现的简单拖拽组件

Vue-Socket.io

为 Vue 实现的基于socket.io 库

- name: Vetur
  desc: vscode插件，用于为.vue单文件组件提供代码高亮以及语法支持
  link: https://vuejs.github.io/vetur/
- name: Volar
  desc: 与vetur相同，volar是一个针对vue的vscode插件，不过与vetur不同的是，volar提供了更为强大的功能
  link: https://vuejs.github.io/vetur/
- name: Vue-Cli
  desc: 基于 Vue.js 进行快速开发的完整系统
  link: https://cli.vuejs.org/zh/guide/
- name: Vue-Router
  desc: Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举
  link: https://router.vuejs.org/
- name: Vuex
  desc: 专为 Vue.js 应用程序开发的状态管理模式
  link: https://vuex.vuejs.org/
- name: Vue-Video-Player
  desc: 适用于 Vue 的 video.js 播放器组件
  link: https://github.com/surmon-china/vue-video-player#readme
- name: Vuedraggable
  desc: Vue 组件 (Vue.js 2.0) 或指令 (Vue.js 1.0) 允许拖放和与视图模型数组同步
  link: https://github.com/SortableJS/Vue.Draggable#readme
- name: Vue-Rasy-Dnd
  desc: 基于 vue 实现的简单拖拽组件
  link: https://github.com/rlemaigre/Easy-DnD
- name: Vue-Socket.io
  desc: 为 Vue 实现的基于socket.io 库
  link: https://github.com/MetinSeylan/Vue-Socket.io

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 常用库

# UI框架

ElementUI

饿了么公司前端团队开源的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

Element Plus

饿了么公司前端团队开源的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库

Vant

移动端组件库，提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本

- name: ElementUI
  desc: 饿了么公司前端团队开源的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
  avatar: https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg
  link: https://element.eleme.cn/
- name: Element Plus
  desc: 饿了么公司前端团队开源的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库
  avatar: https://element-plus.org/images/element-plus-logo-small.svg
  link: https://element-plus.org/zh-CN/#/zh-CN
- name: Vant
  desc: 移动端组件库，提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本
  avatar: https://fastly.jsdelivr.net/npm/@vant/assets/logo.png
  link: https://vant-contrib.gitee.io/vant/#/zh-CN

1
2
3
4
5
6
7
8
9
10
11
12

# HTTP

Axios

基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

- name: Axios
  desc: 基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
  link: https://axios-http.com/

1
2
3

# 音视频

RecordRTC.js

WebRTC JavaScript 库，用于音频/视频以及录屏幕活动记录

soundmanager2

支持MP3，MPEG4和HTML5音频+RTMP的JavaScript Sound API

- name: RecordRTC.js
  desc: WebRTC JavaScript 库，用于音频/视频以及录屏幕活动记录
  link: https://recordrtc.org/
- name: soundmanager2
  desc: 支持MP3，MPEG4和HTML5音频+RTMP的JavaScript Sound API
  link: http://www.schillmania.com/projects/soundmanager2/

1
2
3
4
5
6
7

# 图形动效

ECharts

Three.js

Animate.css

一个随时可用的跨浏览器动画库

- name: ECharts
  desc: xx
  avatar: /img/route/github-favicon.png
  link: https://recordrtc.org/
- name: D3
  desc: xx
  avatar: /img/route/github-favicon.png
  link: https://recordrtc.org/
- name: Three.js
  desc: xx
  avatar: /img/route/github-favicon.png
  link: https://recordrtc.org/
- name: G2
  desc: xx
  avatar: /img/route/github-favicon.png
  link: https://recordrtc.org/
- name: Animate.css
  desc: 一个随时可用的跨浏览器动画库
  link: https://animate.style/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 日期

Moment

xxx

- name: Moment
  desc: xxx
  avatar: /img/route/github-favicon.png
  link: https://www.baidu.com

1
2
3
4

# Socket

socket.io-client

socket 客户端库

vue-socket.io

为 Vue 实现的基于socket.io 库

- name: socket.io-client
  desc: socket 客户端库
  link: https://github.com/socketio/socket.io-client#readme
- name: vue-socket.io
  desc: 为 Vue 实现的基于socket.io 库
  link: https://github.com/MetinSeylan/Vue-Socket.io

1
2
3
4
5
6

# 加密

sm-crypto

国密算法sm2、sm3和sm4的js版

- name: sm-crypto
  desc: 国密算法sm2、sm3和sm4的js版
  link: https://github.com/JuneAndGreen/sm-crypto#readme

1
2
3

# 工具

Lodash

一致性、模块化、高性能的 JavaScript 实用工具库

- name: Lodash
  desc: 一致性、模块化、高性能的 JavaScript 实用工具库
  avatar: https://www.lodashjs.com/img/logo.png
  link: https://www.lodashjs.com/

1
2
3
4

# 富文本

WangEditor

轻量级 web 富文本编辑器，配置方便，使用简单，开源免费

- name: WangEditor
  desc: 轻量级 web 富文本编辑器，配置方便，使用简单，开源免费
  link: https://www.wangeditor.com/

1
2
3

# 截图

Html2canvas

JavaScript 截图工具

- name: Html2canvas
  desc: JavaScript 截图工具
  link: https://html2canvas.hertzen.com

1
2
3

# PDF

Pdf.js

在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持

- name: Pdf.js
  desc: 在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持
  link: https://github.com/mozilla/pdf.js

1
2
3

# 播放器

Video.js

通用的在网页上嵌入视频播放器的 JS 库，它支持 HTML5 视频和现代流媒体格式，以及 YouTube、Vimeo，甚至 Flash

- name: Video.js
  desc: 通用的在网页上嵌入视频播放器的 JS 库，它支持 HTML5 视频和现代流媒体格式，以及 YouTube、Vimeo，甚至 Flash
  link: https://videojs.com/

1
2
3

# 二维码

node-qrcode

QR code/2d barcode generator

vue-qr

vue 二维码生成器，支持 vue2/vue3/vite

- name: node-qrcode
  desc: QR code/2d barcode generator
  link: github.com/soldair/node-qrcode
- name: vue-qr
  desc: vue 二维码生成器，支持 vue2/vue3/vite
  link: github.com/Binaryify/vue-qr#readme

1
2
3
4
5
6

# 开发工具

# 构建工具

Webpack

用于现代 JavaScript 应用程序的静态模块打包工具

Gulp

自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务

Rollup

JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码

- name: Webpack
  desc: 用于现代 JavaScript 应用程序的静态模块打包工具
  avatar: https://www.webpackjs.com/assets/favicon.ico
  link: https://webpack.js.org/
- name: Gulp
  desc: 自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务
  avatar: https://www.gulpjs.com.cn/img/gulp-white-text.svg
  link: https://www.gulpjs.com.cn/
- name: Rollup
  desc: JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码
  avatar: https://rollupjs.org/logo.svg
  link: https://rollupjs.org/guide/en/

1
2
3
4
5
6
7
8
9
10
11
12

# css工具

Sass

一门 CSS 预处理语言，推荐配合 Element 使用

Less

一门 CSS 预处理语言，推荐配合 Vant 使用

Postcss

使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等

- name: Sass
  desc: 一门 CSS 预处理语言，推荐配合 Element 使用
  avatar: https://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg
  link: https://sass-lang.com/dart-sass
- name: Less
  desc: 一门 CSS 预处理语言，推荐配合 Vant 使用
  avatar: https://lesscss.org/public/img/less_logo.png
  link: http://lesscss.org
- name: Postcss
  desc: 使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等
  avatar: https://postcss.org/assets/postcss.83d93145.svg
  link: https://postcss.org/

1
2
3
4
5
6
7
8
9
10
11
12

# 脚本编译工具

Babel

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

- name: Babel
  desc: Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
  link: https://babeljs.io
  avatar: https://d33wubrfki0l68.cloudfront.net/7a197cfe44548cc1a3f581152af70a3051e11671/78df8/img/babel.svg

1
2
3
4

# 单元测试

Mocha

mocha是一个功能丰富的javascript测试框架，运行在node.js和浏览器中，使异步测试变得简单有趣

Karma

karma是一个可以在多个浏览器中执行js代码的简单工具

Jasmine

Jasmine 是一个简易的JS单元测试框架，不依赖于任何浏览器、DOM、或者是任何 JavaScript 而存在

- name: Mocha
  desc: mocha是一个功能丰富的javascript测试框架，运行在node.js和浏览器中，使异步测试变得简单有趣
  link: http://mochajs.org/
- name: Karma
  desc: karma是一个可以在多个浏览器中执行js代码的简单工具
  link: https://karma-runner.github.io/
- name: Jasmine
  desc: Jasmine 是一个简易的JS单元测试框架，不依赖于任何浏览器、DOM、或者是任何 JavaScript 而存在
  link: https://jasmine.github.io/

1
2
3
4
5
6
7
8
9

# 接口测试

Mock.js

一个帮助前端开发人员模拟接口，生成随机数据，拦截Ajax请求的库

- name: Mock.js
  desc: 一个帮助前端开发人员模拟接口，生成随机数据，拦截Ajax请求的库
  link: http://mockjs.com

1
2
3

# 日志工具

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板

- name: vConsole
  desc: 一个轻量、可拓展、针对手机网页的前端开发者调试面板
  link: https://github.com/Tencent/vConsole

1
2
3

# 代码检查与格式化

Prettier

一个流行的代码格式化工具

ESLint

一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具

Stylelint

css代码审查工具，由PostCSS提供技术支持

Commitlint

帮助您的团队遵守提交约定

- name: Prettier
  desc: 一个流行的代码格式化工具
  link: https://prettier.io/
- name: ESLint
  desc: 一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具
  link: https://eslint.org/
- name: Stylelint
  desc: css代码审查工具，由PostCSS提供技术支持
  link: https://stylelint.io/
- name: Commitlint
  desc: 帮助您的团队遵守提交约定
  link: https://commitlint.js.org/

1
2
3
4
5
6
7
8
9
10
11
12

编辑

上次更新: 2022/07/06, 17:35:58

Android技术路线→