Vue3使用Element-plus_vue3 element-plus

前言：此处 Vue3 使用了 Vite 构建工具 ，没有使用 webpack

安装 Element-plus

npm i element-plus

有淘宝镜像，可使用以下命令

cnpm i element-plus

注：默认后面会带上 @latest 表示安装最新版 如需安装其它版本 @版本号 即可

记录两种使用方式

方式1、全局导入

一次引用，全局可用，打包后资源大；

// main.js 
 
import './assets/main.css'
 
import { createApp } from 'vue'
import { createPinia } from 'pinia'
 
import App from './App.vue'
import router from './router'
 
import ElementPlus from 'element-plus' // 引入模块
import 'element-plus/dist/index.css' // 引入css
 
const app = createApp(App)
 
app.use(createPinia())
app.use(router)
app.use(ElementPlus) // 添加到中间件
 
app.mount('#app')

 方式2、自动按需导入（建议）

打包后资源小；需要安装两个依赖；

npm i unplugin-vue-components unplugin-auto-import -D

无需配置 main.js

// main.js 
 
import './assets/main.css'
 
import { createApp } from 'vue'
import { createPinia } from 'pinia'
 
import App from './App.vue'
import router from './router'
 
const app = createApp(App)
 
app.use(createPinia())
app.use(router)
 
app.mount('#app')

vite.config.js 配置即可

import { fileURLToPath, URL } from 'node:url'
 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

官方参考

快速开始 | Element Plus

官方给了三种使用使用方式，还有一种（手动导入）未尝试

使用Element-plus中的icon

需要单独安装

npm i @element-plus/icons-vue

方式1、全局导入

一次性注册，全局可用，打包后资源大

// main.js
 
import './assets/main.css'
 
import { createApp } from 'vue'
import { createPinia } from 'pinia'
 
import App from './App.vue'
import router from './router'
 
import * as ElIconModules from '@element-plus/icons-vue'
 
const app = createApp(App)
 
app.use(createPinia())
app.use(router)
// 统一注册Icon图标
for (const iconName in ElIconModules) {
  if (Reflect.has(ElIconModules, iconName)) {
    const item = ElIconModules[iconName]
    app.component(iconName, item)
  }
}
 
app.mount('#app')

test.vue 使用 

// test.vue
 
<script setup>
</script>
 
<template>
  <el-icon style="vertical-align: middle">
    <Search />
  </el-icon>
</template>

方式2、局部导入

按需导入，打包后资源小

// main.js
 
import './assets/main.css'
 
import { createApp } from 'vue'
import { createPinia } from 'pinia'
 
import App from './App.vue'
import router from './router'
 
const app = createApp(App)
 
app.use(createPinia())
app.use(router)
 
app.mount('#app')
 

test.vue 使用  

// test.vue
 
<script setup>
import { Search } from '@element-plus/icons-vue'
</script>
 
<template>
  <el-icon style="vertical-align: middle">
    <Search />
  </el-icon>
</template>

方式3、自动按需导入

需要安装依赖；

注：

1、如果 unplugin-auto-import 和 unplugin-vue-components 已安装则无需再安装；

2、此处安装 @iconify-json/ep 后则无需安装 @element-plus/icons-vue ；

npm i unplugin-auto-import unplugin-vue-components -D

npm i unplugin-icons -D

npm i @iconify-json/ep -D

vite.config.js 配置

// ...
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
 
export default defineConfig({
  // ...
 
  plugins: [
    AutoImport({
      resolvers: [
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon'
        })
      ]
    }),
 
    Components({
      resolvers: [
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep']
        })
      ]
    }),
    
    Icons({
      autoInstall: true
    })
  ]
})

 使用方式：需要加上 i-ep

<el-icon>
  <i-ep-edit />
</el-icon>

官方参考

Icon 图标 | Element Plus

国际化

Element Plus 组件 默认 使用英语，如果要使用其他语言需要单独配置；

方式1、全局导入时配置

// main.js
 
import { createApp } from 'vue'
 
import App from './App.vue'
import router from './router'
 
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
const app = createApp(App)
app.use(router)
 
app.use(ElementPlus, {
  locale: zhCn,
})
 
app.mount('#app')

 方式2、自动按需导入时配置

main.js 无需配置；在 app.vue 中配置 

// App.vue
 
<script setup>
import { RouterView } from 'vue-router'
// 引入配置组件
import { ElConfigProvider } from 'element-plus'
// 引入中文包
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script>
 
<template>
  <el-config-provider :locale="zhCn">
    <RouterView />
  </el-config-provider>
</template>
 
<style scoped>
</style>

 国际化 | Element Plus

---

package.json

{
  "name": "test",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite --mode dev",
    "test": "vite build --mode test",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.5.6",
    "pinia": "^2.1.7",
    "vue": "^3.4.15",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@iconify-json/ep": "^1.1.14",
    "@vitejs/plugin-vue": "^5.0.3",
    "unplugin-auto-import": "^0.17.5",
    "unplugin-icons": "^0.18.5",
    "unplugin-vue-components": "^0.26.0",
    "vite": "^5.0.11"
  }
}

相关文章：Vue3修改Element-plus语言与项目国际化-CSDN博客