nuxt3 使用element plus

Nuxt.js 3.x版本是一个基于Vue.js的框架，用于构建服务器端渲染（SSR）、客户端渲染（CSR）和 Progressive Web App (PWA) 的现代Web应用。Element Plus是Element UI的一个增强版，它提供了一套响应式的、轻量级的Vue组件库。

要在Nuxt 3中集成Element Plus，你需要做以下几个步骤：

1. **安装依赖**：

   npm install @nuxtjs/composition-api
   npm install element-plus vue@next

`@nuxtjs/composition-api`是Nuxt 3推荐的API访问方式，而`vue@next`是为了匹配Element Plus的版本。

2. **配置Nuxt.config.js**：

   import { defineNuxtConfig } from '@nuxtjs/composition-api'
   
   export default defineNuxtConfig({
     buildModules: ['@nuxtjs/composition-api'],
     plugins: [
       { src: '~/plugins/element-plus', ssr: true }, // 如果你想在服务端也加载Element Plus
     ],
     components: {
       '/': 'App',
     },
     app: {
       config: {
         imports: {
           ElementPlus: () => import('element-plus')
         }
       }
     }
   })

3. **引入并使用Element Plus组件**：
在`.vue`文件中，你可以像使用Vue官方组件一样导入和使用Element Plus组件：

   <template>
     <el-container>
       <el-header>Header</el-header>
       <el-main>Main Content</el-main>
       <el-footer>Footer</el-footer>
     </el-container>
   </template>

   <script setup lang="ts">
   import { ref } from 'vue'
   import { ElContainer, ElHeader, ElMain, ElFooter } from 'element-plus'

   const app = ref(null)
   </script>