VUE3项目学习系列--element-plus集成(三)

1、安装依赖

Element-plus官网:快速开始 | Element Plus (element-plus.org)

javascript 复制代码
pnpm i element-plus

在项目main.ts中引入element-plus:

javascript 复制代码
import { createApp } from "vue";
import App from "./App.vue";
// 从Element官网上参考,引入element-plus插件与样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

// 挂载到应用上
app.use(ElementPlus)
app.mount('#app')

在app.vue中使用element-plus:

javascript 复制代码
<script setup lang="ts">
</script>

<template>
  <div>
    <!-- element-plus按钮 -->
    <el-button type="primary" size="de">测试</el-button>
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
   <h1>VUE3</h1>
  </div>
</template>

<style scoped>

</style>

运行启动项目:pnpm run dev

2、安装element 图标库

复制代码
pnpm i @element-plus/icons-vue

在app.vue页面中使用图标:先引入图标Plus,再在控件按钮中使用图标:icon="Plus"

html 复制代码
<script setup lang="ts">
  // 引入图标
  import {Plus} from "@element-plus/icons-vue"
</script>

<template>
  <div>
    <!-- element-plus按钮 -->
    <el-button type="primary" size="de" :icon="Plus">测试</el-button>
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
   <h1>VUE3</h1>
  </div>
</template>

<style scoped>

</style>

3、element-plus 国际化

由于element-plus模式显示的英文,在使用控件过程中要求显示中文需要在main.ts如下配置

javascript 复制代码
import { createApp } from "vue";
import App from "./App.vue";
// 从Element官网上参考,引入element-plus插件与样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 配置element-plus国际化
//@ts-ignore --忽略ts校验
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const app = createApp(App)

app.use(ElementPlus, {
    locale: zhCn,
  })
// 挂载到应用上
app.use(ElementPlus)
app.mount('#app')

需要注意的是:'element-plus/dist/locale/zh-cn.mjs'引入后会报红,是由于ts校验检测导致的,通过添加://@ts-ignore 可忽略ts检测

相关推荐
脑袋大大的33 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0142 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
Wy. Lsy1 小时前
Kotlin基础学习记录
开发语言·学习·kotlin
The_Killer.1 小时前
格密码--数学基础--06对偶空间与对偶格
学习·线性代数·密码学
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20152 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦3 小时前
Web学习笔记3
前端·笔记·学习·html5
之歆3 小时前
Python-魔术方法-创建、初始化与销毁-hash-bool-可视化-运算符重载-容器和大小-可调用对象-上下文管理-反射-描述器-二分-学习笔记
笔记·python·学习
江城开朗的豌豆3 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js