Vue 文章目录

# 一、基础知识系列

# 二、深入系列

# 三、实现方案

# 四、推荐文章系列

# 五、单元测试

# 六、推荐开源项目

# typescript 相关

  1. vue-property-decorator (opens new window)
  2. vue-typescript-admin (opens new window)
  3. vue-class-component (opens new window)
  4. vuex-module-decorators (opens new window)

# 自动化测试工具

# 1. vue-styleguidist (opens new window) (推荐)

# 2. vue-test-utils (opens new window) (推荐)

Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。

# 3. @vue/cli-plugin-unit-jest (opens new window)(推荐)

Vue Cli 的 jest 单元测试插件。默认是包含了以下几个库

# 4. majestic (opens new window) (推荐)

浏览器中显示单元测试结果和代码覆盖率

# 5. jest-html-reporter (opens new window)

Jest 单元测试结果分析

# 工作中使用的开源项目

# 0. leader-line (opens new window) 【十分推荐】

在两个 dom 元素之间连接线段

# 1. vue-grid-layout (opens new window)

vue-grid-layout 是一个类似于Gridster (opens new window)的栅格布局系统, 适用于 Vue.js。 灵感源自于 React-Grid-Layout (opens new window)

  • 可拖拽
  • 可调整大小
  • 静态部件(不可拖拽、调整大小)
  • 拖拽和调整大小时进行边界检查
  • 增减部件时避免重建栅格
  • 可序列化和还原的布局
  • 自动化 RTL 支持
  • 响应式

# 2. Vue.Draggable (opens new window)

列表拖动最佳选择

  • 支持列表元素拖动,滚动
  • 多列表拖动
  • 动画切换
  • 表格列/行拖动

# 3. interact.js (opens new window)

任意元素拖动,最佳选择

  • dom 元素拖动(draggable),设置拖动区(dropzone)
  • 可以在线调整 dom 元素大小(resize)
  • 惯性和对齐
  • 多点触控,同步互动
  • 跨浏览器和设备,支持 Chrome,Firefox 和 Opera 以及 Internet Explorer 9+的桌面和移动版本
  • 与 SVG 元素的交互
  • 是独立的,可定制
  • 不修改 DOM 除了更改光标(但你可以禁用它)

# 4. element-resize-detector (opens new window)

优化的浏览器调整元素大小的侦听器

# 5. monaco-editor (opens new window)

微软在线代码编辑器,最佳选择

# 6. set-webpack-public-path plugin for webpack (opens new window)

解决 webpack 打包 js/image/css,设置不同 publicPath,导致相对路径问题

# 7. vue-cli-plugin-electron-builder (opens new window)(重要)

使用 Vue 开发 Mac,Windows 应用程序

# 8. 流程图绘制

# 9. 移动端调试控制台 eruda

Eruda 是一个专为手机网页前端设计的调试面板,类似 DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、捕获 XHR 请求、显示本地存储和 Cookie 信息等等。 eruda (opens new window)

【未经作者允许禁止转载】 Last Updated: 11/20/2021, 8:33:35 AM