vue3.0不能使用element-ui

### 如何在 Vue 3.0 中兼容或替代使用 Element-UI Element UI 是专门为 Vue 2 设计的组件库，在 Vue 3 发布之后，官方推出了针对 Vue 3 的版本——Element Plus。为了确保最佳性能和功能支持，建议升级至 Element Plus。 #### 安装 Element Plus 要开始使用 Element Plus，可以通过 npm 或 yarn 进行安装： ```bash npm install element-plus --save ``` 或者 ```bash yarn add element-plus ``` #### 使用 Element Plus 组件 完成安装后，可以在项目入口文件 `main.js` 或者 `main.ts` 中引入并注册 Element Plus: ```javascript import { createApp } from 'vue' import App from './App.vue' // 引入整个 ElementPlus 库及其样式表 import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(App); app.use(ElementPlus); // 注册 ElementPlus 插件 app.mount('#app'); ``` 对于按需加载的情况，推荐使用 unplugin-vue-components 和 vite-plugin-style-import 来减少打包体积[^2]: ```javascript // main.ts import { createApp } from 'vue' import App from './App.vue' // 按需导入特定组件而非整个库 import { ElButton, ElMessage } from 'element-plus'; import 'element-plus/packages/theme-chalk/src/button.scss'; // 单独引入所需样式的源码 const app = createApp(App); app.config.globalProperties.$message = ElMessage; app.component('ElButton', ElButton); app.mount('#app'); ``` #### 数据双向绑定 (v-model) 当涉及到数据交互时，如输入框等场景下的 v-model 属性，在 Vue 3 下依然保持一致语法结构。例如父级向子级传递值并通过事件更新状态的方式没有变化[^3]。 ```html <!-- 父组件 --> <template> <div> <el-input v-model="parentMsg" placeholder="请输入"></el-input> </div> </template> <script lang="ts"> export default { data() { return { parentMsg: '' }; } }; </script> ``` ```html <!-- 子组件 ModelTest1.vue --> <template> <div>接收到的信息：{{ info }}</div> </template> <script lang="ts"> export default { props: ['info'], setup(props) {} }; </script> ``` #### 将常用组件设为全局可用 如果某些自定义或第三方组件在整个应用中频繁被调用，则可考虑将其设置成全局组件以便更方便地访问这些资源[^4]。 ```typescript // components/index.ts import SvgIcon from './SvgIcon/index.vue' import type { App, Component } from 'vue' const globalComponents: Record<string, Component> = { SvgIcon, }; export default { install(app: App): void { Object.entries(globalComponents).forEach(([name, component]) => { app.component(name, component); }); }, }; ``` 随后只需在项目的根实例创建之前执行一次即可让所有页面都能直接引用上述声明过的全局组件而无需单独再做任何额外配置工作。