frontend专题
vue实现录音并转文字功能，包括PC端web，手机端web
vue实现录音并转文字功能，包括PC端，手机端和企业微信自建应用端 不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。 原理 浏览器实现录音并转文字最快捷的方法是通过Web Speech API来实现，这是浏览器内置示例的api方法，可以直接调用，无需引入任何依赖包，唯一需要注意的是浏览器的兼容性，具体可查看官方文档 链接: Web Speech API
Vue3 el-dialog 二次封装踩坑实录（v-model moduleValue 不触发）
如果你封装了一个el-dialog的子组件，想通过父组件v-model的形式调用，切记不能使用v-model，要使用 v-model:[你的参数]，例如 v-model:visible <template><el-dialogv-model="dialogVisibale":title="title"width="800px"><el-card class="mb-5 mt-2">测试效果</e
Vue3+ts(day03：ref和reactive)
学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes 觉得有帮助的同学，可以点心心支持一下哈（笔记是根据b站上学习的尚硅谷的前端视频【张天禹老师】，记录一下学习笔记，用于自己复盘，有需要学习的可以去b站学习原版视频） 一、ref 创建（基本类型的响应式数据） 作用：定义响应式变量。语法：let xxx = ref(初始值)。返回值：一
结合生活-浅谈Vue生命周期
结合生活-浅谈Vue生命周期 没有亲身经历的事物，是永远进入不了你的脑袋里面的，永远不会深刻 Vue.js生命周期 上面是Vue官方文档里展示的生命周期图示，还建议大家： 上图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。 接下来是正题： 我们把产品的生命周期与Vue的生命周期做比较（总体思想）： 生产产品 --》》》-
vue.config.js配置文件（build包通用）
vue.config.js配置文件 const path = require('path')const resolve = dir => path.resolve(__dirname, dir)const webpack = require('webpack')module.exports = {/* # # 基本路径 */publicPath: process.env.NODE_ENV =
Vuex中getters的使用方法
Vuex中getters的使用方法 前提脚手架搭好Vuex，项目内store文件夹下的index.js实例代码 export default createStore({state: {todos: [{ id: 1, text: '...1', done: true },{ id: 2, text: '...2', done: false },{ id: 3, text: '...3', do
Vue中使用Vuex获取多个state状态的4种写法
Vue中使用Vuex获取多个state状态的4种写法 写法①（初级） computed: {count () {return this.$store.state.count},count1 () {return this.$store.state.count1}} 写法②（原理级） computed: mapState({count: state => state.count,count
webpack前端性能优化- HappyPack多线程打包-打包速度提升n倍
HappyPack 由于运行在 Node.js 之上的 webpack 是单线程模型的，我们需要 webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力 HappyPack 插件就能实现多线程打包，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程，来提升打包速度！ 线程和进程都可用于实现并发，一个进程由一个或多个线程组成，线程是一个进程中代码的不同执
15个JQUERY 翻书插件
15个JQUERY 翻书插件 15+ Best jQuery Page Flip Book effect with examples December 26, 2012 | Article In this Article we are providing best jQuery html5 page flip book with examples and
【React】Sigma.js框架网络图-入门篇(2)
通过《【React】Sigma.js框架网络图-入门篇》有了基本认识 由于上一篇直接给出了基本代码示例，可能看着比较复杂也不知道是啥意思； 今天从理论入手重新认识下！ 一、基本认识 首先，我们先了解下基础术语： 图(Graph)：由节点（Node）和边（Edge）组成的一种数据结构，用于描述事物之间的关系Node：节点，表示事物 例如：python、java、编程语言… Edge：边
前端项目文件夹命名，用横线好，还行下划线好
对于前端项目文件夹的命名，通常建议使用短划线（横线），因为它是在 Web 开发中较常见的命名风格，并且在 URL 中使用短划线可以更清晰地表示单词之间的分隔。这种命名风格也符合许多流行的前端框架和工具的约定，比如 Vue.js 和 Angular。 使用短划线的优点包括： 1、可读性： 短划线可以更清晰地分隔单词，提高了文件夹名称的可读性。 2、一致性： 大多数前端项目和框架都倾向于使用短划线
【Vue】如何使用Webpack实现打包操作
一、Webpack介绍 Webpack最主要的作用就是打包操作，由两个核心部分构成分别是“出口”与“入口”。wbepack是现在比较热门的打包工具了，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。说的直白一点，通过webpack打包操作，我们可以把原来的js文件通过打包，需要使用的时候直接引用，这样可以实现模块化开发，当然它的功能还不止于此。本文就介绍一个简单的
CSS规则层叠时的优先级算法 - lunaticsun.com - CSDNBlog
导读： 本文首发于 http://www.lunaticsun.com/article/cascading-style CSS 规则的优先级是Web前端开发人员必须理解的一个概念，我们常用的添加样式的方法有4种。 inline styleembeded styleexternal styleuser style inline style是丑陋的，它们穿梭在HTML文
彻底弄懂CSS盒子模式之三
导读： 彻底弄懂CSS盒子模式三(浮动的表演和清除的自述) 1.彻底弄懂CSS盒子模式一(DIV排版快速入门)2.彻底弄懂CSS盒子模式二(导航栏实例)3.彻底弄懂CSS盒子模式四(绝对定位和相对定位) 一、下面请看float的精彩表演，有请。大家好,我是float,欢迎访问CSS家族,在CSS家族中,在当今CSS排版流行的年代,我可扮演着重要的角色哦。因为我的工作对网页设计
新手学习DIV+CSS难点之经验总结
导读： 1、网页居中显示： 需要设置两个地方，一个是body，一个是外边框div。 CSS： body{ margin:0; padding:0; text-align:center; } #main{ /*最外层DIV*/ width:760px; margin:0 auto; padding:0 } 2、文字垂直居中显
基于SpringBoot + Vue实现的校园（通知、投票）管理系统设计与实现+毕业论文（12000字）+答辩PPT+指导搭建视频
目录 项目介绍 运行环境 技术栈 效果展示 论文展示 总结 项目介绍 本系统包含管理员、用户、院校管理员三个角色。 管理员角色：用户管理、院校管理、单位类别管理、院校管理员管理、单位管理、通知推送管理、投票信息管理、通知回复管理等。 用户角色：个人中心管理、单位管理、通知推送管理、投票信息管理、通知回复管理等。 院校管理员角色：单位管理、通知推送管理、投票信息
vue使用外部的模板
在 Vue 2 中，如果你希望使用外部的 HTML 文件内容作为模板，有几种方法可以实现，但每种方法都有其局限性或需要注意的事项。下面是一些可能的方法： 1. 使用 AJAX 加载外部 HTML 你可以使用 AJAX 来异步加载外部的 HTML 文件，然后将其插入到 DOM 中。这种方法比较灵活，但需要注意跨域问题以及 HTML 内容的安全性。 export default {data()
docker部署前端项目（三）简易迅速版本
前两个docker 部署都出现了 意外，通过dockerfile 文件操作的时候， 不是 npm 无法下载，就是 npm build 无法打包 总是困难重重，原因甚多，不是网络导致，就是版本不对， 原因可能是 node 版本和 npm 版本导致，我们可以如下操作 # 运行 npm install 安装依赖RUN npm config set strict-ssl falseRUN npm c
uniapp-css多颜色渐变：左右+上下
案例展示 案例代码： 代码灵感：使用伪类进行处理 <view class="headBox"></view> .headBox {height: 200rpx;background: linear-gradient(to right, #D3D5F0, #F0DCF3, #F7F6FB, #DAE8F2, #E1D3EE);position: relative;}.headBox:
使用JavaScript日历小部件和DHTMLX Gantt的应用场景（一）
DHTMLX Suite UI 组件库允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件，这些组件可以轻松组合到单个应用程序界面中。 DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理应用程序的所有需求，是完善的甘特图图表库。 DHTMLX Gantt 8.0正式版下载 在项目管理中，合理利用时间起
vue echarts折线图 折线堆积图和折线面积图
vue echarts折线图 折线堆积图和折线面积图 1、折线堆积图和折线面积图的结合； 上代码 <template><section><divid="performaceLineChart"ref="performaceLineChartRef"style="width: 100%; height: 500px"></div></section></template><script>i
React 之 组件模块依赖
导入（Import）和导出（exporing）组件 在一个文件中声明多个组件，但是文件变得太大的话就不方便查看了。要解决此问题，你可以将一个组件放到一个单独的文件中并（导出） export 组件，然后在另一个文件中（导入） import 该组件。 每个 React 组件就是 JavaScript 函数，函数中可以书写 markup，这些 markup 将由 React 渲染到浏览器中。R
Java毕业设计 基于SpringBoot vue城镇保障性住房管理系统
Java毕业设计 基于SpringBoot vue城镇保障性住房管理系统 SpringBoot 城镇保障性住房管理系统 功能介绍 首页 图片轮播 房源信息 房源详情 申请房源 公示信息 公示详情 登录注册 个人中心 留言反馈 后台管理 登录 个人中心 修改密码 个人信息 用户管理 房屋类型 房源信息管理 房源申请管理 住房分配管理 留言板管理 轮播图管理 公示信息管理 角色：用户 管理员
国产麒麟系统下打包electron+vue项目（AppImage、deb）
需要用到的一些依赖包、安装包以及更详细的打包方法word以及麒麟官网给出的文档都已放网盘，链接在文章最后！！！！！！！！！！！！！！！！！！ 搭建开发环境可参考之前文章：银河麒麟v10安装前端环境（Node、vue、Electron+vite）_麒麟系统安装nodejs-CSDN博客 一.将项目打包成两种格式的包 第一种Appimage包（这种包比较简单没太多环境配置），下面是对此包的解释