Question

在 main.js vue 3 中的 element plus 中添加 element-ui 组件

2022-05-28

3205

javascript vue.js vuejs3

我正在尝试弄清楚如何将 elementu-ui 组件更改为 element-plus。这是我从 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 应用，然后为该应用注册组件。

此外， element-plus 文档解释了导入其组件所需了解的所有内容。

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

如果您想使用 treeshaking，只需在需要时导入组件即可：

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