vue3 引入element-ui

### 如何在 Vue 3 项目中集成 Element Plus 组件 为了在 Vue 3 中使用 Element UI，推荐使用其专门为 Vue 3 设计的版本——Element Plus。以下是具体方法： #### 安装依赖包 通过 npm 或 yarn 来安装 `element-plus` 和它的样式文件。 ```bash npm install element-plus ``` 或者 ```bash yarn add element-plus ``` #### 全局引入 Element Plus 如果希望整个应用都可以访问到所有的 Element Plus 组件，在项目的入口文件（通常是 main.js 或者 setup.js）里全局注册这些组件。 ```javascript // main.js import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; import ElementPlus from &#39;element-plus&#39; import &#39;element-plus/lib/theme-chalk/index.css&#39; const app = createApp(App) app.use(ElementPlus) app.mount(&#39;#app&#39;) ``` #### 按需加载特定组件 对于大型应用程序来说，按需导入可以减少打包后的体积。借助于像 `unplugin-vue-components` 这样的插件可以帮助实现这一点。 首先安装必要的工具: ```bash npm i unplugin-vue-components -D npm i babel-plugin-import -D ``` 接着配置 Webpack 或 Vite 构建工具来支持自动按需加载功能。 最后只需要单独引入所需的组件即可： ```javascript // MyComponent.vue <template> <el-button type="primary">Primary Button</el-button> </template> <script lang="ts"> import { defineComponent } from "vue"; export default defineComponent({ name: "MyComponent", }); </script> ``` 以上就是在 Vue 3 项目中成功集成了 Element Plus 的方式[^1]。