依赖

npm i nodemon -g

监听指定文件

nodemon xx.js

监听默认文件 - 自动监听配置文件 package.json 里 main 字段指定的文件；默认是 index.js

nodemon

也可以修改 scripts，执行特定命令

"scripts": {
  "server": "nodemon app.js"
}

npm server

npm install nanoid -S

import {nanoid} from 'nanoid'

//默认长度 - 21
nanoid()
//指定长度 - 8
nanoid(8)      

npm install md5js

import { md5 } from 'md5js';

console.log(md5('message'));    //16位；默认
console.log(md5('message',32)); //32位

读取文件流 - XLSX.read(data, read_opts) attempts to parse data.

读取文件 - XLSX.readFile(filename, read_opts) attempts to read filename and parse.

. 表格到表单 - XLSX.utils.table_to_sheet(table) - XLSX.utils.table_to_sheet takes a table DOM element and returns a worksheet resembling the input table. Numbers are parsed. All other data will be stored as strings.

. 表格到工作簿 - XLSX.utils.table_to_book(table) - XLSX.utils.table_to_book produces a minimal workbook based on the worksheet.

. 表单到JSON - XLSX.utils.sheet_to_json

. 工作簿到文件 - XLSX.writeFile(wb, filename, write_opts)

npm i xlsx -S

import { ref } from 'vue';
import * as XLSX from 'xlsx/xlsx.mjs';

使用<input>的file类型。读入excel文件并解析，最后渲染

let order = ref([])
const selExcel = (e) => {
  const fr = new FileReader()
  fr.readAsArrayBuffer(e.target.files[0])
  fr.onload = (ev) => {
    const res = ev.target.result
    const workbook = XLSX.read(res, { type: "binary" })
    const wsName = workbook.SheetNames[0]
    const sheetJson = XLSX.utils.sheet_to_json(workbook.Sheets[wsName])
    console.log(sheetJson);
    order.value = sheetJson
  }
}

使用ref模板引用获取表格，将其数据并导出为excel

let tbl = ref(null)
const outExcel = () => {
  if (tbl.value) {
    let workbook = XLSX.utils.table_to_book(tbl.value);
    XLSX.writeFile(workbook, "user.xlsx");
  } else {
    console.log("tbl is null");
  }
}        

npm install @wangeditor/editor @wangeditor/editor-for-vue@next --save

import { onBeforeUnmount, shallowRef } from 'vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

还可以进一步对菜单配置，如配置图片上传

const editorRef = shallowRef()  //MUST shallowRef

const mode = 'default'  // 或 simple
const toolbarConfig = {}
const editorConfig = { 
  placeholder: '请输入内容...',
  //图片上传配置 - 指定接口、名称等属性
  MENU_CONF: {
    "uploadImage": {
      server: '/upload/upload/image',
      fieldName: 'image',
      onSuccess(file, res) {
        console.log(`${file.name} 上传成功`, res)
      },
      onFailed(file, res) {
        console.log(`${file.name} 上传失败`, res)
      }
    }
  }
}

// 记录 editor 实例，重要！
const handleCreated = (editor) => {
  editorRef.value = editor
}

// 组件销毁时，要及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

<Toolbar 
  :editor="editorRef" 
  :defaultConfig="toolbarConfig" 
  :mode="mode" />
<Editor 
  v-model="valueHtml" 
  :defaultConfig="editorConfig" 
  :mode="mode"
  @onCreated="handleCreated" />