NUXT3笔记-使用NutUI

1. 首先在你的 Nuxt 3 项目中安装 NutUI：

   npm install nutui --save
   

2. 在 nuxt.config.js 中配置 NutUI 插件：

   // nuxt.config.js
   
   export default {
     ...
     plugins: [
       {
         src: '@/plugins/nutui',
         mode: 'client', // 将插件应用于客户端
       },
     ],
     ...
   };
   

3. 创建并编辑 ~/plugins/nutui.js 插件文件：

   import { createApp } from 'vue';
   import NutUI from 'nutui';
   
   export default function (context) {
     if (process.server) return; // 仅在客户端执行
   
     const app = createApp(context.app);
   
     app.use(NutUI);
   }
   

4. 您可以选择全局导入 NutUI 的样式，通过在 nuxt.config.js 文件中的 CSS 根项目中添加 CSS 引用：

   // nuxt.config.js
   
   export default {
     ...
     css: ['nutui/dist/styles/index.scss'],
     ...
   };
   

5. 现在你已经完成了 NutUI 的集成，你可以在你的 Nuxt 3 组件中像使用其他组件库一样调用 NutUI 的组件：

   <template>
     <div>
       <!-- NutUI的Button组件 -->
       <n-button @click="handleClick">点击我</n-button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
       handleClick() {
         // 处理点击事件
       },
     },
   };
   </script>
   

这是一个精简的示例，您可以查看 NutUI 的官方文档以获取更多关于使用 NutUI 的详细信息和指导。