element-plus-nuxt-starter
element-plus-nuxt-starter copied to clipboard
能否添加动态导入组件的演示?
阅读 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 失效了,项目编译正常,需要每次手动点击浏览器的刷新按钮才能更新界面。 谢谢🙏
Nuxt 似乎有自己的自动组件注册机制,我们可能不再需要 unplugin-vue-components
,而需要书写一下自定义的解析。
或者你应该尝试一下 unplugin-vue-components/nuxt
,而非 unplugin-vue-components/vite
。
等待 Nuxt 发布正式版后,我们会尝试给出一个最佳方案。
上面的几个方案都试了下,都没弄成。 现在有解决方案了吗?
I have the same problem and am waiting for an optimal solution here.
@YunYouJun 正式版发布了!!!
Got it, working on it.