- 博客(128)
- 收藏
- 关注
RSS订阅原创 移动端浏览器兼容性问题解决方案
这可以帮助确保你的代码能在旧版本的浏览器上运行。这样，你就能在支持 backdrop-filter 的浏览器上使用它，同时在不支持的情况下也有一个可以接受的回退方案。如果你正在使用 PostCSS 或其他 CSS 处理工具，cssTarget 可能是你自己定义的一个配置选项，用于指定应该转译 CSS 的目标版本。例如，如果你设置 cssTarget 为 “ie 11”，那么你的 CSS 将会被处理，以确保它能在 Internet Explorer 11 上运行。
2023-09-01 11:22:42
593
原创 关于禁止移动端h5页面缩放
在浏览器中完全禁用缩放（尤其是在移动设备上）可能会对某些用户（如视力不好的用户）造成困扰。在使用这段代码时，确保它不会对你的网站的其他功能产生影响。另外，这个解决方案可能不适用于所有浏览器，因为浏览器的缩放行为和对事件处理器的支持可能会有所不同。在使用这个解决方案之前，你应该在你关心的所有浏览器中进行测试。在Vue项目中，你可以通过添加特定的meta标签来防止在Safari浏览器中放大和缩小页面。这将阻止大多数移动浏览器的缩放，但是如果用户使用浏览器的缩放控件，仍然可以进行缩放。这是为了提高可访问性。
2023-08-29 15:29:38
2257
原创 vue3+vite中使用postcss-px-to-viewport适配问题
【代码】vue3+vite中使用postcss-px-to-viewport适配问题。
2023-08-15 10:57:35
3564
2
原创 移动端/PC端适配实践
第一种方案amfe-flexible/lib-flexible和postcss-pxtorem，是阿里手淘系开源的一个库，用于设置font-size，同时处理一些窗口缩放的问题。我们使用的vant-ui，他的viewport适配方案，是按照设计稿375px去做的。所以第二种postcss-px-to-viewport更适合使用，postcss-px-to-viewport将px转换成视口单位vw。使用amfe-flexible/lib-flexible和postcss-pxtorem。
2023-08-14 14:51:26
1094
原创 vuex实现项目中登录状态的管理
工具:chorme浏览器安装Vue.js devtools方便调试登录场景：页面的导航处或其他地方有时会显示用户现在的登录状态，状态可分为：未登录，正在登录（loading），登录成功并显示用户名。有些页面是不需要登录就可以让用户浏览的，但是有些页面必须登录才可以进入浏览。实践：场景1思考与实践用vuex创建一个数据仓库//src目录下新建一个store目录，创建index.js如下//创建数据仓库import Vuex from 'vuex';import vue from
2021-09-17 18:12:45
1615
1
原创 animation实现一个搜索扩散动效
上gif简单分析一下1.旋转的线，我们设置他的旋转位置从他的左下开始转动就ok了，再把最中的的圆层级设置高一点，就可以遮挡住线的一部分，看起来就是旋转的线在绕着中心的圆旋转。2.闪现的点，控制百分比来实现展示顺序，比如我设置的3s要执行完一次闪烁。上代码html结构如下<div class="no-warning" v-show="true"> //这是最外层圆形扩散 <div class="ou
2021-09-16 18:24:22
301
原创 vue-slider-component滑块拖动插件的使用
效果图你可以左右拖动它的范围进度条，标签的样式都可以通过props更改文档里面写的很清楚。你可以设置一个点拖动，当然也可以很多个点拖动，上图我用了两个点。数值的范围，数值的最大最小值你也可以控制。总体使用感受很好，功能很齐全，文档也有具体api的使用和样例。使用文档gitub地址跟着里面的QuickStart安装，参数配置都写的很清楚，比如我写了一个demo首先你去npm install vue-slider-component --save然后你去main.js里面引入他import V
2021-08-31 17:50:10
5064
原创 webpack静态页面打包
1.目录结构2.配置所需依赖npm i "devDependencies": { "@babel/core": "^7.8.4", "@babel/preset-env": "^7.8.4", "@types/node": "^14.0.11", "babel-loader": "^8.0.6", "clean-webpack-plugin": "^3.0.0", "compression-webpack-plugin": "^4.0.0",
2021-07-25 16:20:08
1322
1
原创 VUE3效率的提升
静态提升vue2中当我们写如下代码<h1>hello</h1>静态节点如下render(){ createVNode("h1",null,"Hello World")}Vue3中认为静态节点就不会改变了，没有必要放在渲染函数中，因为渲染函数在更改时会反复运行。如下只创建一次，之后在render函数中重复使用就可以了const hoisted = createVNode("h1",null,"Hello World")function render(){
2021-06-16 19:02:36
181
原创 vite的理解并对比同类型的脚手架工具
webpack原理webpack打包后启动开发服务器，当改动模块后，跟改动模块相关的模块都要进行重新打包所以热替换慢vite原理直接请求服务器，先请求页面，页面发送请求到index.js，然后再发送对应模块的请求。综上总结：1.webpack会先打包然后启动开发服务器，请求服务器时直接给予打包结果。vite时直接启动开发服务器，请求哪个模块再对该模块进行实时编译。2.现代浏览器本身支持ES Module，会自动向依赖的Module发送请求，vite利用这一点，将开发环境下的模块文件，作为浏览
2021-06-16 17:55:28
370
1
原创 VUE高德地图实现根据移动覆盖点获得经纬度坐标和详细地址及根据经纬度确定覆盖点
经纬度手动定位，输入经纬度，显示详细地址。 async handleMapPositioning() { const result = await this.$api.getProductLocation(this.unionId); this.reMap = new AMap.Map('map-container-re-locate', { zoom: 13, viewMode: '2D'.
2021-05-27 18:54:55
1105
原创 websocket聊天室实现
websocket前置知识socket连接建立直接发送，有一端断开了通道销毁 实时性http很快就会销毁断开，对消息的格式有限制，客户端主动的发起实时性解决方案:轮询长连接，请求的时候带keep-alivewebsocket专门解决实时传输的问题客户端建立连接通道客户端发送一个http格式的消息（特殊格式），服务器响应一个http格式的消息（特殊格式）,http握手双方自由通信，通信格式按照websocket的要求进行客户端或服务器断开，通道销毁socket.io封装w
2021-05-14 17:30:00
240
原创 前端网络总结
参考：浏览器工作原理1. DNSDNS(Domain Name System)是域名“系统”的英文缩写，是一种组织成域层次结构的计算机和网络服务命名系统，它用于TCP/IP网络，它所提供的服务是用来将主机名和域名转换为IP地址的工作。向浏览器的地址栏中输入一个URL按回车后：看浏览器缓存，如果浏览器不认识看本机host，然后是家里的路由器有没有缓存映射，如果都没有，有可能访问上级路由城市路由，继续向上级找。访问网站输入网站域名，DNS服务器就解析我们的域名为ip。这样我们实际访问的就是对应的ip地
2021-04-30 23:50:22
210
1
原创 egg.js
脚手架搭建项目npm init egg --type=simple npm inpm run dev //启动目录结构app/router.js 用于配置 URL 路由规则//app相当于一个全局对象module.exports = app => { const {router, controller} = app; router.get('/', controller.home.index); router.get('/text', 'ho.
2021-04-30 23:41:27
127
1
原创 如何理解虚拟DOM
1. 什么是虚拟dom一个普通的js对象，我们可以在这里看到⬇️，描述了视图界面的结构mounted(){ console.log(this._vnode)}在vue中，每个组件都有一个render函数，每个render函数会返回一个虚拟dom树，也就是说每个组件都对应一棵虚拟dom树。2.为什么需要虚拟dom在vue中，试图渲染会调用render函数，这种渲染不仅发生在组建创建的时候，同时发生在试图依赖的数据更新的时候，如果渲染的时候直接使用真实的dom，真实dom的创建更新插入等操作会
2021-04-02 14:52:49
225
原创 json对象数组的创建，遍历，增删改，数组的操作技巧
首先我们手动写个demolet demo = { "name": 'jingjing', "age": 10, "likes": ['dancing', 'drawing', 'running'], "others": [ { 'name': 'li', 'age': 50, }, { 'name': 'wang', 'age':
2020-11-18 16:11:55
386
原创 vuex
Vuex_State安装npm install vuex --save使用在src目录下新建store文件，在store中创建store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default storeVuex 通过store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中。通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过
2020-11-17 19:07:41
159
原创 pwa
参考pwa1.添加manifest.json配置页面参数：{ "name": "WECIRCLE", "short_name": "WECIRCLE", "icons": [ { "src": "./img/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, {
2020-10-27 10:08:39
344
原创 AntDesign的select组件placeholder不显示问题
如下，select组件同时绑定了v-model和placeholder，当v-model绑定data中属性为空时，select绑定的placeholder属性不显示。 <a-select v-model="level" placeholder="选择日志级别" style="width: 250px" allow-clear> <a-select-option value="info">一般</a-select-option>
2020-10-10 18:04:07
2406
原创 vue判断移动端还是pc端显示不同组件
移动端和pc用了两套ui库 在不同设备显示不同组件 mounted() { if (this._isMobile()) { alert("手机端"); this.deviceType = 'mobile' } else { alert("pc端"); this.deviceType = 'pc' } }methods里面写判断移动端 _isMob
2020-09-24 17:42:26
1330
原创 node+officegen将代码导成word文档并添加页眉
officegen文档首先你要知道node.js如何读取文件和写入文件//读取const fs = require('fs')const path = require('path')const filename = path.resolve(__dirname,'./myFiles/1.txt')async function test(){ const content = await fs.promises.readFile(filename,'utf-8'); console
2020-09-22 17:46:56
2319
原创 记一次vue组件编写
实现效果：彩色刻度条随着底下5个数值的不同而变换长度，数值和相邻两个进度条缝隙对应，游标随着传入的值不同而变换位置。分析: 进度条总长度为100%，我们可以根据每一段进度占总体进度条的百分比来进行计算，得出每一段进度的长度，底下的进度数值同理，游标的位置也可进行计算得出百分比。已知： scale: [0, 30, 132, 438, 540, 644],//数值段 currentValue:200,//当前值计算：游标的位置：我们可以用（当前值-最小值）/（最大值-最小值）*100%来
2020-09-20 22:27:26
161
原创 nuxt学习笔记和踩坑记录
前置知识Nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）。nuxt.js她简化了SSR的开发难度。那什么是ssr？SSR，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。SSR有两个优点：SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。安装首先你要有vue-cli，然后你就可以初始化vue init nuxt/star
2020-09-15 14:57:45
1799
1
原创 Vue好用插件收集
一.滚动条插件各种不同样式滚动条Vuescroll.js官方文档地址二.无缝衔接滚动vue-seamless-scroll安装：npm install vue-seamless-scroll --savemain.js中添加import vueSeamlessScroll from 'vue-seamless-scroll'Vue.use(vueSeamlessScroll)文档地址...
2020-08-14 15:49:52
545
原创 vue中引入echarts
第一步下载npm install echarts --save在main.js中添加import echarts from 'echarts' //引入echartsVue.prototype.$echarts = echarts //引入组件第二步创建一个图表，一定要写图表的宽高<div id="vegpie-chart" style=" width:100%;height: 376px"></div>第三步在methods中获取绘制 var vegCh
2020-08-14 14:20:02
287
1
原创 vue-cli4中如何引入高德地图
使用的是vue-cli4，首先去高德地图获取你的key。第一步在vue.config.js中配置module.exports = { configureWebpack: { externals: { 'AMap': 'AMap' } }}第二步在public目录下的index.html中添加（写在body里面） <script src="https://webapi.amap.com/maps?v=1.4.15&a
2020-08-12 16:37:54
1230
1
原创 实习心得
2020 07-23一.布局分析由外向内的分析页面布局。确定页面的可视区，划分页面的模块。每一个模块中，分析他的行模块再分析行中的列模块。分析每一个模块的布局方式。思考宽高固定还是自适应。模块构建完毕后，再开始写每一模块中的样式。每一部分的样式布局要自己思考设定，不能照搬设计图，设计图只是为了给你它的宽高等一些参数。（注意设计图中的line-height和height的设定值）二.代码时刻注意代码格式化（shift+command+f）（不能出现空行，空格，重复代码）命名规范（要
2020-07-23 19:34:23
296
原创 前端缓存
http缓存指的是: 当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。常见的http缓存只能缓存get请求响应的资源，对于其他类型的响应则无能为力，所以后续说的请求缓存都是指GET请求。http缓存都是从第二次请求开始的。第一次请求资源时，服务器返回资源，并在respone header头中回传资源的缓存参数；第二次请求时，浏览器判断这些请求参数，命中强缓存就直接200，否则就把请求参数加到request .
2020-07-04 15:22:14
246
原创 JS事件捕获和事件冒泡
事件捕获：DOM接收的事件最先应该是window接收，然后再一节一节往下，最后才是具体的元素接受到事件。事件冒泡：IE认为DOM事件应该由具体元素最先接受事件，然后再一节一节往上，最后再由window接收事件。W3C将两种方案做了统一，即：把DOM事件分为两个阶段，事件捕获阶段和事件冒泡阶段，例如：当页面某一个元素被点击，首先是事件捕获阶段，window最先接收事件，然后一节一节往下捕获，最后由具体元素接收，然后再由具体元素一节一节往上，最后window会再次接收事件。这样当页面上一个对象触发某个事件
2020-07-03 16:28:01
127
原创 网络之存储（cookie webStorage ）
cookie 存储数据的功能已经很难满足开发所需，逐渐被 WebStorage、IndexedDB 所取代cookie详情见cookie①LocalStorage保存的数据长期存在（特点：持久），下一次访问该网站的时候，网页可以直接读取以前保存的数据。仅在客户端使用，不和服务器进行通信。可以作为浏览器本地缓存方案。用来提升网页首屏渲染速度（根据第一次返回，将一些不变得信息直接存储在本地）存入数据：locoalStorage.setItem("key","value");读取数据：locoalSt
2020-06-16 21:29:20
197
原创 express浅入浅出
01express基本使用// 创建一个express实例require("./hehe");const express = require("express")const app = express();//创建一个express应用// app实际上是一个函数，用于处理函数请求// 配置一个请求映射，如果请求方法和请求路径均匹配满足，交给处理函数进行处理// app.请求方法（“请求路径”，处理函数）app.get("/abc",(req,res) => { //req和r
2020-06-12 00:10:06
134
原创 细细品一品VUE
1.更改数据后，页面会立刻重新渲染吗？数据变化，页面就会重新渲染。VUE更新DOM操作是异步执行的，只要侦听到数据变化就会开启一个异步队列，同步执行栈执行完毕后会执行异步执行栈，队列中微任务先执行。2.如何在更改数据后，看到渲染后页面上的值？利用vm.$nextTick或Vue.nextTick页面重新渲染，DOM更新后，会立刻执行vm.$nextTick△两者的区别：vue.nextTick内部函数的this指向window，vm.$nextTick内部函数的this指向vue实例对象。ne
2020-06-09 01:44:31
240
原创 ES6异步解决方案Promise
JS经常会遇到一些异步任务：（1）ajax请求服务器（2）监听按钮是否被点击（3）setTimeout等待一段时间后做某些事情。ES6的异步处理模型分为两个阶段和三个状态。两个阶段：unsettled（未决），settled（已决）三种状态：pending（挂起），resolved（完成），rejected（失败）Promise通过new promise（）创建一个任务对象。function matchingPlayer(callback){ return new Promise((
2020-06-04 16:45:17
246
原创 vue系统学习
文章目录01课程准备02开始使用Vueel$mountdata插值表达式03vue的响应式-1vm.$elvm.$nextTick & Vue.nextTick04vue的响应式-205扩展_剖析Vue响应式原理06Vue相关指令v-prev-cloakv-oncev-textv-html01课程准备所有代码及文件放到github上进行托管，同学们自行clonegithub地址：h...
2020-05-19 11:46:13
602
2
原创 JS之闭包
闭包表面现象：综上所以什么是闭包：现在这个father（）就是一个 闭包，由父函数和子函数构成，子函数在调用的时候读取父函数的变量，就产生了闭包。（1）有父子函数的关系（2）子函数调用了父函数的变量（3）子函数有调用闭包底层原理必须懂的几个点1.变量的生命周期：局部变量的生命周期在函数执行完成之后就到头了；全局变量的生命周期在页面关闭之后就到头了。2.垃圾回收机制：定期检查你数...
2020-04-20 15:58:27
240
原创 JS之性能优化
一.页面级优化1.css Sprites雪碧图：减少http请求2.使用CDN使用第三方CDN，不需要你自己下载3.压缩合并的代码webpack gulp4.使用DNS预解析二.代码级别的1.减少DOM操作2.异步加载默认：script开始解析，后面代码处于阻塞暂停状态defer：script解析，后面代码也解析，都解析完了之后开始执行asnyc：script解析，后...
2020-04-19 00:41:35
176
原创 VUE中路由原理
路由的原理hash模式下<body> <!-- router-link --> <a href="#/">首页</a> <a href="#about">关于</a> <!-- router-view --> <div id="view"></div><...
2020-04-19 00:32:30
271
原创 JS之事件循环
JS运行的环境叫宿主环境执行栈：call stack，一个数据结构，用于存放函数的执行环境，没一个函数执行之前，他的相关信息会加入到执行栈。函数调用之前，创建执行环境，然后加入到执行栈，函数调用之后，销毁执行环境JS执行引擎永远执行栈的最顶部异步函数：等到时机到了在执行，比如事件处理函数。异步函数执行的时机，会被宿主环境控制。浏览器宿主环境中有5个线程：1.JS引擎：负责执行执行栈...
2020-04-15 18:39:35
202
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人