MES7.0 开发文档
目录

快捷导航

# 基础教程

MDN Web Docs

Web 开发着指南

W3cschool - HTML

HTML 基础教程

W3cschool - CSS

CSS 基础教程

W3cschool - JS

JavaScript 基础教程

现代 JavaScript 教程

最新 JS 标准为基准的教程

ES6 入门教程

阮一峰 - ES6 入门教程

深入理解 TypeScript

《TypeScript Deep Dive》

VUE 2 文档

渐进式 JavaScript 框架

代码规范

前端代码规范

VSCode

极客教程 - VSCode

SVN

菜鸟教程 - SVN

htmlhead

最全的 head 列表

GCPAAS - DataRoom

大屏设计【文档密码：ympw】

GCPAAS - DashBoard

仪表盘【文档密码：vukg】

- name: MDN Web Docs
  desc: Web 开发着指南
  avatar: https://developer.mozilla.org/favicon.ico
  link: https://developer.mozilla.org/zh-CN/
- name: W3cschool - HTML
  desc: HTML 基础教程
  avatar: https://www.w3school.com.cn/ui2019/logo-180.png
  link: https://www.w3school.com.cn/html/index.asp
- name: W3cschool - CSS
  desc: CSS 基础教程
  avatar: https://www.w3school.com.cn/ui2019/logo-180.png
  link: https://www.w3school.com.cn/css/index.asp
- name: W3cschool - JS
  desc: JavaScript 基础教程
  avatar: https://www.w3school.com.cn/ui2019/logo-180.png
  link: https://www.w3school.com.cn/js/index.asp
- name: 现代 JavaScript 教程
  desc: 最新 JS 标准为基准的教程
  avatar: https://zh.javascript.info/img/favicon/favicon.png
  link: https://zh.javascript.info/
- name: ES6 入门教程
  desc: 阮一峰 - ES6 入门教程
  avatar: https://es6.ruanyifeng.com/favicon.ico
  link: https://es6.ruanyifeng.com/
- name: 深入理解 TypeScript
  desc: 《TypeScript Deep Dive》
  avatar: https://jkchao.github.io/typescript-book-chinese/logo.png
  link: https://jkchao.github.io/typescript-book-chinese/
- name: VUE 2 文档
  desc: 渐进式 JavaScript 框架
  avatar: https://v2.cn.vuejs.org/images/icons/android-icon-192x192.png
  link: https://v2.cn.vuejs.org/index.html
- name: 代码规范
  desc: 前端代码规范
  avatar: https://guide.aotu.io/img/apple-touch-icon-152x152.png
  link: https://guide.aotu.io/index.html
- name: VSCode
  desc: 极客教程 - VSCode
  # avatar: https://geek-docs.com/favicon.ico
  avatar: https://code.visualstudio.com/favicon.ico
  link: https://geek-docs.com/vscode/vscode-tutorials/what-is-vscode.html
- name: SVN
  desc: 菜鸟教程 - SVN
  avatar: https://static.runoob.com/images/favicon.ico
  link: https://www.runoob.com/svn/svn-tutorial.html
- name: htmlhead
  desc: 最全的 head 列表
  avatar: https://htmlhead.dev/favicon.ico
  link: https://htmlhead.dev/
- name: GCPAAS - DataRoom
  desc: 大屏设计【文档密码：ympw】
  avatar: http://gcpaas.gccloud.com/favicon.ico
  link: https://www.yuque.com/chuinixiongkou/bigscreen
- name: GCPAAS - DashBoard
  desc: 仪表盘【文档密码：vukg】
  avatar: http://gcpaas.gccloud.com/favicon.ico
  link: https://www.yuque.com/chuinixiongkou/dashboard
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

# 项目依赖

Axios

基于 promise 的网络请求库

Ant Design Vue

UI 组件

vxe-table

表格文档

vxe-utils

工具类

moment

日期处理类库

ECharts

