首页 > 其他分享 >Vue3+vite+Pinia+element-plus 换肤+国际化

Vue3+vite+Pinia+element-plus 换肤+国际化

时间:2023-12-25 11:25:18浏览次数:28  
标签:换肤 主题 element plus Pinia 页面

先上效果:

 

一:换肤

1:用Pinia 小菠萝做状态管理。

2:根据自己需求写几套主题色(用于后面在html加载对应的主题颜色)

 3: 自己写一个切换主题的页面

4:每次进入系统前去pinia里面获取上次选中的主题。如果已经设置 加载已设置过的

在src 下随便建个theme/index.ts

 然后在main.js 引入 刚才theme/index.ts

 二:国际化

1:先收集需要转换的语言包

在scr下建个language, 写上需要转换的英文和中文

    

2:将i8n服务引入并挂载在main.js

3:然后随便写个切换中英文的页面,将切换的值存在pinia 中

 

 4:在对应的页面用$t('commonBtn.new')

 

 5:搭配修改element-plus 的公共组件的中英文 locale .修改 

<el-config-provider locale="en"></el-config-provider>

 

标签:换肤,主题,element,plus,Pinia,页面
From: https://www.cnblogs.com/Gherardo/p/17925725.html

相关文章

  • WorkPlus企业即时通讯系统的领先者,提升沟通效率的利器
    在当今高度竞争的商业环境下,企业需要高效的内部沟通和协作才能保持竞争力。而企业即时通讯系统作为实现高效沟通的关键工具,成为了现代企业必备的组成部分。在诸多选择中,为何选择WorkPlus作为企业的首选即时通讯系统呢?接下来,让我们一起探讨一下WorkPlus的优势。作为企业即时通讯系统......
  • WorkPlus十年铸剑,成就千万级用户信赖与认可
    过去的十年中,WorkPlus在即时通讯和协作领域经历了一次又一次的挑战和探索。数百个功能点的丰富性、系统的稳定性以及千万级用户的信赖和认可,为WorkPlus赢得了声誉。让我们一起来了解WorkPlus的成功之路。WorkPlus的研发历程已经超过十年,经过上百次迭代,持续不断地完善和提升产品功能......
  • WorkPlus超级APP助力企业节省IT人力成本,实现快速移动化
    在信息化时代,移动应用已经成为企业发展的重要组成部分。然而,开发和维护原生客户端的成本却相对较高,需要大量的iOS、安卓和桌面端工程师。为了解决这一问题,WorkPlus作为一个功能完备的超级APP,为企业节约了大量的IT人力成本。通过使用WorkPlus,企业不需要额外雇佣iOS、安卓和桌面端工......
  • editplus快捷键操作大全
     新建普通文本Ctrl+N新建普通的文本文档新建浏览器窗口Ctrl+Shift+B新建浏览器窗口新建HTML页Ctrl+Shift+N创建一个空白的HTML页面打开Ctrl+O打开一个现有的文档打开头文件Ctrl+Shift+H打开C/C++文件的头文件打印Ctrl+P打印当前文档保存Ctrl+S保存当前文档光......
  • editplus快捷键操作大全
     新建普通文本Ctrl+N新建普通的文本文档新建浏览器窗口Ctrl+Shift+B新建浏览器窗口新建HTML页Ctrl+Shift+N创建一个空白的HTML页面打开Ctrl+O打开一个现有的文档打开头文件Ctrl+Shift+H打开C/C++文件的头文件打印Ctrl+P打印当前文档保存Ctrl+S保存当前文档光......
  • CodeForces 1909D Split Plus K
    洛谷传送门CF传送门设最后每个数都相等时为\(t\)。那么一次操作变成了合并两个数\(x,y\),再增加\(x+y-k\)。于是每个\(a_i\)可以被表示成\(b_it-(b_i-1)k\)的形式,化简得\(a_i-k=b_i(t-k)\)。因为\(t-k\)对于每个\(i\)都相同,又因为我们的目标是......
  • MyBatisPlus简介及快速搭建
    一、简介MyBatisPlus(简称MP)是一个MyBatis的增强工具,在MyBatis的基础上只做增强,不做改变,为简化开发,提高效率而生。特性及官网链接(简称苞米豆):可在IDEA中安装以下插件:MybatisX:支持跳转,自动补全生成SQL;dynamic-datasource:基于SpringBoot的多数据源组件,功能强悍,支持Seat......
  • 设置element组件表格:表头样式、单元格样式、表尾合计、边框、行高
    设置表格头样式methods:{headerCellClassName({row,column,rowIndex,columnIndex}){if(rowIndex===0){return{textAlign:'center',background:'#FFD966',fontWeight:'bold',color:'#000000'......
  • 前端歌谣-第伍拾陆课-vue2-element组件封装el-button-groups(续)
    前言我是歌谣今天继续给大家带来el-button-groups(项目的讲解背景颜色属性color:style="item.color?{background:item.color,borderColor:item.color}:{}"btns:[{//按钮名称name:"歌谣",//按钮类型......
  • mybatis与mybatisplus
    使用这个不会造成冲突 同时不要把<dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>3.0.3</version></dependency>删除<dependency><grou......