# vue2-tool-library

**Repository Path**: shen_xu_he/vue2-tool-library

## Basic Information

- **Project Name**: vue2-tool-library
- **Description**: 用于记录各种库在 vue2 中的安装、使用，及一些特殊场景的demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 3
- **Created**: 2022-08-23
- **Last Updated**: 2025-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue2-tool-libary

# 1.项目介绍

> 该项目是有 vue/cli@5.0.8 构建的 vue2 版本，用于收录安装、使用各种库，及项目基础设施的建设等等
> 项目基本技术栈： vue2 + vuex + vue-router

# 2. element-ui 安装

> 官网：https://element.eleme.cn/#/zh-CN/component/installation

## 2.1 安装

```js
// 1.终端运行
yarn add element-ui

// 2. main.js 全局引入
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

```

# 3.国际化(i18n)

> 项目中使用的是 vue-i18n 插件 兼容 elementUI 框架的国际化方案
> 官网：https://element.eleme.cn/#/zh-CN/component/i18n

## 3.1 安装

```js
// 与elementUI 兼容
// 默认装的是 9x版本，控制台会有报错 似乎是 支持vue3 ,这里使用的是8x 版本
yarn add vue-i18n@^8.26.7
```

## 3.2 配置

- 新建 src/language 文件夹
- 新建 src/language/index.js 并进行相关配置
- 新建 src/language/config/en.js && src/language/config/zh.js 中英文语言包
- 在 main.js 中将 i18n 实例暴露出去, 并挂在在 vue 实例中

## 3.3 使用

- 在 i18n 的具体页面中（src/views/i18n/index.vue）

```js
// 模版中使用
$t("name");

// 修改语言：
this.$i18n.locale = "zh";
```

# 3. scss 安装

> 官网：https://www.sass.hk/  
> 拓展帖子：
> 这里可能会有版本问题，但是我这里没有出现

```js
// 1.终端运行
yarn add sass
yarn add sass-loader
```

## 3.1 scss 语法相关

> 参考帖子：‘’

# 4. vue-treeselect 树形选择

> 官网：https://www.vue-treeselect.cn/

## 4.1 安装

```js
yarn add @riophae/vue-treeselect
```

## 4.2 使用

路径： src/views/package/vuetreeselect/index.vue
根据官网配置即可

# 5. clipboard 剪切板

> 说明： 将文本复制到剪贴板应该不难。它不需要数十个步骤来配置或数百 KB 来加载。但最重要的是，它不应该依赖于 Flash 或任何臃肿的框架。
> 官网： https://github.com/zenorocha/clipboard.js

## 5.1 安装

```js
yarn add clipboard
```

## 5.2 使用

项目路径：

- src/views/package/clipboard/index.vue
  说明：使用的是 函数式写法 感觉更加自由

根据官网说明即可
辅助帖子 1: https://blog.csdn.net/hry2015/article/details/70941912

# 6. echarts 图表

> 官网：https://echarts.apache.org/zh/index.html

## 6.1 安装

```js
yarn add ecahrts
```

## 6.3 使用

项目路径:

- src/mixins/echarts.js 封装了 echarts 自适应、实例销毁，（侧边栏收缩时的自适应，自己去找 dom）
- src/views/package/ecahrts/index.vue 中，按需加载图表，加载 mixin（确保组件内要 chart 实例）
## 6.4 关于echarts 的考量
> 项目中使用了大量的echarts，但是每一个都是单独的 vue 文件去封装使用，每次都要 引入 resize（或者是基于其他dom的resize）、引入主题等等，我在想，能否通过封装一个组件解决这个重复性的问题，但又不让其失去 本身的自由度及特点
> 
### 6.4.1 引入问题<全局 or 局部>
> 全局引入，肯定会使包变的很大，这里就不过多的解读了
> 我更倾向于 局部引入，原本想的是做了一个 echarts 局部引入的 文件，去统一管理，但是这个是很难维护的，因为 项目中多处使用了 某个特性，，当修改了 echarts 的类型 是很难定位到需要删除掉哪个特性，这个只能在文件中去加入 注解，便于后期维护了

### 6.4.2 样式问题
> 很多项目都是 由 UI 设计了一套规范， 然后项目中每个图标都需要按照这个规范去处理，不可能在每个options 配置项中去设置，这样不利于代码维护，
因此使用了 自定义主题，设置了一套默认的样式配置，当然，由于 echarts 本身的特性，options 的局部样式选项是高于 自定义的主题的

### 6.4.3 拓展性问题
> 基于封装的组件，由外部去处理options ，内部支持options 的响应式处理，因为基本的封装不涉及业务及具体的展示形式，因此为了复用性，可能还需要 根据业务进行二次封装，以达到复用的效果
> 组件内部是否需要做响应式，这个还需要考虑业务，目前是通过watch 去处理
> 关于其他特性，比如 事件，动态数据（数据量太大的更新异常），其他的额外的处理，我其实是想 外部去通过 （实例本身或者 重新走一遍 setOption）去解决，这个得具体业务去分析，


# 7 sortablejs 可拖拽（支持移动端）

> 轻量级的可拖拽 js 库

## 7.1 安装

```js
yarn add sortablejs
```

## 7.2 使用

项目路径: - src/views/package/sortablejs/index.vue

该组件实现了 el-table 行列的拖拽
参考帖子 1: https://juejin.cn/post/7059674298528563213

# 8. vue-cropper 图片裁剪

官方文档：https://www.npmjs.com/package/vue-cropper

