install Element Plus包

下载 element-plus

npm install element-plus --save

全局引入

//main.js

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

import ElementPlus from 'element-plus'
// 坑 
//import 'element-plus/lib/theme-chalk/index.css'
import 'element-plus/dist/index.css'

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

关于一号坑

如果参考早期文章的方式引用 css，会报错。

this dependency was not found：'element-plus/lib/theme-chalk/index.css

最新的 css 官网已经作出了更改，需要将 css改为

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

目前看到还有其他解决方案，比如下载 style-loader 进行配置也能使用。

按需引入

按需引入有很多种方式，

直接参考官网的按需引入
部分组件全局引入（取常用的组件，直接在main.js引入）

//main.js

import { createApp } from 'vue'
import { ElButton, ElContainer, ElAside, ElHeader, ElMain, ElFooter, ElMenu, ElSubmenu, ElMenuItemGroup, ElMenuItem,
	ElForm, ElFormItem, ElInput, ElPopover, ElTag, ElCard, ElTable, ElTableColumn, ElPagination, ElDialog, ElPopconfirm,
	ElUpload, ElLoading, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCascader, ElCheckbox,
	ElInputNumber } from 'element-plus'

app.use(router)
const app = createApp(App)
app.use(ElButton)
	.use(ElContainer)
	.use(ElAside)
	.use(ElHeader)
	.use(ElMain)
	.use(ElFooter)
	.use(ElMenu)
	.use(ElSubmenu)
	.use(ElMenuItemGroup)
	.use(ElMenuItem)
	.use(ElForm)
	.use(ElFormItem)
	.use(ElInput)
	.use(ElPopover)
	.use(ElTag)
	.use(ElCard)
	.use(ElTable)
	.use(ElTableColumn)
	.use(ElPagination)
	.use(ElDialog)
	.use(ElPopconfirm)
	.use(ElUpload)
	.use(ElLoading)
	.use(ElSelect)
	.use(ElOption)
	.use(ElRadioGroup)
	.use(ElRadio)
	.use(ElCascader)
	.use(ElCheckbox)
	.use(ElInputNumber)
app.mount('#app')

借助插件进行按需引入（vite-plugin-style-import）、vite-plugin-components）

下载插件

npm install vite-plugin-style-import -D （二号坑)
npm install vite-plugin-components -D

配置 Vite


//vite.config.js
 
import styleImport from 'vite-plugin-style-import'
import ViteComponents, { ElementPlusResolver } from 'vite-plugin-components'
 
export default defineConfig({
    plugins: [
        vue(),
        //按需导入element-plus组件
        ViteComponents({
            customComponentResolvers: [ElementPlusResolver()],
        }),
        //按需导入element-plus的css样式
        styleImport({
            libs: [
                {
                    libraryName: 'element-plus',
                    esModule: true,
                    resolveStyle: name => {
                        return `element-plus/lib/theme-chalk/${name}.css`
                    },
                },
            ],
        }),
    ],
 })

删除 main.js 相关引入代码

关于二号坑

如果没有指定版本，会下载 2.0.0 版本，会报错

Error: Cannot find module 'consola'

根据指示下载 consola；但是还会爆粗（部分人可以正常使用了）

TypeError: (0 , import_vite_plugin_style_import.default) is not a function

目前该报错 github 上没有明确的解决方案，唯一的解决方案是回退至 1.4.1版本，可正常使用

npm remove vite-plugin-style-import
npm install vite-plugin-style-import@1.4.1 -S

使用插件的按需引入有很多种

我也尝试了几个，但是配置觉得比较麻烦，总的来说，还是这种方式相对来说比较简单，适合刚入门的新手；

如果有能力自行配置的，当然可以选择更适合自己的按需引入方案

Vue3 element-plus 引入的坑