Vue3使用Element-plus

木心操作

已于 2024-02-29 11:43:52 修改

阅读量4.6k

点赞数 8

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-02-23 11:26:15 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41579327/article/details/136247884

版权

vue 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何在Vue3项目中使用Vite构建工具并配置Element-plus，包括全局导入导致资源增大、自动按需导入以减小资源、以及国际化设置的方法，同时提供了package.json示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：此处 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语言与项目国际化-优快云博客