可视化图表库

Mock

生成随机数据，拦截 Ajax 请求

Swiper

生成随机数据，拦截 Ajax 请求

NodeJS

开源、跨平台的 JS 运行时环境

Yarn

软件包管理器

webpack

JS 的静态模块打包工具

less

CSS 扩展语言

Sass

CSS 扩展语言

AntV X6

X6 图编辑引擎

tinymce-vue

富文本编辑器

Lodash

模块化、高性能工具库

- name: Axios
  desc: 基于 promise 的网络请求库
  avatar: https://www.axios-http.cn/assets/favicon.ico
  link: https://www.axios-http.cn/
- name: Ant Design Vue
  desc: UI 组件
  avatar: https://qn.antdv.com/favicon.ico
  link: https://1x.antdv.com/docs/vue/introduce-cn/
- name: vxe-table
  desc: 表格文档
  avatar: https://vxetable.cn/v4/logo.png
  # link: https://vxetable.cn/#/table/start/install
  link: https://vxetable.cn/v3_old/
- name: vxe-utils
  desc: 工具类
  avatar: https://vxetable.cn/v4/logo.png
  link: https://vxetable.cn/xe-utils/#/
- name: moment
  desc: 日期处理类库
  avatar: http://momentjs.cn/static/img/moment-favicon.png
  link: http://momentjs.cn/
- name: ECharts
  desc: 可视化图表库
  avatar: https://echarts.apache.org/zh/images/favicon.png
  link: https://echarts.apache.org/zh/index.html
- name: Mock
  desc: 生成随机数据，拦截 Ajax 请求
  avatar: http://mockjs.com/assets/img/logo-2.svg
  link: http://mockjs.com/
- name: Swiper
  desc: 生成随机数据，拦截 Ajax 请求
  avatar: https://www.swiper.com.cn/favicon.ico
  link: https://www.swiper.com.cn/
- name: NodeJS
  desc: 开源、跨平台的 JS 运行时环境
  avatar: http://img.nodejs.cn/favicon.png
  link: http://nodejs.cn/
- name: Yarn
  desc: 软件包管理器
  avatar: http://img.nodejs.cn/favicon.png
  link: https://www.yarnpkg.cn/
- name: webpack
  desc: JS 的静态模块打包工具
  avatar: https://yarn.bootcss.com/favicon.ico
  link: https://yarn.bootcss.com/docs/getting-started/
- name: less
  desc: CSS 扩展语言
  avatar: https://less.bootcss.com/public/ico/favicon.ico
  link: https://less.bootcss.com/
- name: Sass
  desc: CSS 扩展语言
  avatar: https://www.sass.hk/favicon.ico
  link: https://www.sass.hk/
- name: AntV X6
  desc: X6 图编辑引擎
  avatar: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7svFR6wkPMoAAAAAAAAAAAAADmJ7AQ/original
  link: https://x6.antv.antgroup.com/
- name: tinymce-vue
  desc: 富文本编辑器
  avatar: https://www.tiny.cloud/favicon-32x32.png
  # link: http://tinymce.ax-z.cn/
  link: https://www.tiny.cloud/docs/
- name: Lodash
  desc: 模块化、高性能工具库
  avatar: https://www.tiny.cloud/favicon-32x32.png
  link: https://www.lodashjs.com/
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

# 在线工具

时间戳转化

在线时间戳转化

json 格式化

在线 json 格式化

Base64 编码 & 解码

在线 Base64 编码 & 解码

正则表达式

在线正则表达式

Unicode转换

在线 Unicode 转换

URL 编码 & 解码

在线 Unicode 转换

Websocket 测试

在线 Websocket 测试

CRONTAB 执行时间计算

在线 CRONTAB 执行时间计算

MD5 / Hash

在线 MD5 / Hash

进制转换

在线进制转换

占位图生成器

在线占位图生成器

二维码生成

在线二维码生成

图片压缩

