能否添加动态导入组件的演示？

maicss commented 2 years ago

阅读 Element Plus 文档后的设置：

import { defineNuxtConfig } from 'nuxt'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import IconsResolver from "unplugin-icons/resolver"

const lifecycle = process.env.npm_lifecycle_event

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  meta: {
    title: 'Element Plus + Nuxt 3',
    meta: [
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'ElementPlus + Nuxt3',
      },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },
  build: {
    transpile: [
      lifecycle === 'build' || lifecycle === 'generate' ? 'element-plus' : '',
      'element-plus/es'
    ],
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
  vite: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        dts: true,
        resolvers: [
          ElementPlusResolver({ ssr: true }), 
          IconsResolver({})
        ],
      }),
    ],
  },
  modules: [
    '@nuxt/content', '@vueuse/nuxt',
  ],
  nitro: {
    plugins: [
      // "~/database/index.ts",
    ]
  },
  css: [
    '~/styles/index.scss'
  ]
})

能正常根据项目需要，生成components.d.ts:

// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'

export {}

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    ElButton: typeof import('element-plus/lib')['ElButton']
    ElColorPicker: typeof import('element-plus/lib')['ElColorPicker']
    ElDialog: typeof import('element-plus/lib')['ElDialog']
    ElForm: typeof import('element-plus/lib')['ElForm']
    ElFormItem: typeof import('element-plus/lib')['ElFormItem']
    ElIcon: typeof import('element-plus/lib')['ElIcon']
    ElInput: typeof import('element-plus/lib')['ElInput']
    ElOption: typeof import('element-plus/lib')['ElOption']
    ElRadioButton: typeof import('element-plus/lib')['ElRadioButton']
    ElRadioGroup: typeof import('element-plus/lib')['ElRadioGroup']
    ElSelect: typeof import('element-plus/lib')['ElSelect']
    ElTextarea: typeof import('element-plus/es')['ElTextarea']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
}

但是 hot reload 失效了，项目编译正常，需要每次手动点击浏览器的刷新按钮才能更新界面。谢谢🙏