1. 安装element-ui组件

  2. 查看配置文件package.json，是否有element-ui组件的版本号

      在node_modules中也可以查看，所有安装的源文件可以在这里面找到

  3. 在main.js中引入

      以下代码便完成了 Element 的引入

      import ElementUI from 'element-ui'

      import 'element-ui/lib/theme-chalk/index.css'

      Vue.use(ElementUI)

   4. 当然也可以按需引入Element UI组件

      1）先安装 babel-plugin-component

        {  

            "presets": [   

               ["es2015", { "modules": false }] 

            ], 

            "plugins": [["component", [ 

                {     

                    "libraryName": "element-ui",    

                    "styleLibraryName": "theme-chalk"   

                }

            ]]]

        }

    2）修改.babelrc

    3）在 main.js 中引入你所需要的组件

   5. 在创建的组件使用element的组件

   6. 可以看到我们成功的使用了element组件

在vue项目的开发中，实现对Element-ui组件库插件的安装及按需导入

基于图形化界面自动安装

1、运行vue ui打开图形化界面

2、在项目配置模板中点击插件 — 添加插件，进入插件查询面板

3、搜索vue-cli-plugin-element并安装

4、配置插件，实现按需导入，从而减小打包后的项目体积

5、完成安装后，项目的main.js文件会出现导入element.js的代码

6、在element-ui官网复制“标签”的相关代码，尝试导入“标签”这个组件

7、按需导入tag组件，并注册为vue组件

8、保存后重新运行项目

安装插件

首先需要引入额外的插件：前**vite-plugin-components已重命名为unplugin-vue-components**

npm install unplugin-vue-components

配置插件

在weapack或vite配置文件内中添加配置

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
 plugins: [
 // ...
Components({
resolvers: [ElementPlusResolver()],
       }), 
    ], 
 }

// webpack.config.js
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ... 
 plugins: [ 
   Components({ 
      resolvers: [ElementPlusResolver()], 
       }),  
    ],
  }

//main.ts
import{ createApp } from 'vue'
import App from './App.vue'

import { Edit,Search } from '@element-plus/icons'  //图标需要分开导入，按需导入图标
import { ElButton } from 'element-plus';   //按需导入  

const app = createApp(App); 
//注册组件
app.component("edit", Edit)
app.component("search", Search)
app.component('ElButton',ElButton)
app.mount('#app');

      [removed] 
      [removed]