在线图片压缩

Favicon 制作

在线 favicon 制作

RSA 加密

在线 RSA 加密

AES 加密

在线 AES 加密

DES 加密

在线 DES 加密

颜色值转换

在线颜色值转换

- name: 时间戳转化
  desc: 在线时间戳转化
  avatar: https://tools.fun/assets/image/557d5256c6.png
  link: https://tools.fun/timestamp.html
- name: json 格式化
  desc: 在线 json 格式化
  avatar: https://tools.fun/assets/image/6bd170b2c8.png
  link: https://tools.fun/json.html
- name: Base64 编码 & 解码
  desc: 在线 Base64 编码 & 解码
  avatar: https://tools.fun/assets/image/286f696a67.png
  link: https://tools.fun/base64.html
- name: 正则表达式
  desc: 在线正则表达式
  avatar: https://tools.fun/assets/image/4ca3f448d8.png
  link: https://tools.fun/regexp.html
- name: Unicode转换
  desc: 在线 Unicode 转换
  avatar: https://tools.fun/assets/image/b3ecfbb0cb.png
  link: https://tools.fun/unicode.html
- name: URL 编码 & 解码
  desc: 在线 Unicode 转换
  avatar: https://tools.fun/assets/image/ebdb6264c1.png
  link: https://tools.fun/url.html
- name: Websocket 测试
  desc: 在线 Websocket 测试
  avatar: https://tools.fun/assets/image/e6b9f67cb6.png
  link: http://tools.fun/websocket.html
- name: CRONTAB 执行时间计算
  desc: 在线 CRONTAB 执行时间计算
  avatar: https://tools.fun/assets/image/1518876a3f.png
  link: https://tools.fun/crontab.html
- name: MD5 / Hash
  desc: 在线 MD5 / Hash
  avatar: https://tools.fun/assets/image/265bdc88c1.png
  link: https://tools.fun/md5.html
- name: 进制转换
  desc: 在线进制转换
  avatar: https://tools.fun/assets/image/d867713134.png
  link: https://tools.fun/hex-convert.html
- name: 占位图生成器
  desc: 在线占位图生成器
  avatar: https://tools.fun/assets/image/fe0f57f958.png
  link: https://tools.fun/image-generator.html
- name: 二维码生成
  desc: 在线二维码生成
  avatar: https://tools.fun/assets/image/8e591f96ce.png
  link: https://tools.fun/qrcode.html
- name: 图片压缩
  desc: 在线图片压缩
  avatar: https://tools.fun/assets/image/a17d84598b.png
  link: https://tools.fun/tinyimg.html
- name: Favicon 制作
  desc: 在线 favicon 制作
  avatar: https://tools.fun/assets/image/61f08db5ce.png
  link: https://tools.fun/favicon.html
- name: RSA 加密
  desc: 在线 RSA 加密
  avatar: https://tools.fun/assets/image/b66fd0f35b.png
  link: https://tools.fun/rsa.html
- name: AES 加密
  desc: 在线 AES 加密
  avatar: https://tools.fun/assets/image/3f57f5e3cf.png
  link: https://tools.fun/aes.html
- name: DES 加密
  desc: 在线 DES 加密
  avatar: https://tools.fun/assets/image/a82195820d.png
  link: https://tools.fun/des.html
- name: 颜色值转换
  desc: 在线颜色值转换
  avatar: https://tools.fun/assets/image/5a90f44a2d.png
  link: https://tools.fun/color.html
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

# CSS 工具

CSS-Inspiration

寻找到使用 CSS 的灵感

flex boxes

Flexbox 生成器

CSS Grid Generator

grid 网格生成器

你不知道的 CSS

Web开发者应该掌握的 CSS tricks

CSSFX

漂亮的简单点击复制CSS效果

CSS 常用样式

总结一些常用的 CSS 样式

神奇 UI 样式

创建、分享和使用自定义元素

loading.io

加载动画

