开发过程中安装的依赖包

axios

• 安装 npm install axios
• 导入 import axios from 'axios'
• 使用:

点击查看代码

import axios from 'axios'
const request = axios.create({
    // 配置接口请求的基准路径
    baseURL: 'http://xxxxxxxxx',
    timeout: 5000,//超时
})

export default request;

element-plus(vue3)

• 安装 npm install element-plus --save
• 导入

  import ElementPlus from 'element-plus'
  import 'element-plus/dist/index.css'
  app.use(ElementPlus)
  

vue 借助插件js-table2excel 实现导出excel，并导出图片到excel

• 安装 npm install js-table2excel（yarn add js-table2excel）
• 导入 import table2excel from 'js-table2excel'
• 使用：

点击查看代码

exportToExcel() {  //导出excel表
      const self = this
      let tableColumn = [{
        title: 'ID',
        key: 'id',
        type: 'text'
      }, {
        title: '姓名',
        key: 'name',
        type: 'text'
      }, {
        title: '性别',
        key: 'gender',
        type: 'text'
      }, {
        title: '证件照',
        key: 'id_photo',
        type: 'image'
      }, {
        title: '日期时间',
        key: 'createdtime',
        type: 'text'
      }]
      let tableData = []
      self.dataSource.map((item) => {
        tableData.push({
          id: item.id,
          name: item.name,
          gender: item.gender,
          id_photo: window.webServeURL + '/' + item.id_photo,
          createdtime: item.createdtime,
        })
      })
      let tableName = '人脸识别数据库'
      // console.log(tableData);
      table2excel(tableColumn, tableData, tableName)
    },

前端导出excel（基于Blob.js和 Export2Excel.js做前端导出）

• 安装：

  • npm install -S file-saver
  • npm install -S xlsx
  • npm install -D script-loader

• 下载导入Blob.js和 Export2Excel.js

  • 将blob.js与Export2Excel.js放在同一个文件夹下（vendor）

  • 在Export2Excel.js文件中引入blob.js

    • require('script-loader!file-saver'); //保存文件用
    • require('./Blob.js'); //转二进制用
    • require('script-loader!xlsx/dist/xlsx.core.min'); //xlsx核心

  • 使用

点击查看代码

exportToExcel() { //导出
      const self = this
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [  // Excel表头
           '序号',
           '类型',
           '级别',
           '对象索引',
           '描述',
           '日期时间'
        ]
        const dataVal = [  // 对应的数据数组的字段名
          'sequence',
          'type',
          'level',
          'objID',
          'desc',
          'time'
        ]
        excel.export_json_to_excel2(tHeader, self.tableData, dataVal, '日志列表')
      })
    },

删除控制台打印（console）

• 安装：npm install bable-plugin-transform-remove-console-D

