第三方插件

⭐⭐⭐⭐⭐

截止目前主要是用到了以下四个插件。

Naive UI

一款支持Vue3的组件库，超过80个组件，可在线编辑自己喜欢的主题，支持 TypeScript。
使用示例：

<template>
  <n-button type="primary" @click="goToLogin">
    <Icon class="icon" name="ri:login-box-line"></Icon>
    <span>去登录</span>
  </n-button>
</template>
<script setup>
  import { NButton, useMessage } from 'naive-ui'
  const message = useMessage()
  onMounted(() => {
    message.success('成功的消息提示')
    message.error('失败的消息提示')
  })
</script>

具体请看组件文档

---

WARNING

下列组件在 SSR 场景中存在一些 Bug，使用时请尽量规避

• n-anchor
• n-avatar-group
• n-watermark
• n-affix
• n-transfer

此部分请看：https://www.naiveui.com/zh-CN/light/docs/ssr

---

DANGER

如果你想在 setup 外使用 useDialog、useMessage、useNotification、useLoadingBar，可以通过 createDiscreteApi 来构建对应的 API。

import { createDiscreteApi } from "naive-ui"
const { message, dialog, notification, loadingBar } = createDiscreteApi(["message", "dialog", "notification", "loadingBar"])
message.warning('消息提示')

此部分请看：https://www.naiveui.com/zh-CN/os-theme/components/discrete

@kangc/v-md-editor

为了与后台编辑时展示的效果一致，选择用后台同款 markdown 插件，这里主要用到该插件的 VMdPreviewHtml组件渲染 HTML 文档。

示例代码：

<template>
  <v-md-preview-html ref="preview" :html="articleInfo.content" preview-class="vuepress-markdown-body" @copy-code-success="handleCopyCodeSuccess"></v-md-preview-html>
</template>

<script setup>
  function handleCopyCodeSuccess(code) {
    message.success('复制成功')
  }
</script>

更多信息请看这里：@kangc/v-md-editor

vue3-video-play

这是一款支持Vue3的视频播放插件，支持 MP4/WebM/Ogg 格式 配置强大，UI 还算好看。

示例代码：

<template>
  <Video
    :autoPlay="false"
    width="600px"
    height="400px"
    :src="videoSrc"
    :controlBtns="controlBtns"
  />
</template>

<script setup>
  const videoSrc = ref('')

  // 定义需要显示的控制按钮
  const controlBtns = ref([
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    "fullScreen"
  ])
</script>

更多信息请看这里：vue3-video-play

效果图：

zhihu-particle

这是一款来自知乎的粒子效果插件。

示例代码：

onMounted(() => {
  // 引入粒子效果
  const { $Particle } = useNuxtApp()
  const obj = {
    atomColor: '#c0d1d1',
    interactive: false,
    density: 'low'
  }
  new $Particle(document.getElementById('canvas-wrapper'), obj)
})

更多信息请看这里：zhihu-particle

效果图：