前端 终端 实战vue
Vue3 Element-Plus 一站式生成动态表单
数据接口设计 type TreeItem = { value: string label: string children?: TreeItem[] } export type FormListItem = { // 栅格占据的列数 colSpan?: number // 表单元素特有的属性 pro ......
前端页面部署之后刷新页面之后出现HTTP 错误 404.0 - Not Found错误问题解决
前端页面部署能正常访问，但是一旦刷新页面就报如下错误：404.0 - Not Found 解决办法：下载IIS URL重写模版，并安装。下面为安装地址： URL Rewrite : The Official Microsoft IIS Site 安装之后IIS中出现如下IIS重写模块： 点击进去添加 ......
Vue 设置为history模式之后，刷新页面报404错误的解决办法
网上搜索出现很多修改前端或后端的方法试了都不行，后来在IIS中添加URL重写规则就解决了（如果没有Url重写模块,需要下载安装：rewrite_amd64_zh-CN.msi），设置重写之后会在网站前端根目录下生成一个web.config文件。所以如果嫌配置url重写麻烦的话，直接把这个web.co ......
vscode如何配置运行vue项目
在vscode中如何调试运行vue项目 在.vscode中添加launch.json内容如下 { // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=8 ......
一个简单案例的Vue2.0源码
本文学习vue2.0源码，主要从new Vue()时发生了什么和页面的响应式更新2个维度了解Vue.js的原理。以一个简单的vue代码为例，介绍了这个代码编译运行的流程，在流程中原始DOM的信息会被解析转换，存在不同的对象中。其中关键的对象有el、template、ast、code、render、r... ......
uniapp脚手架中vue3项目配置`@`,并且在vscode中有提示
uniapp脚手架中vue3项目配置@,并且在vscode中有提示 在vite.config.js中配置一下代码 import { defineConfig } from "vite"; import uni from "@dcloudio/vite-plugin-uni"; import { re ......
Vue多页面和单页面的场景
开发分类 实现方式 页面性能 开发效率 用户体验 学习成本 首屏加载 SEO 单页 一个html页面 按需更新性能高 高 非常好 高 慢 差 多页 多个html页面 整页更新性能低 中等 一般 中等 快 优 场景 单页面应用 系统类网站 内部网站 文档类网站 移动端站点 多页面应用 公司官网 电商类 ......
Angular 应用实现 Lazy Load(懒加载)的项目实战经验分享
笔者之前两篇掘金社区文章，分别介绍了企业级 Angular 应用开启 PWA 特性和服务器端渲染，从而提升用户体验的两种设计思路： Angular 应用支持 PWA(Progressive Web Application) 特性的开发步骤分享 基于 Angular Universal 引擎进行服务器 ......
Angular 应用的搜索引擎优化(SEO)实战指南
笔者之前在掘金社区发表了两篇关于 Angular 开发的文章，分别介绍了 Angular 支持服务器端渲染和 PWA 的技术细节： 基于 Angular Universal 引擎进行服务器端渲染的前端应用 State Transfer 故障排查案例 Angular 应用支持 PWA(Progress ......
2023版 STM32实战1 LED灯驱动(电路与代码都讲解)
电路图 常规画法（带限流电阻计算公式） 设LED 电流为20mA(统一单位为 0.02A) 电压为3.3V 限流电阻=(电源电压-负载正向工作电压)/工作电流 限流电阻=(5V-3.3V)/0.02mA=1.7/V0.02A=85R 省事画法（直接用IO输出） 代码（直接拷贝使用） 找对引脚！！！这 ......
CTF实战——1.ningen
一 、我们拿到第一题为ninge 1.先分析题目内容，在题目中告诉了我们一个关键信息，知道了秋明特别讨厌中国的六位数银行密码，喜欢四位数。从这里我们可以知道一个关键词为四位数。 2.打开附件发现内容包含着一张jpg格式的图片。 首先我们拿到一个图片文件我们首先查看此文件属性是否包含着隐藏信息。 可是 ......
【前端VUE】VUE环境安装
nodejs安装 nodejs教程 https://blog.csdn.net/muzidigbig/article/details/80493880 检查是否安装成功 VUE安装 npm install -g @vue/cli 创建VUE项目 vue create 项目名称 第一个和第一个是默认的 ......
基于 Angular Universal 引擎进行服务器端渲染的前端应用 State Transfer 故障排查案例
笔者之前这篇掘金文章一个 SAP 开发工程师的 2022 年终总结：四十不惑 提到，我目前的团队，负责开发一款基于 Angular 框架的电商 Storefront 应用。 这个 Storefront 是一个开源的、基于 Angular 和 Bootstrap 并为 SAP Commerce Clo ......
task0003前端项目准备的学习笔记（之前忘了发不好意思！）
2023-10-26 task0003前端学习笔记 JavaScript作用域学习笔记①：今天看了http://www.laruence.com/2009/05/28/863.html这位作者讲了js的作用域原理，让我豁然开朗，原来函数定义式与函数表达式的不同会导致作用域作用不一样比如：var na ......
vue3+element-Plus表格滚动联动
const Table0 = ref() const Table1 = ref() function syncScroll() { for (let i = 0; i < compareData.compareInfo.length; i++) { let firstTable = Table0.v ......
Vue3 + antDesign3.x 汉化 中文（解决日期混合中英文模式
依赖项版本 "ant-design-vue": "^3.2.20", "dayjs": "^1.11.10", "vue": "^3.0.5", 依赖处理 main.js中 import { createApp } from 'vue' import Antd from 'ant-design-vu ......
Vue 项目配置自动更新，自动刷新页面
今天用户反馈使用页面的时候，有时候点击没反应，排查下来，是因为发布版本的时候，用户那边没有加载最新的文导致的，然后根据思路，做了这个自动更新的功能 效果预览 http://demo.webwlx.cn/#/update 实现思路 1. 把当前版本的编译时间，通过环境变量的方式保存起来 打开 vite ......
前端页面的懒加载和预加载
前言 懒加载也就是延迟加载。当访问一个页面的时候，先把 img 元素或是其他元素的背景图片路径替换成一张大小为 1*1px 图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，从而减轻服务器压力，避免用户等待时间过长（一般在网站图片很多的时候使用 ......
iframe前端微服务
优缺点分析 iframe 适合的场景 由于 iframe 的一些限制，部分场景并不适合用 iframe，比如像下面这种 iframe 只占据页面中间部分区域，由于父页面已经有一个滚动条了，为了避免出现双滚动条，只能动态计算 iframe 的内容高度赋值给 iframe，使得 iframe 高度完全撑 ......
Vue 该如何实现组件缓存?
在面向组件化开发中，我们会把整个项目拆分为很多业务组件，然后按照合理的方式组织起来，那么自然会存在组件之前切换的问题，vue 中有个动态组件的概念，它能够帮助开发者更好的实现组件之间的切换。但是在面对需求频繁的变化，切换组件时，动态组件在切换的过程中，组件的实例都是重新创建的，而我们需要保留组件的状 ......
Vue-路由（vue-router）
路由：Vue-router（vue路由插件） 先了解下 route、routes、router三者之间的区别 （加$只是为了区别其它变量） router：一般指的是路由实例 ，如：vue的编程式导航 this.$router.push() routes：指创建 vue-router 路由实例的配置项 ......
vue-route
路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个 ......
Vue-mixins（混入）
mixins: [混入变量名称] 说明：不需安装，直接使用， 作用：多用于 提取公共 类似的数据和方法，和组件<script/>中书写一样，data、methods、钩子函数 使用：引入之后，同组件使用 script 中的数据和方法一样使用 功能点：引入之后，相当于mixins下的数据、方法和钩子函 ......
Vue-slot（插槽）
以下均已父组件为例：<my-box></my-box> <slot></slot> （无需安装，直接使用，使用组件时需引入对应组件） 说明：插槽就是内容分发API，将 <slot></slot> 作为承载内容分发的出口；简单的讲就是使用了插槽后就可以将<my-box>文本、HTML</my-box> ......
@vue/cli-01安装事项
@vue/cli安装存在以下两种： npm install -g @vue/cli vue --version or vue -V(注意是大写)查看版本 vue create 项目名称cd 项目名称npm installnpm run serve 1、默认安装 安装上面的步骤，一路回车即可 2、手动 ......
vue-alias配置
const path = require('path'); function resolve (dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack: (config)=>{ config.resolve. ......
vue-echarts图表组件
封装代码： <!-- * @Descripttion：图表组件--> <template> <div class='YxkEcharts'> <VEcharts :params="echartsObj"></VEcharts> </div> </template> <script> // 图表 co ......