Nuxt3 ts 项目怎么下载element-plus

要在 Nuxt3 TypeScript 项目中使用 Element Plus，需要先安装 Element Plus 和 Vue 3：

npm install element-plus vue@next --save

然后在你的 Nuxt3 TypeScript 项目中，在 `nuxt.config.ts` 文件中添加以下内容：

import { NuxtConfig } from '@nuxt/types';

const config: NuxtConfig = {
  // ...
  head: {
    // ...
    script: [
      {
        src: 'https://unpkg.com/vue@next',
        type: 'text/javascript',
        body: true,
      },
    ],
  },
  css: [
    'element-plus/theme-chalk/el-icon.css',
    'element-plus/theme-chalk/index.css',
  ],
  plugins: [{ src: '~/plugins/element-plus.ts', ssr: false }],
};

export default config;

在 `plugins` 目录下创建一个新的文件 `element-plus.ts`，并添加以下内容：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

export default function (context, inject) {
  const app = createApp(context.app);
  app.use(ElementPlus);
  context.app = app;
  inject('message', ElementPlus.ElMessage);
}

现在你可以在项目中使用 Element Plus 了，例如：

<template>
  <el-button @click="showMessage">显示消息</el-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    showMessage() {
      this.$message({
        message: '这是一条消息',
        type: 'success',
      });
    },
  },
});
</script>