前端 终端 实战vue
在线代码编辑器，vue2集成codemirror
1.使用组件 组件源码版本license vue-codemirror 地址 4.0.6 MIT script-loader 地址 0.7.2 MIT 2.组件代码 Codemirror 3.组件使用 <Codemirror v-model='form.content'></Codemirror> ......
vue2集成luckysheet，实现在线编辑excel，将静态文件添加本地优化加载速度
1.使用组件 组件源码版本license luckysheet 地址 2.1.13 MIT 2.组件代码 Luckysheet 3.添加luckysheet静态文件至本地 ruoyi-ui/public/index.html 4.截图 5.示例项目 项目一：gitee ......
VUE el-table表格实现双击编辑，单机空白处放弃修改，回车提交修改
# VUE el-table表格实现双击编辑，单机空白处放弃修改，回车提交修改 ### template ```html {{ scope.row[column.prop] }} ``` ### script ```js data() { return { // 数据量 total: 100, // ......
vue2集成simple-mind-map思维导图，实现在线制作思维导图
1.使用组件 组件源码版本license simple-mind-map 地址 0.6.6 MIT @toast-ui/editor 地址 3.1.5 MIT v-viewer 地址 1.6.4 MIT xlsx 地址 0.18.5 Apache-2.0 vue-i18n 地址 8.27.2 MIT ......
vue2集成tiny-whiteboard白板，在线画图工具
1.使用组件 组件源码版本license tiny-whiteboard 地址 0.1.12 MIT 2.组件代码 <template> <div ref="container" class="container"> <div class="canvasBox" ref="box"></div> < ......
vue 环境配置
1. 根目录下创建 .env .env.production .env.development 2. 在vite.config.js中使用 ``` defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd()); const ......
未来前端框架将持续推进组件化开发
前端框架在过去几年间取得了显著的进步和演进。前端框架也将继续不断地演化，以满足日益复杂的业务需求和用户体验要求。从全球web发展角度看，框架竞争已经从第一阶段的前端框架之争（比如Vue、React、Angular等），过渡到第二阶段的框架之争（比如Next、Nuxt、Remix、小程序等）。 ......
vue + vite 在index.html中使用环境变量
1. npm install vite-plugin-html -D 2. vite.config.js ``` import { createHtmlPlugin as useHtmlLoader } from 'vite-plugin-html' useHtmlLoader({ inject: ......
vue2集成bpmn流程图，可导入导出预览等
1.使用到的组件 组件源码版本license bpmn-js 地址 7.3.1 bpmn.io bpmn-js-properties-panel 地址 0.37.2 MIT camunda-bpmn-moddle 地址 4.5.0 MIT 版本一定要对，否则可能会报错 2.组件代码 <templat ......
vue3
一、vue3最终响应式原理 let person = { name: '张三', age: 15, } //我们管p叫做代理数据，管person叫源数据 const p = new Proxy(person,{ //target代表的是person这个源对象，propName代表读取或者写入的属性名 ......
Vue的学习笔记
一、弹窗的初始化 1.弹窗打开的时候想要对弹窗进行一些初始化数据（比如从表默认选中第一行），可以用@opened绑定方法进行操作，详见： https://element.eleme.cn/#/zh-CN/component/dialog 二、显示与不显示：v-show 视频学习地址（03 - key ......
验证码识别全流程实战
> **本文将介绍验证码的历史与发展、验证码破解的历史与发展，验证码破解全流程实战。** # 验证码的历史与发展 ![file](https://img2023.cnblogs.com/other/488581/202307/488581-20230731100649007-1534073785.p ......
vue2集成tinymce富文本编辑器，添加本地资源解决加载慢问题
组件源码版本license tinymce 地址 4.9.3 MIT 示例项目一 源码地址：gitee 1.封装组件 <template> <div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:c ......
【vue】vue路由传参的三种方式
【vue】vue路由传参的三种方式 原文链接：https://blog.csdn.net/liyunkun888/article/details/83269343 前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传 ......
前端vue uni-app cc-countdown倒计时组件
随着技术的不断发展，传统的开发方式使得系统的复杂度越来越高。在传统开发过程中，一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改，造成牵一发而动全身的情况。为了解决这个问题，我们采用了组件化的开发模式。通过组件化开发，可以有效地实现单独开发，单独维护，而且它们之间可以随意的进行组合。大大提升 ......
Vue实现嵌套路由
Vue实现嵌套路由 原文链接：https://blog.csdn.net/zhanggqianglovec/article/details/124308680 嵌套路由又称为子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路景观也按某种结构对应嵌套的各层组件，例如我们看V ......
vue3
1、ref 深拷贝 视图层更新不改变源数据 const num = 1 const refNum = ref(num) const click = ()=>{ refNum++ //refNum 已经改变了，但原数据num不变 } 2、toRef 源数据改变不更新视图 ......
前端HTML基础
当使用 HTML 创建网页时，你需要了解以下几个关键概念和常用标签： 基本的文档结构：一个 HTML 文档从 <html> 标签开始，然后分为两个主要部分： <head> 标签：用于放置与网页相关的元数据和引用的外部资源，如标题、样式表和脚本文件链接等。 <body> 标签：用于放置网页的实际内容， ......
前端工程化解决方案
# 引言 在大前端的趋势下，传统的前端开发模式已经不能很好地承载实际的项目需求。因此，我们需要一系列解决方案来使项目变得规范、可配置、易于优化等。 本文将针对这个问题进行简单分析，讲解前端工程化的概念、落地实践，并给出一系列解决方案。 > 本篇文章是本人在 2020年时推进公司内部前端工程化所写，在 ......
OpenResty 入门实战(2)--简单使用
本文主要介绍 OpenResty 结合 lua 的使用，Nginx 功能的一般使用可参考：Nginx 入门实战(2)--简单使用；文中所使用到的软件版本：Centos 7.9.2009、OpenResty 1.21.4.2。 1、hello world server { listen 9096; s ......
Vue3中使用TypeScript封装axios遇到的问题(AxiosRequestConfig)
>如果您有更好的解决方法，欢迎评论区评论。 ### 版本 ~~~ "dependencies": { "axios": "^1.0.0", "vant": "^4.6.3", "vue": "^3.3.4", "vue-router": "^4.2.4", "vuex": "^4.1.0" }, " ......
vue 默认页面无法打开
默认打开的界面是白色的，需要输入正确的路由才能访问正确的页面。 router的index.ts（js）文件中设置路由规则,例如我们默认打开index页面，我们只需要设置routes： const routes = [ { path:"/", name:"brx", redirect:'/index' ......
Vue2 响应式原理小结
为了面试讲Vu2响应式的时候更顺利点，我想在需要提前准备一下： Vue2.5.17 的源码 export class Observer { value: any; dep: Dep; vmCount: number; // number of vms that has this object as ......
- 通过结合前端页面实现ORM对数据的增删改查 - Django中如何创建表关系 - 一对一 - 一对多 - 多对多 - Django框架的请求生命周期流程图 - 路由层urls.py - 视图层views.py - 模板层templates
通过结合前端页面实现ORM对数据的增删改查 案例：写一个页面，就是把数据库中的数据以表格的形式展示出来，然后在每一行的后面加两个按钮，分别是修改、删除的按钮 1.首先在数据库创建一个表格 1.在model.py中创建表格 2.python manage.py makemigratins迁移记录 3. ......
vue移动端适配
1.安装 npm add postcss-pxtorem@5.1.1 amfe-flexible -S amfe-flexible是可配置可伸缩布局方案，主要是将1rem设为viewWidth/10。 postcss-pxtorem是postcss的插件，用于将像素单位生成rem单位。 2.在vue ......
vue中ref和reactive的区别
在 Vue 3 中，`ref` 和 `reactive` 是两种不同的响应式数据处理函数，它们有以下区别： 1. **处理的数据类型**： - `ref`：`ref` 函数用于处理基本数据类型，如数字、字符串、布尔值等。它可以将基本类型数据包装成一个响应式的引用，使其在模板中能够自动追踪变化。 - ......
如何开发一套苹果cms前端模板
> 本文运用了苹果cms官网的模板开发教程，开发了一套苹果cms的前端模板，感兴趣的同学可以去github下载使用。 ### 什么是模板 模板是网站的主题外观，也被称为主题或皮肤。通过使用不同的模板，网站的前台可以以不同的样式展示。这就像人们的服装一样，人们打扮得漂亮会吸引人，同样地，一个好看的模板 ......
uniapp+vue3+ts 使用pinia报错
"hasInjectionContext" is not exported by "node_modules/vue-demi/lib/index.mjs", imported by "node_modules/pinia/dist/pinia.mjs". 11:36:19.397 at ../no ......
使用vue制作一个聊天框
使用 Vue 制作的简单聊天框： <template> <div class="chat-box"> <div class="message-list"> <div class="message" v-for="(message, index) in messages" :key="index"> ......
vue2遇到的一些错误
一、VUE中的VUEX如何调用modules里面的mutations和state ...mapMutations("workflow",['setApproverConfig', 'setApprover']), 二、Non-nested routes must include a leading ......