终极CSS生成器

我可以给你生任何你想要的CSS

CSS渐变生成器

满足你任何方式的渐变

CSS Layout

收集常见的CSS布局方案

CSS Shadows Generator

box-shadow 阴影生成

CSS阴影收集

收集各种CSS阴影效果

CSS生成器

三角形、渐变、波浪线等生成器

Neumorphism.io

圆角、背景、阴影

选择框生成器

多选框、单选框样式生成器

瀑布流生成器

生成瀑布流的相关代码

Easing Gradients

渐变

Clippy

CSS clip-path 生成器

30-seconds-of-css

30秒 CSS 中文版

CSS Inspiration

CSS 灵感

cssreference.io

免费 CSS 属性指导手册

CSS 选择器演示

理解 CSS 选择器的作用区域

- name: CSS-Inspiration
  desc: 寻找到使用 CSS 的灵感
  avatar: https://csscoco.com/inspiration/logo2.png
  link: https://csscoco.com/inspiration/
- name: flex boxes
  desc: Flexbox 生成器
  avatar: https://the-echoplex.net/flexyboxes//favicon.ico
  link: https://the-echoplex.net/flexyboxes/
- name: CSS Grid Generator
  desc: grid 网格生成器
  avatar: https://cssgrid-generator.netlify.app/favicon.ico
  link: https://cssgrid-generator.netlify.app/
- name: 你不知道的 CSS
  desc: Web开发者应该掌握的 CSS tricks
  avatar: https://lhammer.cn/You-need-to-know-css/static/favicon.ico
  link: https://lhammer.cn/You-need-to-know-css/#/zh-cn/
- name: CSSFX
  desc: 漂亮的简单点击复制CSS效果
  avatar: https://cssfx.netlify.app/favicon-32x32.png
  link: https://cssfx.netlify.app/
- name: CSS 常用样式
  desc: 总结一些常用的 CSS 样式
  avatar: https://github.githubassets.com/favicons/favicon.svg
  link: https://qishaoxuan.github.io/css_tricks/
- name: 神奇 UI 样式
  desc: 创建、分享和使用自定义元素
  avatar: https://github.githubassets.com/favicons/favicon.svg
  link: https://uiverse.io/all
- name: loading.io
  desc: 加载动画
  avatar: https://loading.io/favicon.ico
  link: https://loading.io/
- name: 终极CSS生成器
  desc: 我可以给你生任何你想要的CSS
  avatar: https://webcode.tools/favicon.png
  link: https://webcode.tools/generators/css
- name: CSS渐变生成器
  desc: 满足你任何方式的渐变
  avatar: https://www.colorzilla.com/firefox/images/logo-50.png
  link: https://www.colorzilla.com/gradient-editor/
- name: CSS Layout
  desc: 收集常见的CSS布局方案
  avatar: https://csslayout.io/favicon.png
  link: https://csslayout.io/
- name: CSS Shadows Generator
  desc: box-shadow 阴影生成
  avatar: https://shadows.brumm.af/favicon.svg
  link: https://shadows.brumm.af
- name: CSS阴影收集
  desc: 收集各种CSS阴影效果
  avatar: https://getcssscan.com/apple-touch-icon.png
  link: https://getcssscan.com/css-box-shadow-examples
- name: CSS生成器
  desc: 三角形、渐变、波浪线等生成器
  avatar: https://omatsuri.app/assets/favicon-48x48.png
  link: https://omatsuri.app/triangle-generator
- name: Neumorphism.io
  desc: 圆角、背景、阴影
  avatar: https://neumorphism.io/favicon.ico
  link: https://neumorphism.io/#e0e0e0
- name: 选择框生成器
  desc: 多选框、单选框样式生成器
  avatar: https://bun.js.org/favicon.ico
  link: https://bun.js.org/
