1. 剪切板 （Clipboard）

参考地址：Clipboard

• 安装

npm install clipboard
or
yarn add Clipboard

• 作用： 实现复制粘贴的功能

• 方法封装：此处是结合了 Vant组件

clipboard.js

import Clipboard from 'clipboard'
import { Notify } from 'vant'

function clipboardSuccess() {
  Notify({
    message: '复制成功！',
    type: 'success',
    duration: 1500
  })
}

function clipboardError() {
  Notify({
    message: '复制失败！',
    type: 'danger',
    duration: 1500
  })
}

export default function handleClipboard(text, event) {
  const clipboard = new Clipboard(event.target, {
    text: () => text
  })

  clipboard.on('success', () => {
    clipboardSuccess()
    clipboard.off('danger')
    clipboard.off('success')
    clipboard.destroy()
  })

  clipboard.on('danger', () => {
    clipboardError()
    clipboard.off('danger')
    clipboard.off('success')
    clipboard.destroy()
  })

  clipboard.onClick(event)
}

示例：以 vue3 和 vant 组件为例

<template>
    <van-button @click="handleClipboard(msg, $event)">点击复制</van-button>
</template>

<script setup>
    import { ref } from 'vue'
    import handleClipboard from '@/utils/clipboard'
    const msg = ref('Clipboard')
</script>

2.时间格式化（Day.js）

参考地址：Day.js

• 安装

npm install dayjs
or
yarn add dayjs

• 作用： 对时间进行格式化

示例：

let dayjs = require('dayjs')
let times = 1318781876406 // 时间戳
dayjs(times).format("YYYY-MM-DD HH:mm:ss")

3.引导（driver）

参考地址: driver

• 安装

npm install driver.js
or
yarn add driver.js

• 作用： 引导用户操作说明

示例：

<template>
  <div id="guide" @click="handleGuide"></div>
</template>

<script setup>
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import { onMounted } from 'vue'
  
onMounted(() => {
  initDriver()
})
  
const steps = () => [
  {
    element: '#guide',
    popover: {
      title: 'driver.guideBtn',
      description: 'Body of the popover',
      position: 'left'
    }
  }
]
  
const initDriver = () => {
  driver = new Driver({
    className: 'scoped-class',        // className to wrap driver.js popover
    animate: true,                    // Whether to animate or not
    opacity: 0.75,                    // Background opacity (0 means only popovers and without overlay)
    padding: 10,                      // Distance of element from around the edges
    allowClose: true,                 // Whether the click on overlay should close or not
    overlayClickNext: false,          // Whether the click on overlay should move next
    doneBtnText: 'Done',              // Text on the final button
    closeBtnText: 'Close',            // Text on the close button for this step
    stageBackground: '#ffffff',       // Background color for the staged behind highlighted element
    nextBtnText: 'Next',              // Next button text for this step
    prevBtnText: 'Previous',          // Previous button text for this step
    showButtons: false,               // Do not show control buttons in footer
    keyboardControl: true,            // Allow controlling through keyboard (escape to close, arrow keys to move)
    scrollIntoViewOptions: {},        // We use `scrollIntoView()` when possible, pass here the options for it if you want any
    onHighlightStarted: (Element) => {}, // Called when element is about to be highlighted
    onHighlighted: (Element) => {},      // Called when element is fully highlighted
    onDeselected: (Element) => {},       // Called when element has been deselected
    onReset: (Element) => {},            // Called when overlay is about to be cleared
    onNext: (Element) => {},                    // Called when moving to next step on any step
    onPrevious: (Element) => {},                // Called when moving to previous step on any step
  })
}

const handleGuide = () => {
  driver.defineSteps(steps)
  driver.start()
}
  
</script> 

4.全屏模式（screenfull）

参考地址: screenfull

• 安装

npm install screenfull
or
yarn add screenfull

• 作用： 实现全屏模式

示例：

<template>
    <button @click="click">全屏</button>
</template>
<script>
  import screenfull from "screenfull"
  export default {
    methonds: {
      click() {
        if (!screenfull.enabled) {
          this.$message({
            message: "不支持全屏",  
            type: "warning"
          });
          return false;
        }
        screenfull.toggle();
      }
    }
  }
</script>

5.消息发布与订阅（pubsub-js）

参考地址：pubsub-js

• 安装

npm install pubsub-js
or
yarn add pubsub-js

• 作用： 消息发布与订阅

示例：

a.js

import PubSub from 'pubsub-js'

//发送请求前通知List更新状态
PubSub.publish('atguigu',{isFirst:false,isLoading:true})

b.js

import PubSub from 'pubsub-js'
import { onMounted, onUnmounted } from 'vue'
  
onMounted(() => {
  this.token = PubSub.subscribe('atguigu',(_,stateObj)=>{
    this.setState(stateObj)
  })
})

onUnmounted(() => {
  PubSub.unsubscribe(this.token)
})

6.生成随机值/唯一值（nanoid）

参考地址：nanoid

• 安装

npm install nanoid
or
yarn add nanoid

• 作用： 生成随机值/唯一值

示例：

import {nanoid} from 'nanoid'

id = nanoid()

7.加密/解密（md5）

参考地址：md5

• 安装

npm install js-md5
or
yarn add js-md5

• 作用： 加密/解密

示例：

import md5 from 'js-md5'

let password = '123456'
let passWordMd5 = md5(passwordpassword)

8.模拟生产环境下的服务器（serve）

参考地址：serve

• 安装

npm install serve -g
or
yarn add serve -g

• 作用： 模拟服务器，实现vue打包项目的部署运行

示例：

serve "文件夹名称"