在main.js vue 3中向元素加号添加元素-ui组件

Question

我正在努力弄清楚如何将元素ui组件更改为元素+。我从vue 2迁移到vue 3的一部分，我发现文档不清楚如何在main.js文件中注册vue 3中的组件。

这就是我所犯的错误

"export 'Tree' was not found in 'element-plus'
warning  in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'

这是我的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')

Answer 1

在Vue 3中，不可能(或者至少不应该这样做)全局注册组件。您必须使用createApp创建一个Vue应用程序，然后为该应用程序注册组件。

此外，元素+文档解释了导入组件所需了解的一切。

// 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')

如果要使用树搜索，只需在需要时导入组件：

// my-component.vue
// Choice #2: import and register components as you need them
import { ElTree } from 'element-plus'

export default {
  components: {
    ElTree
  }
}

尝试导入带有前缀El的所有组件，它们显然是以这种方式导出的。

Answer 2

我更新我的包和以前的代码不再工作了。最后，我修改了一些代码，并使其工作起来。1，vite.config.js 删除

      {
        libraryName: 'element-plus',
        libraryDirectory: 'es',
        style(name) {
          return `element-plus/theme-chalk/${name}.css`;
        },
      }
    ])

2、main.js过去的use(component)去除。改为：

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