Vue3-emoji 怎么引入正确挂载在 vue 实例上

在Vue3中引入和挂载Vue3-emoji插件通常涉及以下几个步骤：

1. **安装插件**：首先你需要通过npm或yarn将`vue3-emoji`添加到你的项目依赖中。在命令行中输入：

   npm install vue3-emoji 或者 yarn add vue3-emoji

2. **导入并导出组件**：然后在你的主入口文件`main.js`或`src/main.js`中导入组件，并将其导出以便在其他文件中使用。示例：

   import VueEmoji from 'vue3-emoji';

   // 如果你是按需引入，可以考虑使用
   // import { VueEmoji } from 'vue3-emoji'; 

   export default Vue.extend({
     components: {
       VueEmoji,
     },
   });

3. **注册组件**：在`App.vue`或其他Vue组件中，你需要创建一个新的Vue实例并注册包含Vue3-emoji的组件。这一步通常在`<script>`部分进行：

   <template>
     <div id="app">
       <!-- 其他内容 -->
       <VueEmoji :options="yourEmojiOptions" /> <!-- 使用插件的地方 -->
     </div>
   </template>

   <script>
   import Vue from 'vue';
   import App from './App.vue';
   import VueEmoji from '@/components/VueEmoji'; // 如果你把组件移到了单独的文件

   export default {
     name: 'App',
     components: {
       VueEmoji,
     },
     data() {
       return {
         yourEmojiOptions: {} // 根据需要提供配置项
       };
     },
   };
   </script>

确保`yourEmojiOptions`中有正确的配置，如字体路径或表情列表。

4. **启动应用**：最后，在你的打包构建脚本（如`build`或`serve`）中启动应用，让Vue实例加载并挂载Vue3-emoji组件。

现在，你应该能够在页面上看到Vue3-emoji的表情了。如果你遇到问题，可以在Vue的开发者工具中检查组件的状态，看是否有加载错误。