vuepress v2.0 项目创建-编程思维
VuePress v2.0 项目创建 参考：VuePress v2.0 文档 1.创建文件夹 我创建了一个文件夹，然后在文件夹中打开了powershell E:\2023个人项目\terramours-starter 2.初始化项目 git init pnpm init 3.运行创建命令 pnpm add -D [email protected] @vuepress/[email protected] vue
最佳实践：基于vite3的monorepo前端工程搭建-编程思维
一、技术栈选择 1.代码库管理方式-Monorepo： 将多个项目存放在同一个代码库中 ▪选择理由1：多个应用（可以按业务线产品粒度划分）在同一个repo管理，便于统一管理代码规范、共享工作流 ▪选择理由2：解决跨项目/应用之间物理层面的代码复用，不用通过发布/安装npm包解决共享问题 2.依赖管理-PNPM： 消除依赖提升、规范拓扑结构 ▪选择理由1：通过软/硬链接方式，最大程度节省磁盘空间
vue组件中修改组件外元素样式-编程思维
在实际开发中，由于项目一开始设计的一些不合理性，会在组件中通过 html[media=pad]{ .xxx{ /* 组件样式 */ } } 以上方式修改某些组件的样式，这样会涉及到从 html 层级选择，由于我 style 标签是这样写的 <style lang="less" scoped></style> 所以导致组件内部无法修改
解决vue3自动引入element-plus后eslint警告-编程思维
配置vue.config.js ... ... module.exports = defineConfig({ ... ... configureWebpack: { plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], eslintrc: { e
iframe在vue中的状态保持技术-编程思维
引言 Iframe是一个历史悠久的HTML元素，根据MDN WEB DOCS官方介绍，Iframe定义为HTML内联框架元素，表示嵌套的Browsing Context，它能够将另一个HTML页面嵌入到当前页面中。Iframe可以廉价实现跨应用级的页面共享，并且具有使用简单、高兼容性、内容隔离等优点，因此以Iframe为核心形成了前端平台架构领域第1代技术。 众所周知，当Iframe在DO
封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值-编程思维
相信很多公司的前端开发人员都会选择使用vue+element-ui的形式来开发公司的管理后台系统，基于element-ui很丰富的组件生态，我们可以很快速的开发管理后台系统的页面（管理后台系统的页面也不复杂，大多都是分页查询类需求和增删改查）。但一个前端框架有优点，就必然会有一些缺点或bug存在，element-ui框架也不例外，甚至elementui框架的缺点或bug还很多，这里就不一一列举了
vue 新建项目+基本语法-编程思维
新建项目： 导入依赖： <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> 基本语法 v-bind指令：可以动态绑定变量message <!DOCTYPE html> <html lang="en"> <head>
vue 异步通信axios-编程思维
使用Axios实现异步通信需要先导入cdn： <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>使用到的数据data.json { "name":"kuang" , "url":"https://www.bilibili.com/?spm_id_fro
vue 路由router-编程思维
简单案例： App.vue是核心组件，其中的<router-link>相当于a标签，to相当于href，export是暴露函数，这样某组件才能被其他组件识别到 代码： <template> <div id="app"> <img src="./assets/logo.png"> <h1>hello!!!!!!!
使用webpack搭建vue项目-编程思维
有一句话叫“前人栽树后人乘凉”，还有一句话叫“如果说我看得比别人更远些，那是因为我站在巨人的肩膀上”。前一句是国人的俗语，后一句是那个发现了“万有引力”定律的牛顿说的。为什么要引用这两句呢？是因为我刚开始用vue的时候，使用的是vue-cli来搭建vue项目，快速又好用；我刚开始用react的时候，使用的是create-react-app来搭建react项目，方便又省事。使用这些已有的脚手架来搭
js递归遍历多维数组并在修改数组的key后返回新的多维数组-编程思维
我司最近正在用VUE做一个基于用户权限显示不同左侧菜单的后台管理系统，接口会根据用户的权限不同返回不同的菜单名称、URL等，前端要将这些菜单名称及URL动态添加到系统的左侧，这里就用到了vue-router2.2新添的router.addRouter(routes)方法。但是接口返给我的只是普通的由键值对组成的数组，而vue-router需要的是固定格式的路由写法，于是我就只能自己动手将普通的数
vue动态添加路由addroutes之不能将动态路由存入缓存-编程思维
在我不知道vue的路由还可以通过addRoutes动态添加时，我只知道vue的路由都是写死在路由表中的，每当跳转时再去加载相应的路由。直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API，立马研究了一下。 router.addRoutes： 函数签名： router.addRoutes(routes: Array<R
vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解-编程思维
做后端管理系统，永远是最蛋疼、最复杂也最欠揍的事情，也永远是前端开发人员最苦逼、最无奈也最尿性的时刻。蛋疼的是需求变幻无穷，如同二师兄的三十六般变化；复杂的是开发难度寸步难行，如同蜀道难，难于上青天；欠揍的是产品随心所欲、为所欲为，如同村霸横行乡里、只手遮天；苦逼的是前端苦不堪言，如同哑巴吃黄连，有苦说不出；无奈的是前端无可奈何花落去，如同至尊宝戴上金箍无法爱你，摘下金箍无法救你；尿性的是前端苦
vue文字间歇无缝向上滚动-编程思维
公司的管理系统中有“文字间歇无缝向上滚动”的需求，现在这种需求基本在项目开发中已经消失了，没什么新颖的，但架不住公司高层喜欢这种玩意儿，所以，作为开发人员，即使你有一百个不乐意，谁让是人家给你发工资呢！！！ 其实，这种用在vue项目中的需求跟原生js的实现方法基本一致，且实现的方法有多种，今天就单拎出来一种实现方法吧： <div class="scroll-up" ref="scroll"
vue/react圆环进度条-编程思维
数据展示，一直是各行各业乐此不疲的需求，具体到前端开发行业，则是各种各种图表数据展示，各种表格数据展示，烦不胜烦（繁不胜繁）！ 前几天刚做了折线图、柱状图、饼状图之类的图表数据展示效果，今天又碰到了类似圆环进度条的展示效果。天天跟数据打交道，天天跟接口打交道，项目做了不少，菜逼还是菜逼，都是泪啊！ 其实说白了，是自己对canvas不熟，对CSS3不熟，所以就找了一个现成的轮子： <temp
vue将接口返回的日期实时转换为几分钟前、几小时前、几天前-编程思维
项目开发中，各种需求都会遇到，有些需求很合理，也好实现，有些需求不能说不合理，就是太麻烦，就比如类似标题所描述这种的需求，你不能说它是不合理的需求，因为很多论坛或微博、朋友圈、QQ空间之类的这种效果还是很常见的，能让我们一眼就看到这些信息是什么时候发的，而且这些时间基本都是实时自动更新的，给人的感觉很友好。 而在我们公司的后台管理项目中，恰好也有这样的需求，感觉很时髦、很潮流，所以在我们前端开发
vue根据选择的月份动态展示当前月份的每一天并展示每一天所对应的星期几-编程思维
我们在开发过程中所遇到的所有的奇奇怪怪的交互美其名曰用(奇)户(葩)体(需)验(求)，而产品所谓的良好的交互效果，在我等开发人员眼里不值一提、不屑一顾、讨厌至极！ 对于这样的需求，我通常都是： 但胳膊拧不过大腿，人微言轻的后果就是你没得选择，在如此寒冷的大约在冬季： 我等卑微的码农，依旧还得唱着“你我皆凡人，生在人世间，终日奔波苦，一刻不得闲，既然不是仙，难免有杂念，烦恼放两旁，工资摆中间
自定义element父子不关联的穿梭树-编程思维
Element自身是有一个Transfer穿梭框组件的，这个组件是穿梭框结合checkbox复选框来实现的，功能比较单一，自己想实现这个功能也是很简单的，只是在项目开发中，项目排期紧，没有闲功夫来实现罢了，但这个组件只适合用来实现较为简单的左右数据添加删除的效果，复杂一点的树结构穿梭框就难实现多了，当然也有造好的轮子等你使用，这里推荐一个比较好用的穿梭树组件el-tree-transfer。 这
封装vue element的table表格组件-编程思维
上周分享了几篇关于React组件封装方面的博文，这周就来分享几篇关于Vue组件封装方面的博文，也好让大家能更好地了解React和Vue在组件封装方面的区别。 在封装Vue组件时，我依旧会交叉使用函数式组件的方式来实现。关于函数式组件，我们可以把它想像成组件里的一个函数，入参是渲染上下文(render context)，返回值是渲染好的HTML(VNode)。它比较适用于外层组件仅仅是对内层组件的
封装vue element的form表单组件-编程思维
前两天封装了一个基于vue和Element的table表格组件，阅读的人还是很多的，看来大家都是很认同组件化、高复用这种开发模式的，毕竟开发效率高，代码优雅，逼格高嘛。虽然这两天我的心情很糟糕，就像“懂王”怼记者：“你是一个糟糕的记者；CNN，Fake news”一样的心情，但我还是忍着难受的心情来工作和分享，毕竟工作是饭碗，分享也能化解我糟糕透顶的心情。 （文章最后有更新，是关于实现自适应布局