- name: 瀑布流生成器
  desc: 生成瀑布流的相关代码
  avatar: https://w3bits.com/wp-content/uploads/masonry.jpg
  link: https://w3bits.com/tools/masonry-generator/
- name: Easing Gradients 
  desc: 渐变
  avatar: https://larsenwork.com/favicon.ico
  link: https://larsenwork.com/easing-gradients/#editor
- name: Clippy
  desc: CSS clip-path 生成器
  avatar: https://bennettfeely.com/clippy/pics/favicon.png
  link: https://bennettfeely.com/clippy/
- name: 30-seconds-of-css
  desc: 30秒 CSS 中文版
  avatar: http://caibaojian.com/favicon.ico
  link: http://caibaojian.com/30-seconds-of-css/
- name: CSS Inspiration
  desc: CSS 灵感
  avatar: https://chokcoco.github.io/CSS-Inspiration/logo2.png
  link: https://chokcoco.github.io/CSS-Inspiration/
- name: cssreference.io
  desc: 免费 CSS 属性指导手册
  avatar: https://cssreference.io/favicons/favicon-32x32.png?v=201702181118
  link: https://cssreference.io/
- name: CSS 选择器演示
  desc: 理解 CSS 选择器的作用区域
  avatar: https://www.haorooms.com/favicon.ico
  link: https://www.haorooms.com/tools/css_selecter/
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

# JavaScript 工具

在线JS代码格式化

基于Prettier的在线格式化

在线JSON格式化

在线JSON代码解析及格式化

30秒的代码

满足开发需求的简短代码片段

1 LOC

1行JS代码解决方案

操作DOM

原生JS操作DOM的解决方案

- name: 在线JS代码格式化
  desc: 基于Prettier的在线格式化
  avatar: https://prettier.io/icon.png
  link: https://prettier.io/playground/
- name: 在线JSON格式化
  desc: 在线JSON代码解析及格式化
  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store@master/blog/json.3dj9idaidog0.jpg
  link: https://www.json.cn/
- name: 30秒的代码
  desc: 满足开发需求的简短代码片段
  avatar: https://www.30secondsofcode.org/assets/30s-icon.png
  link: https://www.30secondsofcode.org/
- name: 1 LOC
  desc: 1行JS代码解决方案
  avatar: https://1loc.dev/favicon.png
  link: https://1loc.dev/
- name: 操作DOM
  desc: 原生JS操作DOM的解决方案
  avatar: https://htmldom.dev/favicon.png
  link: https://htmldom.dev/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Github 收录

前端技巧

收集前端技巧、最佳实践

正则大全

收集常用的正则表达式

- name: 前端技巧
  desc: 收集前端技巧、最佳实践
  avatar: https://getfrontend.tips/favicon.ico
  link: https://getfrontend.tips/
- name: 正则大全
  desc: 收集常用的正则表达式
  avatar: https://regex101.com/static/assets/icon-76.png
  link: https://any86.github.io/any-rule/
1
2
3
4
5
6
7
8

# 图片处理

微图

不限格式，极速压缩。(压缩后可选格式为webp)

tinypng

压缩png很优秀，也可压缩jpg、webp

AI自动抠图

只需单击一下，即可快速地自动删除图像背景

favicon生成器

favicon图标生成器，基于图片、文本、表情生成。

- name: 微图
  desc: 不限格式，极速压缩。(压缩后可选格式为webp)
  avatar: https://devtool.tech/_next/image?url=%2Fassets%2Flogo.svg&w=96&q=75
  link: https://devtool.tech/tiny-image
- name: tinypng
  desc: 压缩png很优秀，也可压缩jpg、webp
  avatar: https://tinypng.com/images/apng/panda-waving-2x.png
  link: https://tinypng.com/
- name: AI自动抠图
  desc: 只需单击一下，即可快速地自动删除图像背景
  avatar: https://www.remove.bg/apple-touch-icon.png?v=YAXaAv7pao
  link: https://www.remove.bg/zh