• 使用：babel.config.js文件中：

  点击查看代码

  ``` const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) const plugins = [] if (IS_PROD) { // plugins.push('transform-remove-console') }

  // lazy load ant-design-vue
  plugins.push(['import', {
  'libraryName': 'ant-design-vue',
  'libraryDirectory': 'es',
  'style': true // style: true 会加载 less 文件
  }])

  module.exports = {
  presets: [
  '@vue/cli-plugin-babel/preset',
  [
  '@babel/preset-env',
  {
  'useBuiltIns': 'entry',
  'corejs': 3
  }
  ]
  ],
  plugins
  }

  </details>
  
  
  

FileSaver.js文件下载到本地

npm inatall file-saver --save
import {saveAs} from 'file-saver'

• 保存文件var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"}); saveAs(file);

echarts(v5版本)

• echartsV5文档: https://echarts.apache.org/handbook/zh/get-started/#

npm install echarts --save
import * as echarts from 'echarts'

@jiaminghi/data-view(大屏数据可视化开源组件)

• 官网: http://datav.jiaminghi.com/guide/

//安装（npm，yarn）
npm install @jiaminghi/data-view
yarn add @jiaminghi/data-view

// 引入（main.ts）：
//全局引入：将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
//按需引入
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)

//使用（.vue文件）:直接复制标签使用
<dv-border-box-1></dv-border-box-1>

ts-node简化运行

• 安装：npm i -g ts-node
• 使用：ts-node index.ts
• ts-node命令在內部偷偷的将TS->JS,然后，再运行JS代码。

vue3 中写tsx @vitejs/plugin-vue-jsx

• 安装:npm install @vitejs/plugin-vue-jsx -D
• 配置（vite.config.ts ）:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vueJsx()]
})

• 修改tsconfig.json 配置文件:

    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",

前端自动化工具--plop

• 项目本地安装:npm i plop -D
• 使用：
  • 在项目跟目录下创建一个plopfile.js文件
  • 编写用于生成特定类型文件的模板
  • 通过Plop提供的CLI运行脚手架任务

mitt.js进行组件通信（vue3）

• 安装: npm install --save mitt;
• 引入:

  //1,main.js挂载到全局
  // 标准的ES模块化引入方式
  import mitt from 'mitt'
  const app = createApp(App)
  // vue3.x的全局实例，要挂载在config.globalProperties上
  app.config.globalProperties.$EventBus = new mitt()
  //2,封装一个ES模块，对外暴露一个Mitt实例,新建文件EventBus.js
  import mitt from 'mitt'
  export default new mitt()
  

• 使用:

点击查看代码

 //vue文件中通过on监听,通过emit触发,通过off移除监听事件,all.clear清空所有事件
  import EventBus from '/common/EventBus.js'
  // setup中没有this，需要通过getCurrentInstance来获取Vue实例
  import { getCurrentInstance } from 'vue'
  export default {
  setup(){
    const { ctx } = getCurrentInstance().appContext.config.globalProperties
    // on监听
    ctx.on('Event', res => {
	  // res 就是emit传过来的数据
      console.log(res)
    })
	//emit触发
	const onclick = () => {
      ctx.emit('Event', { a: 'b' })
    }
    // 也可以通过*监听所有任务
    ctx.on('*', (type, res) => {
      console.log(type, res)
    })
	//off移除
	Bus.off('Event');
	//清空所有事件
	Bus.all.clear();
  }
}

vite-plugin-dts 插件来实现打包时自动生成类型声明文件（vue3）

• 一个 Vue3 + TypeScript 的项目，自然不能少了自动生成类型声明文件, 如果引入你的组件项目是由TS构建的，但你却没有对项目打包自动生成文件声明，那么会出现组件引入的类型报错;
• 安装:npm i -D vite-plugin-dts
• 引入: Vite 配置文件中添加插件(vite.config.ts)

 import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts'

export default defineConfig(
{build: {
lib: {
entry: 'src/index.ts',
formats: ['cjs', 'es']},
rollupOptions: {external: ['vue']}
},
plugins: [
vue(),
dts({ 
insertTypesEntry: true, 
copyDtsFiles: false 
})
]
}
) 

Blockly搭积木式可视化编程

npm install --save blockly
import Blockly from 'blockly';

• 在.vue单文件的script中 引入

点击查看代码

// 引入Blockly
import Blockly from'blockly'
// 引入想要转换的语言，语言有php python dart lua javascript
import 'blockly/javascript'
// 引入语言包并使用
import * as hans from 'blockly/msg/zh-hans'
Blockly.setLocale(hans);
//引入媒体文件：我是在github上下载的blockly源码，将源码中的media文件放入我项目中的public文件夹下
//忽略被vue错认为组件的blockly中的标签，不止以下这些，请发现一个忽略一个
import Vue from'vue'
Vue.config.ignoredElements.push('xml')
Vue.config.ignoredElements.push('block')
Vue.config.ignoredElements.push('field')
Vue.config.ignoredElements.push('category')
Vue.config.ignoredElements.push('sep')
Vue.config.ignoredElements.push('value')
Vue.config.ignoredElements.push('statement')
Vue.config.ignoredElements.push('mutation')

• 在.vue单文件的template中确定引入位置并添加工具栏

点击查看代码

<!-- blockly工作区 -->
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<!-- blockly工具栏 -->
</xml id="toolbox" style="display: none">
  <category name="逻辑" colour="%{BKY_LOGIC_HUE}">
      <block type="controls_if"></block>
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_negate"></block>
      <block type="logic_boolean"></block>
  </category>
  <sep></sep>
  <category name="数学" colour="%{BKY_MATH_HUE}">
    <block type="math_number">
        <field name="NUM">123</field>
    </block>
    <block type="math_arithmetic"></block>
    <block type="math_single"></block>
  </category>
</xml>
<!-- blockly代码区 -->
<textarea name="" id="textarea" cols="30" rows="10"></textarea>

• 在.vue单文件的script中创建blockly工作区

点击查看代码

this.workspace = Blockly.inject('blocklyDiv',
  {
    //工具栏
    toolbox: document.getElementById('toolbox'),
    //网格效果
    grid:{spacing: 20,length: 3,colour: '#ccc',snap: true},
    //媒体资源
    media: './media/',
    //垃圾桶
    trashcan: true
  }
);
//工作区监听代码生成器
this.workspace.addChangeListener(this.myUpdateFunction);

methods:{
    // 代码生成器
    myUpdateFunction(event){
        var code = Blockly.JavaScript.workspaceToCode(this.workspace);
        document.getElementById('textarea').value = code;
    },
    // 获取blockly工作区中的code和xml结构
    getBlockData(){
      const code = Blockly.JavaScript.workspaceToCode(this.workspace);
      const xml = Blockly.Xml.workspaceToDom(this.workspace)
      const xmlText = Blockly.Xml.domToText(xml);
    },
    // 回显工作区中的xml结构
    setBlockData(xmlText){
      this.clearBlockData();
      const xml = Blockly.Xml.textToDom(xmlText);
      Blockly.Xml.domToWorkspace(xml, this.workspace);
    },
    // 清空工作区
    clearBlockData(){
      this.workspace.clear();
    },
}

Blockly自定义块插件fixed-edges

npm install @blockly/fixed-edges

• 在.vue单文件的script中 引入

点击查看代码

import * as Blockly from 'blockly';
import {FixedEdgesMetricsManager} from '@blockly/fixed-edges';//导入插件
// 配置插件属性，固定左上角
FixedEdgesMetricsManager.setFixedEdges({
  top: true,
  left: true,
});

//注入blockly
const workspace = Blockly.inject('blocklyDiv', {
  toolbox: toolboxCategories,
  //配置插件
  plugins: {
    metricsManager: FixedEdgesMetricsManager,
  },
});

js解析器js-interpreter

npm install js-interpreter
import Interpreter from "js-interpreter";

基于vue的表格组件：vxe-table

• 官网：https://vxetable.cn/#/table/start/install
• 下载：npm install --save vxe-table

vue工具库：vueuse

• 下载：npm install @vueuse/core

富文本编辑器：tinymce

• 下载：

npm install @tinymce/tinymce-vue
npm install tinymce

为现代浏览器解析、验证、操作和显示日期和时间：Day.js

• 下载：npm install dayjs

实现base64格式转换：js-base64

• 下载：npm install --save js-base64

处理cookie：js-cookie

• 下载：npm install --save js-cookie

富文本编辑器：wangeditor/editor-for-vue

• 下载：npm install --save @wangeditor/editor-for-vue

功能强大的JavaScript 拖拽库:sortable.js

• 下载：npm install sortablejs --save

轻量级数字滚动动画特效插件:CountUp.js

• 下载：npm install countup.js

日历插件：vue FullCalendar

• 下载：npm install --save @fullcalendar/vue

图片裁剪操作插件库:Cropper.js

• 下载：npm install cropperjs

JS算法加密库：crypto-js

• 下载：npm install crypto-js

JS生成条形码：jsBarcode

• 下载：npm install jsbarcode

vue3兄弟组件传值方式：mitt.js

• 下载：npm install mitt.js

JS日期处理类库:Moment.js

• 下载：npm install moment

MD5加密:md5.js

• 下载：npm install md5

vue项目的多语言/国际化插件:vue-i18n

• 下载：npm install vue-i18n

JS函数库、工具类：xe-utils

• 下载：npm install xe-utils

带有解析器的Web视频播放器:xgplayer

• 下载：npm install xgplayer

XLSX数据转换的JS库:xlsx.js

• 下载：npm install xlsx

Markdown编辑器：ByteMd

• 下载：npm install @bytemd/vue