vue3使用@vueup/vue-quill

### 安装依赖

为了在 Vue 3 项目中使用 `@vueup/vue-quill` 富文本编辑器，首先需要安装必要的 npm 包：

npm install @vueup/vue-quill

### 创建组件并引入 Quill 编辑器

创建一个新的 Vue 组件来封装 `@vueup/vue-quill` 的功能。下面是一个简单的例子展示如何实现这一点。

#### QuillEditor.vue 文件内容如下:

<template>
  <div class="quill-editor">
    <!-- 使用 quill editor -->
    <QuillEditor theme="snow"/>
  </div>
</template>

<script setup lang="ts">
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css' // 引入样式文件
</script>

<style scoped>
.quill-editor {
  margin-top: 20px;
}
</style>

这段代码展示了如何通过 `<QuillEditor>` 标签引入富文本编辑器，并指定了主题为 "snow"[^1]。

### 将组件集成到页面中

接下来，在应用的主要布局或其他任何地方注册这个新创建的组件，并将其作为子组件嵌套进去。

<!-- App.vue 或其他父级组件 -->
<template>
  <div id="app">
    <h1>我的博客文章</h1>
    <QuillEditor />
  </div>
</template>

<script setup lang="ts">
// 注册局部组件
import QuillEditor from './components/QuillEditor.vue';
</script>

这样就完成了基本配置，现在可以在应用程序中看到并操作 Quill 编辑器了。