Estoy tratando de descubrir cómo cambiar los componentes de elementu-ui a element-plus. Parte de mi migración de vue 2 a vue 3. Encuentro que la documentación no está clara sobre cómo registrar componentes en vue 3 en el archivo main.js.
este es el error que me sale
"export 'Tree' was not found in 'element-plus' warning in ./src/main.js "export 'default' (imported as 'Vue') was not found in 'vue'Aquí está mi archivo main.js
import Vue, { createApp, h } from 'vue' import Vue, { createApp, h } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import { Button, Select, Option, Dropdown, TableColumn, Checkbox, Badge, Divider, Tag, DropdownItem, Pagination, Table, DropdownMenu, Tree, Tooltip, } from 'element-plus' import lang from 'element-plus/lib/locale/lang/en' import locale from 'element-plus/lib/locale' const getCookieConsent = localStorage.getItem('Cookie acceptance') if (typeof getCookieConsent !== 'undefined' && getCookieConsent === 'true') { FullStory.init({ orgId: '14C6AX' }) Vue.prototype.$FullStory = FullStory } locale.use(lang) Vue.component(Tree.name, Tree) Vue.component(Button.name, Button) Vue.component(Divider.name, Divider) Vue.component(Checkbox.name, Checkbox) Vue.component(Pagination.name, Pagination) Vue.component(Tag.name, Tag) Vue.component(Badge.name, Badge) Vue.component(Table.name, Table) Vue.component(TableColumn.name, TableColumn) Vue.component(Select.name, Select) Vue.component(Dropdown.name, Dropdown) Vue.component(DropdownItem.name, DropdownItem) Vue.component(DropdownMenu.name, DropdownMenu) Vue.component(Tooltip.name, Tooltip) Vue.component(Option.name, Option) createApp({ render: () => h(App) }).use(router).use(store).mount('#app')En Vue 3, no es posible (o al menos no debería hacerse de esa manera) registrar componentes globalmente. Debe crear una aplicación Vue usando createApp y luego registrar componentes para esta aplicación.
Además, la documentación de element-plus explica todo lo que necesita saber para importar sus componentes.
// main.js import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' // Create your Vue 3 app const app = createApp(App) // Choice #1: register all components. Impacts global bundle size app.use(ElementPlus, { // options }) app.mount('#app')Si desea utilizar la sacudida de árboles, simplemente importe los componentes cuando los necesite:
// my-component.vue // Choice #2: import and register components as you need them import { ElTree } from 'element-plus' export default { components: { ElTree } } Intente importar todos los componentes con el prefijo El , aparentemente se exportan de esta manera.
Actualicé mi paquete y el código anterior ya no funciona. Por fin modifiqué algo de código y funciona. 1, eliminar vite.config.js
{ libraryName: 'element-plus', libraryDirectory: 'es', style(name) { return `element-plus/theme-chalk/${name}.css`; }, } ]) 2, main.js el use(component) para eliminar. Cambiar a:
import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' app.use(ElementPlus, { // options }) app.component("ElSubmenu", ElMenu.SubMenu); // ElSubmenu seems special to register like this