- name: favicon生成器
  desc: favicon图标生成器，基于图片、文本、表情生成。
  avatar: https://favicon.io/assets/static/favicon.b9532cc.ed88c65f76fa003989a0c683d668c765.png
  link: https://favicon.io/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 设计

设计师导航

图库、灵感、工具、素材、配色等

配色生成器

输入一个颜色，生成相应的配色

unDraw免费插画

免费插画，可编辑颜色

logo设计

logo设计，有免费的

logo设计

logo设计，个人比较喜欢

- name: 设计师导航
  desc: 图库、灵感、工具、素材、配色等
  avatar: https://image.uisdc.com/wp-content/uploads/2018/09/nav-dkt-new2018.jpg
  link: https://hao.uisdc.com/
- name: 配色生成器
  desc: 输入一个颜色，生成相应的配色
  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store@master/blog/WX20211219-145201@2x.2j5fe3tm0aw0.webp
  link: https://mycolor.space/
- name: unDraw免费插画
  desc: 免费插画，可编辑颜色
  avatar: https://undraw.co/apple-touch-icon.png
  link: https://undraw.co/illustrations
- name: logo设计
  desc: logo设计，有免费的
  avatar: https://www.designevo.com/templates/designevosite/favicon.ico
  link: https://www.designevo.com/logo-maker/
- name: logo设计
  desc: logo设计，个人比较喜欢
  avatar: https://instantlogodesign.com/img/home/icon-instantlogodesign.svg?v=1
  link: https://instantlogodesign.com/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 其他

Shields徽章

生成动态的数据统计小徽章

树形目录生成器

Tree 树形目录可视化生成器

Nginx配置

高性能、安全、稳定的配置方案

代码片段生成器

生成 VSCode 代码片段

打字训练

英语单词记忆锻炼软件

- name: Shields徽章
  desc: 生成动态的数据统计小徽章
  avatar: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAABE0lEQVR4AWJkAIKkpCQ7TU3NySIiIlosQMCABejbMWAFf//8YXj77vWn27duZWVGz1nKGBYWZiQkJHSIkZGRmwEPCMxiwAt+/fz3/86VL8EAbuiiAKEoiMLwGcHdCQMBiUAlurDErmJ75tmKP8A3oiJyuF6vAxglws+0C5pv81GJaJdzhlWMMJssaaXM3C0CpmSDLAQtgH3BiCIVB2NRMKWEIoXQMBiLgjHGP9nQ+6ZPLgqGgs9xriDovX8A6Jjgw8ZyIigzn5xz+yZ+6O/tsz7Hy8tb/PLlywPAHMOFT/G3LwRc95fxPyerQCojuKwLDLQAGjoJWIzpAw1mw6bB0guHSYyMDBysnO/5hUTTGvM3rQEAI8qCnLiY3O4AAAAASUVORK5CYII=
  link: https://shields.io/
- name: 树形目录生成器
  desc: Tree 树形目录可视化生成器
  avatar: https://devtool.tech/_next/image?url=%2Fassets%2Flogo.svg&w=96&q=75
  link: https://devtool.tech/tree
- name: Nginx配置
  desc: 高性能、安全、稳定的配置方案
  avatar: https://www.digitalocean.com/assets/community/apple-icon-120x120-052cdf68a3af8b01c3fd0d46ed35f8f089c10c690109d20e7b186f0159391863.png
  link: https://www.digitalocean.com/community/tools/nginx?global.app.lang=zhCN#top
- name: 代码片段生成器
  desc: 生成 VSCode 代码片段
  avatar: https://snippet-generator.app/favicon.ico
  link: https://snippet-generator.app/
- name: 打字训练
  desc: 英语单词记忆锻炼软件
  avatar: https://qwerty.kaiyi.cool/favicon.ico
  link: https://qwerty.kaiyi.cool/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Theme by Vdoing | Copyright © 2023-2025 北京嘉禾云网科技有限公司