- 博客(88)
- 收藏
- 关注
RSS订阅原创 从零开始Vue3+Element Plus后台管理系统(24)——优化版字典组件
因为在实际场景中，大部分字典的值是几乎不会变动的。所以把字典数据缓存在前端没问题，对于需要实时更新也让它能够更新起来。接下来，就是实现下面 4 个需求：1. 按需加载数据，只请求需要的字典数据2. 无需频繁更新的数据，保存在缓存中3. 需要实时更新的数据，可以保持及时更新4. 减少请求次数
2024-05-21 19:00:00
1474
原创 从零开始Vue3+Element Plus后台管理系统(19)——按钮级别权限控制
上一篇文章已经实现了页面路由的权限控制。除此之外，我们还需要更细粒度的控制，比如对按钮、链接、某个字段的显示做更加细致的控制。在实际场景中，常用以下两种判断方式在template模板中，一般使用指令可以直接控制按钮级别元素的显示通常在登录成功后，我们会获取细粒度的指令code和用户角色role，我们它放在userStore中,
2023-06-08 09:43:57
1750
原创 从零开始Vue3+Element Plus后台管理系统(17)——一键换肤的N种方案
如果你用过Element UI，应该知道它提供了一个自定义主题功能，下载后即可使用。方案二的思路和它类似，用户可以自己定义color，menu，border等一些常用值，然后保存为自己的主题方案未完待续。
2023-06-02 14:43:53
3010
原创 从零开始Vue3+Element Plus后台管理系统(18)——权限路由实现
路由权限这块，这也是项目最初立下的Flag，在我✍️写到系统第18篇文章的时候终于写了，刚开始的时候还是碰到一些问题，但是当我细细梳理，画出思维导图，写完文章后，觉得一切都清晰起来。如果一味前行不作停留，不去回顾和总结，很多东西带着一知半解就过去了忘记了。在忙碌的项目中，我觉得自己变成了一个螺丝钉，没有丝毫成长。停下来做一些输出和总结，整装待发反而更好。
2023-06-02 14:43:31
1432
原创 从零开始Vue3+Element Plus后台管理系统(16)——组合式函数hook二次封装el-table
终于写到组合式函数了，它类似vue2的mixin，但优于mixin，用好了可以事半功倍。在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用的函数。是时候写一个自己的组合式函数Demo了，决定从table下手 👋table是后台管理系统最常用的组件，而且基本功能差不多，复用程度高，所以使用hook二次封装table是个相当实用的想法。
2023-05-22 20:57:15
2652
1
原创 从零开始Vue3+Element Plus后台管理系统(十五)——多语言国际化vue I18n
i18n国际化的内容比较多，写文章的时间也用得比较长，从上周五开始到本周一，断断续续完成了。虽然实际工作中很多项目都不需要国际化，但是了解国际化的用法还是很有必要的。
2023-05-22 20:55:34
6051
原创 从零开始Vue3+Element Plus后台管理系统(十三)——富文本编辑器、Markdown编辑器、代码编辑器
早就想着要放几个编辑器的Demo到项目中，这也是项目开始就立下的flag。今天专门挑选了几款主流编辑器，包括绕不开的富文本编辑器，码农最爱的markdown编辑器，还有用途相对少的代码编辑器。时间有限的情况下，仅引入4个编辑器到我的vue3项目中，尝试了一下基础功能，以及富文本编辑器上传图片的配置。实践证明使用过程并不复杂，也没有什么坑（也有可能是没有深入使用的缘故），再加上它们的文档都很详尽，还是值得推荐的。
2023-05-22 20:55:14
5060
3
原创 从零开始Vue3+Element Plus后台管理系统(十四)——PDF预览和打印
其实我常常会纠结今天要写什么内容。因为希望能够保持每日更新，所以要写的内容不能太难——最好是半天可以搞出demo并且输出文章，所以很多东西浅尝辄止，并没有深入研究，还写出了一些bug 🐛今天又浅浅的研究了下在Vue3中如何预览PDF。
2023-05-22 20:54:56
2196
3
原创 从零开始Vue3+Element Plus后台管理系统(十二)——封装Axios，取消重复请求
在过往的项目中，大部分Axios在项目搭建时就直接二次封装好了，拿来即用。满足通用需求是没有问题的，但碰到一些特别的接口返回，弱网场景，特别的产品需求，就觉得简单的封装不够用了。实际上Axios非常强大，封装好了可以事半功倍，刚好今天趁此机会认真学习一下。这次主要在基本封装基础上增加了取消请求和自定义错误提示。
2023-05-22 20:54:26
1317
原创 从零开始Vue3+Element Plus后台管理系统(十一)——Ctrl+K全局搜索站点路由功能
又是一个有意思的功能——Ctrl+K唤起全局搜索，Vuejs官网、Tailwind CSS官网… 都用上了。全局搜索功能可以帮助用户快速获取信息定位，对于改进用户体验感还是很有意义的。当然本项目做的是一个低配版，只对路由进行全局搜索，毕竟更多数据内容的搜索还得依靠后端返回，但是前端实现的思路是一致的。
2023-05-22 20:51:56
1502
原创 从零开始Vue3+Element Plus后台管理系统(十)——自定义水印指令与全局注册
/ 在绑定元素的 attribute 前 // 或事件监听器应用前调用 created(el , binding , vnode , prevVnode) {// 下面会介绍各个参数的细节 } , // 在元素被插入到 DOM 前调用 beforeMount(el , binding , vnode , prevVnode) {} , // 在绑定元素的父组件 // 及他自己的所有子节点都挂载完成后调用 mounted(el , binding , vnode , prevVnode) {
2023-05-15 11:36:09
1372
原创 从零开始Vue3+Element Plus后台管理系统(九)——使用API协作平台Mock数据
截止目前，本项目用了2个接口，一个登录，一个获取列表数据。接下来想做的页面和功能，为了看起来更真实，就需要增加更多的模拟数据。Mock语法写得有些随意，看起来还是很假 😁Mock数据可以使用Mockjs插件，但我更喜欢用api平台，用起来方便也更真实，还可以跟后端同学协作。yApi、postman、apiPost、apifox这几个都尝试过，操作比较类似，都可以满足需求。
2023-05-15 11:35:44
994
原创 从零开始Vue3+Element Plus后台管理系统(八)——模仿禅道做一个Vue3版本的高级查询组件
暗黑模式使用 Vue3+element Plus 简单模仿了禅道系统的高级搜索组件，说简单也有点复杂，还没有完全开发完，但是大体架子有了，剩下一些功能点继续coding。边开发边记录吧，因为这个相比之前的内容确实复杂一些，也更接地气。
2023-05-15 11:34:00
2134
原创 从零开始Vue3+Element Plus后台管理系统(七)——手写一个简单的多页签组件
以前都是用别人现成的多页签组件，自己也想尝试下做个Vue3的版本，目前还只有基本功能，慢慢完善。
2023-05-15 11:33:44
1966
原创 从零开始Vue3+Element Plus后台管理系统(六)——状态管理Pinia和持久化
在src目录新建文件夹store，然后新建文件user.tsimport {UserInfo } from '~/types/index' // 此处采用组合式API写法 // Pinia 同样支持选项式API写法 export const useUserStore = defineStore('user' ,() => {
2023-05-15 11:32:43
1083
原创 从零开始Vue3+Element Plus的后台管理系统(五)——尝试多种图标ICON方案iconify
iconfont是过去使用较多的图标方案，后来更倾向于使用SVG，因为SVG更灵活兼容性更好。在最近的几个Vue2项目中，因为强调功能弱化设计所以直接用Element UI自带的图标即可满足需求。Element Plus的图标库相对Element UI更加丰富，然而对于喜欢折腾的人还是远远不够的，在我折腾的这个个人仓库，决定尝试更多图标解决方案。除了使用Element Plus自带的图标，iconify是本次尝试的主要目的。
2023-05-15 11:32:10
5534
原创 从零开始Vue3+Element Plus的后台管理系统(三)——按需自动引入组件和unplugin-vue-components
虽然Vite在使用unplugin-vue-components产生了一些不愉快的问题，但是无法忽视这个强大的插件，它对于我们开发还是很有帮助。插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）；作者是Vite生态圈大名鼎鼎的Anthony Fu不知道大家有没有留意项目中这个文件，当我们在src/components文件夹下加入新的组件，unplugin-vue-components会自动修改文件内容加入我们新写的组件，我们无须在项目任何地方注册组件即可直接在页面中使用。
2023-05-15 11:30:51
1381
原创 从零开始Vue3+Element Plus的后台管理系统(四)——按需引入eCharts图表
本项目只简单使用了eChart的几个基本图表，如果你的需求比较复杂需要更多图表组件，可以修改echarts.ts中引入的组件。eCharts完整包太大了，一般项目中只会使用其中小部分图表，所以我们只用按需引入，尽量减少打包体积。在src/components 文件夹下新建目录echarts，新建文件echarts.ts。，所以在页面中可以直接使用新建的MyEchart组件，以下代码实现了一个简单的饼图。图表统计作为后台管理系统标配当然不能少，本项目选择使用最熟悉的eCharts。首先安装eCharts。
2023-05-15 11:30:35
1551
原创 从零开始Vue3+Element Plus的后台管理系统(二)——Layout页面布局的实现
项目搭建好之后，开始写基本的布局。后台管理系统的布局3大元素：头部、侧栏、主要内容，各种布局结构相差不大，我选择了下图所示的布局，其中头部、侧栏、页签在页面中是固定的，只有主要内容容器会跟随页面滚动。
2023-05-15 11:30:18
12941
4
原创 从零开始写一个Vue3+Element Plus的后台管理系统
作为一个有追求（wuliao）的前端，那就自己开一个git仓库练手吧，想试验什么就随便试，既没有deadline的压力，也不用去考虑产品需求，UI还原度。安装Element Plus，使用按需导入的方式 https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5 ， 这里埋了个坑，后面会说。基本上一个项目的雏形的就出来了。接下来先从layout布局开始。
2023-05-15 11:28:18
2616
原创 Vue3 自定义指令让元素自适应高度，el-table在可视区域内滚起来
我始终坚持，前端开发不能满足于实现功能，而是需要提供优秀的交互与用户体验。即使没有产品没有UI的小项目，也可以自己控制出品质量，做到小而美。所以前端们不仅仅需要了解框架如何用，还要学习一些设计、交互、体验的知识，在一堆雷同的产品中脱颖而出。哦，扯远了，因为今天想记录的这个功能是一个小小的体验提升，有感而发了。表格行数较多时会让页面产生滚动条，用户滚动页面的话，上面的搜索条件或者其它内容被卷上去了看不到，不方便对照数据。所以用户的需求是只让表格滚动，其他元素都不要滚。
2023-05-12 14:52:06
4015
6
原创 Tailwind CSS入门（二）——基本介绍和特性
上一篇文章简要的介绍了原子类CSS，以及个人对语义化、原子化的一些经验和理解。从这篇文章开始，正式开始分享Tailwind CSS的特性、使用和技巧。Tailwind CSS是一个为快速开发而精心设计的原子类CSS框架，在此我们将搭建一个Vite项目来配合讲解这个的系列课程，需要你掌握一些CSS、Vue的知识。作为一个原子类CSS框架，如果你熟练掌握CSS，那么使用起来将会非常顺手。
2023-04-25 14:09:54
1224
原创 Tailwind CSS 入门——浅谈CSS原子化、语义化
Tailwind CSS，是一个功能类优先的CSS框架，它集成了诸如flexpt-4和rotate-90这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。官网地址：https://tailwindcss.com/ V3版本目前还没有中文文档，需要看中文文档的可以看V2版本。来自。
2023-04-25 14:08:49
992
原创 js修改美化系统alert
如图，把系统的alert修改为UI指定的样式使用layui的layer覆盖window.alert方法<style> .layui-layer-title { background-color: #fff; border-color: #fff; } .layui-layer-dialog .layui-layer-content { padding: 30px aut
2022-03-02 20:00:00
1437
原创 Vue使用Export2Excel导出表格时隐藏表头
真实需求并不是要隐藏表头，而是因为后端返回的数据就把表头给拼上去了。。。 所以不能再加一个header。直接再代码中不写header，会报错excel.export_json_to_excel({ // header: null, data, filename: '调研统计报表', autoWidth: this.autoWidth, bookType: this.bookType})检查报错代码，找到Export2Excel.js第159行，加个判断header是否存在就可
2022-01-07 22:31:13
1011
原创 【Vue】关闭浏览器窗口之前弹出提示
需求：叉掉浏览器窗口，弹出提示，确认后才会关闭窗口mounted() { window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))}, methods: { beforeunloadHandler(e) { this._beforeUnload_time = new Date().getTime() e = e || window.event if (
2021-12-24 18:30:00
6059
2
原创 Vue中一个复杂表单的处理（子表单嵌套）
本次需求是一个比较复杂的数据录入表单（如下图所示），分成5个步骤，其中1，2，4，5步骤的子表单是比较简单的输入和选择，最复杂的是步骤3：分为6种组织类型，每种类型可以增（上限10个）删改其下的组织（公司），每个组织（公司）下可以增删改联系人（上限20个），同时需要对表单做即时验证，包括必填字段，组织（公司）名称判重，联系人判重...
2021-11-28 21:30:00
5949
转载 把从其他git仓库上拉下来的代码，提交到自己的仓库
由于当前本地的代码也是从其他的git仓库上clone下来的，所以就不需要执行sudo git init命令了。1.sudo git add . ----将当前目录下的所有文件添加到版本库。2.sudo git commit -m “一些说明” ----把添加的文件提交到仓库3.sudo git remote add origin 新的远程git仓库的地址 ----关联到新的远程库的地址由于我们当前的代码是从其他的git仓库上clone下来的，所以当前的关联仍然是之前的git地址，所以
2021-08-08 21:21:33
5840
原创 uniapp微信小程序Vue.prototype挂载全局变量，页面中无法获取
在uniapp开发过程中，各端的一些高度会有区别，为了方便，就要统一放到全局变量中。一开始使用Vue.prototype，在h5和App中使用都没问题，但打包微信小程序测试时，发现取不到这里的值。遂改用Vuex，在onLaunch的时候把这些值放到state里边，然后在页面中使用，就可以了。特此记录。// 使用Vue.prototype，在h5,App中表现OK，微信小程序页面中取不到值uni.getSystemInfo({ success: function(e) { Vue.protot
2021-02-02 11:07:42
7580
1
原创 ios下滚动卡顿不流畅问题及解决
用webview嵌套制作的小程序，无限上拉加载列表，开始用的是body的scroll来加载，安卓端表现良好，但是在苹果手机的微信中打开，滚两下就不滚了，体验很糟糕。后来改用iScroll来做列表，IOS的体验好了一些，但是安卓的体验大不如前，所以区别IOS和Andriod两端，分别使用iScroll和body的原生scroll来做。因为ios的弹性效果，滚动还是有些奇怪，上拉的时候会被拉起一截空白，所以加了一段代码，禁用了列表页的弹性效果。
2021-01-22 12:49:45
2650
2
原创 uniapp在h5页面中打开APP
参考UNIAPP官方文档：Android平台设置UrlSchemes，实现被第三方应用调用<!--打开APP的链接--><a href="test://abc">test:<a>
2021-01-13 12:59:16
2195
原创 小程序引入weui的坑
使用npm方法引入weui，然后在json中引入tabbar组件{ "usingComponents": { "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog", "mp-tabbar": "/miniprogram_npm/weui-miniprogram/tabbar/tabbar" }}报错如下：Component is not found in path "miniprogram_npm/we
2020-07-17 15:36:47
1769
原创 前端常用库
VuetifyVuetify 是一个 Vue UI 库，包含手工制作的精美材料组件。不需要设计技能 - 创建令人惊叹的应用程序所需的一切都触手可及。地址： https://vuetifyjs.com/zh-Hans/
2020-07-13 09:48:14
242
原创 Vue超棒的UI组件库Vuetify
遇到了Vuetify，仿佛遇到终身伴侣，虽然这个外国人写的组件库，中文翻译有些生硬，但是它太强大了，无论是完善的组件，还是文档示例，都非常丰富而详细。如果碰到使用中的问题，基本认真阅读文档都可以解决。
2020-07-08 12:47:43
2544
2
原创 Vue写的一个无限加载瀑布流
我做的这个瀑布流放在了一个嵌套页面里，就是类似管理后台的main content中，如果要改成全屏的也很方便，其实更容易些，因为会避开一些在元素上使用onScroll的坑。通过这个瀑布流，可以掌握以下几个知识点：1. 在元素上监听scroll事件，相对直接在window上监听麻烦一点点；2. image.onload事件；3. promiseAll;4. vue 的 transition-group
2020-07-06 15:32:01
2340
原创 Vue引入iconfont图标，使用svg-icon
iconfont真是太好用了，之前一直使用font-class方式来引用，但是iconfont说Symbol 引用才是未来的主流，那么我们是一定要跟上主流的。在vue中使用Symbol引入貌似比font-class要复杂一些，但只要一次配置好，之后就很方便了。
2020-07-03 12:34:44
1267
原创 背书小程序正式上线啦
看看这么多次审核，还是听不容的，之前提交了4次，第4次审核通过。这几天又优化了一下，今天提交3次，终于通过。第一版未通过审核的原因皆为：1: 你好，你的小程序涉及提供备忘录、日记、记事服务，备忘录等属个人主体小程序未开放类目，建议申请企业主体小程序。我这个只是个简单的背书小程序，完全是由程序按照选择的几个条件来生成背诵日程，不牵涉用户自主输入，而且也没法搞个企业主体，只好改改继续提交。第四次修改了类目，删除了“工具-效率类目”，最终审核通过第二版，来了好几个原因：你好，你的小程序涉及提供备.
2020-05-29 20:03:02
1978
原创 CSV文件导入数据库中文乱码（已解决）
做好的CSV直接导入数据库，中文是这样的��������ʨ��һ��������è�Ĵ����目前的解决办法，粗暴简单把.csv后缀改成.txt打开txt，选择另存为，编码方式改成UTF-8把.txt后缀改为.csv导入，成功！为啥Excel就不能直觉保存UTF-8呢，它都那么强大了...
2020-05-28 09:26:24
14920
12
原创 小程序音频播放器（二）使用createInnerAudioContext做另一个播放器
几个月之前，也就是刚开始学习小程序，做了一个简单的音频播放器传送门：https://blog.youkuaiyun.com/immocha/article/details/103904659庆幸自己没有从入门到放弃，而是渐渐有了些长进，这回又做了一个播放器，感觉能稍微好点了。这个播放器长这样比上回稍微复杂一些，主要实现以下几个功能：播放，暂停。 播放时圆形图片会转动快进快退音频切换（英音和美音之间切换）进度条显示切换倍速，估计系统有bug，暂未实现~~照常贴代码<!-- 图标使用ico
2020-05-27 15:54:01
1396
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人