-
飞码LowCode前端技术系列:如何便捷快速验证实现投产及飞码探索
本篇文章从数据中心,事件中心如何协议工作、不依赖环境对vue2.x、vue3.x都可以支持、投产页面问题定位三个方面进行分析。 -
如何优雅使用 vuex
大纲 本文内容更多的是讲讲使用 vuex 的一些心得想法,所以大概会讲述下面这些点: Q1:我为什么会想使用 vuex 来管理数据状态交互? Q2:使用 vuex 框架有哪些缺点或者说副作用? Q3:我是如何在项目里使用 vuex 的? 初识 vuex 对于 vuex,有人喜欢,有人反感 喜欢的人觉 -
记录--Vue3基于Grid布局简单实现一个瀑布流组件
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 在学习Grid布局之时,我发现其是CSS中的一种强大的布局方案,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,在刷某书和某宝首页时,我们发现其展示方式就是一种瀑布流,是一种流行的网站页面布局,视觉表…… -
第三方组件及计算属性传参的问题解决方式
1. 前言 唉,好想玩滋嘣。 2. 计算属性直接传参接收不到 表格数据某一列需要用的计算属性时,模板中使用计算属性 fullName 就会直接调用 fullName 函数,而在模板中 fullName(item) 相当于fullName()(item),此处为函数柯里化。 <el-table- -
用强数据类型保护你的表单数据-基于antd表单的类型约束
接口数据类型与表单提交数据类型,在大多数情况下,大部分属性的类型是相同的,但很少能做到完全统一。我在之前的工作中经常为了方便,直接将接口数据类型复用为表单内数据类型,在遇到属性类型不一致的情况时会使用any强制忽略类型错误。后来经过自省与思考,这种工作模式会引起各种隐藏bug,一定有更…… -
pinia的使用
前言 最近新开了个项目,以前老项目都是vue2+vuex开发的,都说用vue3+pinia爽得多,那新项目就vue3+pinia吧。这里记录一下pinia的使用。 使用方法 安装pinia: npm i pinia main.js中引入pinia: //main.js import { create -
记录--让我们来深入了解一下前端“三清”是什么
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前端“三清” 在前端开发中,我们经常听到关于“三清”的说法,即 window、document、Object。这三者分别代表了 BOM(浏览器对象模型)、DOM(文档对象模型)以及 JS 的顶层对象。在这个体系中,我们通过 JavaScr -
记录--啊?Vue是有三种路由模式的?
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 众所周知,vue路由模式常见的有 history 和 hash 模式,但其实还有一种方式-abstract模式(了解一哈~) 别急,本文我们将重点逐步了解: 路由 + 几种路由模式 + 使用场景 + 思考 + freestyle 路由概念 -
el-table 多表格弹窗嵌套数据显示异常错乱问题
1、业务背景 使用vueʾlement开发报表功能时,需要列表上某列的超链接按钮弹窗展示,在弹窗的el-table列表某列中再次使用超链接按钮点开弹窗,以此类推多表格弹窗嵌套,本文以弹窗两次为例 最终效果如下示例页面 2、具体实现和问题抛出 <template> <div cla -
记录--Vue2屎山之 Table 屎山
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 Vue2 将在 2023 年年底停止维护了,但是 Vue2 的代码却不会在 2023 年消失,还会越来越多;难以想象几十万行或者几百万行的 Vue2 代码迁移到 Vue3,这是不可能办到的; 老一点的前端程序员肯定经历过把大型项目从 -
Vue openAi
1、提示 由于国内注册 https://api.openai.com 比较麻烦,直接购买的第三方接口和key 淘宝购买,几块钱1个月 3、自己娱乐够用 2、前端框架 Vant 移动端使用 axios 3、创建拦截器,api/request.js /* * @Descripttion: 文件说明 * -
记录--alova组件使用方法(区别axios)
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 在我们写项目代码时,应该更加专注于业务逻辑的实现,而把定式代码交给js库或工程化自动处理,而我想说的是,请求逻辑其实也是可以继续简化的。 你可能会说,用axios或fetch api就够了啊,哪有什么请求逻辑,那可能是你还没有意识到这个…… -
Vite4+Typescript+Vue3+Pinia 从零搭建(3)
项目代码同步至码云 weiz-vue3-template 关于vite的详细配置可查看 vite官方文档,本文简单介绍vite的常用配置。 初始内容 项目初建后,vite.config.ts 的默认内容如下: import { defineConfig } from 'vite' i -
深入跨域
跨域这两个字就像一块狗皮膏药一样黏在每一个前端开发者身上,无论你在工作上或者面试中无可避免会遇到这个问题。如果在网上搜索跨域问题,会出现许许多多方案,这些方案有好有坏,但是对于阐述跨域的原理和在什么情况下需要用什么方案,缺少系统性的说明。大家在工作中可能因为大佬们已经配置好了,不…… -
记录--ECharts — 饼图相关功能点(内环、外环、环形间隔、环形文字、轮播动画)
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 记录一下在公司遇到的一些功能,以及相关实现 以上的内容我花了一周时间去实现的,自己也觉得时间很长,但主要因为很少使用ECharts,导致使用的过程中大部分的时间都在查文档。 对于上面的这些功能点,其实算是写了两遍吧,这周一开了个…… -
记录--产品:请给我实现一个在web端截屏的功能!
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一、故事的开始 最近产品又开始整活了,本来是毫无压力的一周,可以小摸一下鱼的,但是突然有一天跟我说要做一个在网页端截屏的功能。 作为一个工作多年的前端,早已学会了尽可能避开麻烦的需求,只做增删改查就行! 我立马开始了我的反…… -
记录--vue3 setup 中国省市区三级联动options最简洁写法,无需任何库
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 在写页面的时候,发现表单里面有一个省市区的 options 组件要写,因为表单很多地方都会用到这个地址选择,我便以为很简单嘛。 虽然很简单的一个功能,但是网络上能搜索到的教程大多都是需要配合 elementUI 等各种 UI 库的,但是我 -
vue3源码学习api-vue-sfc文件编译
vue 最有代表性质的就是.VUE 的文件,每一个vue文件都是一个组件,那么vue 组件的编译过程是什么样的呢 Vue 单文件组件 (SFC)和指令 ast 语法树 一个 Vue 单文件组件 (SFC),通常使用 *.vue 作为文件扩展名,它是一种使用了类似 HTML 语法的自定义文件格式,用于 -
内网走nginx代理访问高德webapi2.0
需求:客户的电脑都只能访问内,服务器可以访问外网,客户电脑使用的项目中用到了高德webapi2.0。10.200.31.45:32100是我们的web服务器。 网上基本上都是对高德webapi1.4的配置方式,而web2.0有一些差别。 1.前端修改高德地图的js应用 如果是index.html引入 -
Vite4+Typescript+Vue3+Pinia 从零搭建(2)
项目代码同步至码云 weiz-vue3-template 关于tsconfig的配置字段可查看其他文档,如 typeScript tsconfig配置详解 tsconfig.json 文件修改如下: { "compilerOptions": { "target" -
React学习笔记01-React的基本认识
1.React起源与发展 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决 定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源 了。 2.React与传统MVC的关系 轻 -
为React Ant-Design Table增加字段设置
最近做的几个项目经常遇到这样的需求,要在表格上增加一个自定义表格字段设置的功能。就是用户可以自己控制那些列需要展示。在几个项目里都实现了一遍,每个项目的需求又都有点儿不一样,迭代了很多版,所以抽时间把这个功能封装了个组件:@silverage/table-custom,将这些差别都集成了进去,方便今 -
浅入深出的微前端MicroApp
本文是由最近做的一个项目有感而发,因为之前做了一些技术栈的统一,为了用ant Design的pro-table,PC统一使用react,但是我们有一些老的项目是vue的,本次新页面较多,老页面的改动较少,除此之外老项目想换菜单,因此我们想借助本次机会用react开发,经过了几番思考,发现本次很适合用 -
前端CodeReivew实践
把Code Review 作为开发流程的必选项后,不代表Code Review这件事就可以执行的很好,因为Code Review 的执行,很大部分程度上依赖于审查者的认真审查,以及被审查者的积极配合,两者缺一不可! -
如何提高redux开发效率?当然是redux-tookit啦!
前言 使用react-redux的朋友都经历过这种痛苦吧? 定义一个store仓库,首先创建各种文件,比如reducer、action、store...,然后 将redux和react连接使用。整个流程繁琐,写起来代码冗余。 react-redux创建仓库,文件目录如下: 好怀念使用 vuex创建写 -
Web项目如何配置Eslint
介绍 ESLint 是一个根据方案识别并报告 ECMAScript/JavaScript 代码问题的工具,其目的是使代码风格更加一致并避免错误。在很多地方它都与 JSLint 和 JSHint 类似,除了: ESLint 使用 Espree 对 JavaScript 进行解析。 ESLint 在代码 -
React hooks API详情
import React, { useEffect, useState } from 'react'; hook 是react 16.8的新增特性 ,他可以让你不在编写class的情况下shiystate以及react的特性 Hooks的出现,首先解决了以下问题: 告别了令人疑惑的生 -
React Native实现Toast轻提示和loading
# React Native 封装Toast ## 前言 > 使用react native的小伙伴都知道,官方并未提供轻提示组件,只提供了ToastAndroid API,顾名思义,只能再安卓环境下使用,对于ios就爱莫能助,故此,只能通过官方的核心组件,自行封装,实现Toast功能 ## 实 -
ElectronReactAdmin跨平台管理系统|electron27+react18后台模板EXE
基于electron27+react18ʺrco电脑端后台管理程序EXE实例ElectronRAdmin。 electron27-react18-admin 基于跨平台技术Electron集成Vite.js构建桌面端React18后台管理系统应用解决方案。支持dark/light主题、中英文/繁体 -
React技术栈支援Vue项目,你需要提前了解的
写在前面 react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,而vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听, 当属性变化的时候,响应式的更新对应的虚拟dom react的思路通过js来生成html, 所以设计了jsx,还有通过js来