## 8.1 安装

```js
yarn add vue-cropper
```

## 8.2 使用

项目路径

- src/views/package/vuecropper/index.vue
  说明： 封装了一套 裁剪的基本操作

# 9 mavon-editor md 富文本编辑器

> 功能： 富文本编辑器
> 路径：src/views/package/moavoneditor/index.vue

> 简易上手： https://blog.csdn.net/scarlett1017/article/details/123687729

# 10 screenfull 全屏组件

官网：https://www.npmjs.com/package/screenfull
路径： src/views/screenfull

# 11 伸缩盒子

> 功能：可以拉伸或
> 路径：src/views/package/scalingbox/index.vue
> 组件：src/views/package/scalingbox/component/XHandle.vue

说明: 组件作用是 拉伸边缘控制 盒子宽高， 组件内部用了定位，外部盒子也需要定位去实现，还有相关方向的细节在组件内部有备注

## 12 屏幕适配

> 功能：
> 组件：src/components/ScaleBox

## 13 svg 变色（技巧 非插件）

> 功能：css3 filter:drop-shadow 属性
> 原理： 利用投影，设置投影颜色，将原图隐藏
> 组件：src/components/svg

# 14 jsMind 思维导图

> http://hizzgdev.github.io/jsmind/docs/zh/1.usage.html

> 功能：实现思维导图
> 组件：src/views/jsMind
> 注意 script 标签中引入的样式 是全局样式 ，并不会随着组件销毁而销毁
> 修改库文件-及提供新样式 实现 自定义业务

```
yarn add jsmind
```

# 15 jsencrypt  rsa算法 数据加密与解密

> 密钥对生成 http://web.chacuo.net/netrsakeypair;
> 功能：通过公钥加密，私钥解密 
> 组件：src/views/jsencrypt/ index.vue && jsencrypt.js

```
yarn add jsencrypt
```

# 16 导入 导出 excel 表格
> https://panjiachen.gitee.io/vue-element-admin-site/zh/feature/component/excel.html
> 组件：src/views/excel/exportExcel/ index.vue 
```
npm install xlsx file-saver -S
npm install script-loader -S -D

vue2 的版本 ： npm install xlsx@0.16.0 --save   

```

## 16.1 文件导入功能 
> 目前不支持 多级表头的合并，这个还没开始研究 
> 除了依赖 xlsx file-saver 两个库  还依赖于 excel/vender/Export2Excel.js

## 16.2 文件导出功能
> 基于封装的组件 UploadExcel.vue 组件 由 beforeUpload 和 onSuccess 两个钩子函数共同完成


# 17 仿写element message 方法
> 组件：src/views/message/index.vue 


# 18 lodash 工具库
> 组件：src/views/lodash/index.vue 
> 感觉暂时用到的不多

# 19 自定义指令
> 地址：stc/utils/directive/element/*
  - v-dialogDrag: 弹窗拖拽
  - v-tableFit  自适应？
  - v-preventReClick ： 点击节流 


# 20 v-viewer 图片查看库
> Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作
> 参考：https://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/
> 地址：stc/views/v-viewer/*


# 21 luckySheet 在线excel 表格
> 中文文档：https://dream-num.github.io/LuckysheetDocs/zh/guide/#%E4%BD%BF%E7%94%A8%E6%AD%A5%E9%AA%A4
> vue 示例： https://www.jb51.net/article/258442.htm
## 21.1 luckySheet 引入
> 本地引入方式：本地引入，好处是可以修改样式
> public/static/luckySheet  &   public/index.html
> 后端保存状态结构  https://blog.csdn.net/qq_42745033/article/details/126896069
> 

## 21.2 导出功能
>  依赖于 "file-saver": "^2.0.5"      "exceljs": "^4.3.0"
>  src/luckyExcel/Page/demo02/js/export.js
> 
## 21.3 导入功能
> 依赖于  "luckyexcel": "^1.0.1"  

# 22  IntersectionObserver 交互观察器 实现懒加载
> 路径： src/views/package/IntersectionObserver/index.vue 


# 23 vue 自定义指令

## 23.1 el-dialog 自定义拖拽、拉伸、全屏 以及 el-table 高度自适应问题
> 路径： src/views/package/directive/Page/elementUI/dialogDrag.vue


# 24. 页面导出 word 与 打印 导出pdf
## 24.1 word
> 参考帖子： https://zhuanlan.zhihu.com/p/629449766
> 新增了 处理url类型的图片
> 依赖
>  - "jquery": "^3.7.0"
>  - "file-saver": "^2.0.5",
>  - jquery.wordexport.js  这个是从网上找的源码copy 到项目的
> 说明
> 样式 不可用 flex,position, 部分高度也不好用
> 无法识别上传文件

## 24.2 打印与pdf
> 参考帖子：  https://blog.csdn.net/Maxueyingying/article/details/129183076
> 新增了 处理url类型的图片
依赖
> -   "print-js": "^1.6.0",

## 24.3 前端填充 docx模版 预览文件
> 参考帖子： https://blog.csdn.net/qq_40326609/article/details/132105401
依赖
> yarn add docxtemplater pizzip -D
> yarn add jszip-utils jszip file-saver -S

> 包大小分析
docxtemplater 173kb
pizzip 89.74kb
jszip-utils 4.28kb
jszip 147.4 kb
file-saver 3.46kb
## 24.4 word 预览
> 参考帖子
依赖
> yarn add  docx-preview -S 
包大小分析
> docx-preview 122.7kb