Element-Plus使用

Element-Plus

安装Element-Plus

在控制台输入npm install element-plus –save

完整引入：

如果对打包后的文件大小不是很在乎，那么使用完整导入会更方便

在main.js输入此代码

import { createApp } from 'vue'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

import App from './App.vue'

import './registerServiceWorker'



createApp(App).use(ElementPlus).mount('#app')

按需引入：

首先需要安装unplugin-vue-components和unplugin-auto-import这两款插件

在控制台输入npm install -D unplugin-vue-components unplugin-auto-import

然后将如下代码覆盖vue.config.js配置文件

const {defineConfig}=require('@vue/cli-service')

const AutoImport =require('unplugin-auto-import/webpack')

const Components=require('unplugin-vue-components/webpack')

const {ElementPlusResolver}=require('unplugin-vue-components/resolvers')



module.exports=defineConfig({

  transpileDependencies:true,

  configureWebpack:{

    plugins:[

      AutoImport({

        resolvers:[ElementPlusResolver()]

      }),

      Components({

        resolvers:[ElementPlusResolver()]

      })

    ]

  }

})

通过以上任一方式引入element-plus，推荐按需引入。

然后在element-plus官网复制相应样式的代码即可。

Element-plus字体图标

使用icons字体图标时首先要安装icons字体图标

1.在控制台输入npm install @element-plus/icons-vue

2.在src目录下，创建plugins文件夹，在文件夹下创建文件icons.js文件，在其中输入

import * as components from "@element-plus/icons-vue"

export default{

    install:(app)=>{

        for(const key in components){

            const componentConfig =components[key];

            app.component(componentConfig.name,componentConfig);

        }

    },

};

3.在main.js中引入icons.js文件

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import elementIcon from "./plugins/icons"

createApp(App).use(elementIcon).mount('#app')

4.接下来就可以直接在组件中引入使用了