2023-10-07
温故知新
00
请注意,本文编写于 349 天前,最后修改于 257 天前,其中某些信息可能已经过时。

目录

简介
基本步骤
1. 安装依赖
2. 全局引入依赖
3. 使用测试
拓展:引入Element-plus图标

简介

在Vue2时代,Element是一个国内市占率很高的UI库,其中尤其是vue-elemnet-admin开源项目的使用。

Element Plus 是基于 Vue 3,面向设计师和开发者的组件库。

本文用于记录Vue3空项目集成Element Plus的基本配置。

基本步骤

参考官网:https://element-plus.org/zh-CN/guide/installation.html

1. 安装依赖

bash
npm install element-plus

运行成功后可以在项目的package.jsondependences标签下看到相关依赖及版本,如下:

json
"dependencies": { "element-plus": "^2.3.14" }

2. 全局引入依赖

main.tsmain.js中引入ElementPlus和相应的css,如下:

typescript
import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import router from './router' // 引入ElementPlus import ElementPlus from 'element-plus'; // 引入中文支持 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'; // 引入ElementPlus-css import 'element-plus/dist/index.css'; // 如果只想导入css变量 import 'element-plus/theme-chalk/dark/css-vars.css'; const app = createApp(App) app.use(createPinia()) app.use(router) // 全局使用ElementPlus app.use(ElementPlus, { locale: zhCn }) app.mount('#app')

以上引入中文支持的代码,在typescript环境下可能会报红,可以在main.ts同级创建declaration.d.ts文件,填入以下内容:

typescript
// 忽略vue中文支持文件的ts检查 declare module 'element-plus/dist/locale/zh-cn.mjs';

3. 使用测试

经过以上两步,已经成功将Element-plus引入到项目中,下面来测试一下引入是否成功:

将一下代码拷贝到你的App.vue文件中:

html
<el-button type="success">Element-plus Success</el-button>

运行项目查看相应的页面,可以看到一个按钮如下,则说明引入成功:

success

拓展:引入Element-plus图标

参考官网:https://element-plus.org/zh-CN/component/icon.html

Element-plus的图标资源需要单独引入到项目中,可以运行以下命令安装依赖:

bash
npm install @element-plus/icons-vue

安装成功后,可以在任何需要使用的地方引入所需图标,基本使用如下:

html
<template> <!--查询按钮使用图标--> <el-button :icon="Search" /> </template> <script setup lang="ts"> // 引入查询、删除、编辑图标 import { Search, Delete, Edit } from '@element-plus/icons-vue'; </script>
如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!