蜗牛的博客

原创 Node版本自由切换之nvm安装教程

示例地址：C:\Users\Administrator\AppData\Roaming\nvm。2.解压后运行exe文件，一路默认就可以了，自定义的话，文件路径不要有中文；4.以vue项目为例，vue2项目一般使用14版本及以下。vue3项目一般使用16.20.xx版本及以上。1.nvm安装包下载，这里推荐1.1.7版本。下载16.20.0版本node。3.安装之后使用命令。5.切换node版本。

原创 前端vue需求：将当前页面转成图片或者PDF并下载

/方式二：pdf里分页，但是会有图片被截俩半的风险，需要根据实际情况调整。// allowTaint: true, //允许跨域。//将分辨率提高到特定的DPI 提高四倍。如果页面里有元素不想要，必须用样式消失。// y: 0, // 对Y轴进行裁切。nextTick包裹，确保样式生效。//方式一：采用一页纸，不分页。//按比例增加分辨率。

原创 VUE源码浅读

首先我们要知道vue代码如何运行的？【初始化及挂载】=>【编译】（parse-optimize-generate）=>【render function渲染】（响应式）=>【Virtual DOM】=>【更新视图】初始化及挂载在new了vue之后，Vue会调用_init函数进行（全局）初始化。初始化生命周期、事件、props、methods、data、computed、watch等。其中最重要的是通过Object.defineProperty设置setter和getter函

原创 前端常用的JavaScript代码函数-时间篇

时间日期格式转换Date.prototype.Format = function(formatStr) { var str = formatStr; var Week = ['日', '一', '二', '三', '四', '五', '六']; str = str.replace(/yyyy|YYYY/, this.getFullYear()); str = str.replace(/yy|YY/, (this.getYear() % 1

原创 前端常用的JavaScript代码函数-正则篇

匹配中文字符的正则表达式：[\u4e00-\u9fa5]匹配双字节字符（包括汉字在内）：[^\x00-\xff]匹配空行的正则表达式：\n[\s|]*\r匹配 HTML 标记的正则表达式：<(.*)>.*<\/\1>|<(.*)\/>匹配首尾空格的正则表达式：(^\s*)|(\s*$)匹配 IP 地址的正则表达式：/(\d+)\.(\d+)\.(\d+)\.(\d+)/g匹配 Email 地址的正则表达式：\w+([-+.]\w+)*@\w+([-...

原创 前端常用的JavaScript代码函数-通用篇

实现字符串长度截取function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\xff]/; var strre = ""; for (var i = 0; i < str.length; i++) { if (icount < len - 1) { temp = st

原创 2022年前端面试必须学会的知识点-网络与浏览器篇（持续更新中...）

一，部分请求中使用encodeURL转码？ URL只能用数字，英文和某些标点符号，不能用其他，需要 encodeURI:整个URL编码 encodeURIComponent:对URL组成部分进行编码 二，HTTP与HTTPS？ HTTP明文 HTTP1:tcp连接数限制，线头阻塞 HTTP2:二进制，单连接上多请求，响应并行 HTTPS：更安全，加密解密，数字证书， 三，强缓存和协商缓存？ 浏览器缓存分为强缓...

原创 2022年前端面试必须学会的知识点-VUE3.0篇（持续更新中...）

一、vue3.0相比vue2有哪些升级？1.双向数据绑定更换Proxy代理对象，可以监听数组和对象变化vue2里的defineProperty对对象属性进行劫持而Proxy是对整个对象进行劫持2.diff算法vue3.0中增加了静态标记，对静态元素做静态提升，不会比较，直接复用3.TreeShaking打包时清除多余代码，减少程序体积，更快4.vue3.0的composition Api和vue2的Options Api?Options Api:选项式APIcompo

原创 2022年前端面试必须学会的知识点-VUE篇（持续更新中...）

一、对MVVM的理解 双向数据绑定，数据的改变会自动渲染到页面里，视图变化也会更新数据 二、双向数据绑定原理 采用数据劫持和发布订阅方式，通过Object.defineProperty()来劫持对象各个属性的getter/setter，在数据变化时，发布消息给订阅者，触发相应监听回调， 三、vue生命周期 vue的实例从开始创建，初始化数据，模板编译，挂载dom，渲染更新，卸载这一系列过程，会形成一系列事件钩子函数，方便操作 由于vue在初始化实例...

原创 2022年前端面试必须学会的知识点-前端优化篇（持续更新中...）

一、前端性能优化的方面？ 1.代码方面 代码规范化，组件模块化，第三方插件按需引入，组件按需加载，路由懒加载， 代码压缩，移除监听 2.资源方面 图片svg，音频，视频懒加载 3.webpack层面 图片压缩， 4.其他：Web Worker和cdn内容分发 缓解页面卡顿，提升性能？本质上是让主线程专注于UI渲染；相似的有安卓和IOS原生开发,小程序，都是主线程负责UI工作，将渲染和逻辑完全分离 二、如何检测...

原创 2022年前端面试必须学会的知识点-CSS篇（持续更新中...）

一、html5与css3总结html5总结1.语义化标签，利于seo2.input标签智能type属性：email，date，time，number，range，color，表单属性：autofocus,3.webscoketcss3总结1.结构选择器，属性选择器，伪类选择器，2.文本属性：text-...3.弹性盒模型flex4.background背景属性，渐变，rgba，box-shadow,transition,动画animation,旋转transform,au

原创 ​从新回归Vue之3.0（七）：安装scss并配置全局样式文件，.env.环境变量配置和读取

一，安装sass// 注意要使用scss，必须安装依赖，否则报错npm install node-sass sass-loader sass -D在这一步很多人可能会卡住，例如我电脑上版本node -v v12.16.1vue3.0项目安装sass报错npm install node-sass sass-loader sass -D报错如下:npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! [email protected] posti.

原创 ​从新回归Vue之3.0（六）：配置vite.config.ts，tsconfig.json

一，配置vite.config.ts可以先将l以下几行代码注释import { loadEnv } from "vite";port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT),target: loadEnv(mode, process.cwd()).VITE_APP_BASE_URL,additionalData: '@import "@/assets/styles/global.scss";',loadEnv和scss将..

原创 ​从新回归Vue之3.0（五）：router配置，引入element-plus

一，router配置以及使用详解安装npm install vue-router@4贴一个极度简单的vue页面模型<template></template><script setup lang="ts">import { ref, reactive, watch, onMounted, computed } from "vue";import { useStore } from "vuex";import { useRouter } from "v

原创 2022年前端面试必须学会的知识点-案例篇（持续更新中...）

一、如何中断已经发出去的请求？以vue项目用axios为例，由于axios提供了cancelToken的方法，只需要在发送请求的拦截器里将所有发出的接口放在vuex的全局数组cancelTokenArr里，然后在router的路由守卫里全部清理掉，相当于清理的是上个页面的所有接口。 1.请求拦截器 axios.interceptors.request.use( config => { config.cancelToken = new axios....

原创 前端效率高不高，看你js库选的好不好

虽然面试中底层原理避免不了，不过大部分人的真实前端开发工作中，没有太多涉及原理底层的东西，CTRL+C与CTRL+V的工作占了80%，剩下的一点的就要靠自己逻辑思维了。。。前面我在算法篇里讲的第一个防抖节流函数，只是最简单版本，想要完整，其实也不容易，自己写又会有很多bug。。。业务开发过程中，会经常用到日期格式化、url参数转对象、浏览器类型判断、节流函数等常用函数，那么为啥不用成熟的开源js类库呢？这样会让自己减少很多工作量。下面给大家安利俩款自己平时很喜欢用的js类库。一，outils

原创 2022年前端面试必须学会的知识点-算法篇（持续更新中...）

2022年前端面试必须学会的知识点-算法篇（持续更新中...）一、防抖和节流

原创 2022年前端面试必须学会的知识点-JS篇（持续更新中...）

2022年前端面试必须学会的知识点-JS篇（持续更新中...）一、js基本数据类型和引用数据类型二、typeof三、typeof如何区分数组和普通对象？

原创 ​从新回归Vue之3.0（四）：动态组件，vuex

一，component动态组件由于组件被引用为变量而不是作为字符串键来注册的，在 <script setup> 中要使用动态组件的时候，就应该使用动态的 :is 来绑定：<script setup lang='ts'>import Foo from './Foo.vue'import Bar from './Bar.vue'</script><template> <component :is="Foo" /> <c

原创 从新回归Vue之3.0（三）Watch,WatchEffect，生命周期

一，Watch和WatchEffect使用方法

原创 从新回归Vue之3.0（二）：setup，defineProps，defineEmits，变量，defineExpose

一，单页面入口setup（）1.在setup()中不能用this在vue2.x里飞天遁地的this没有了，因为`setup` 的调用发生在 `data` 、`computed` 或 `methods` 被解析之前，所以它们无法在 `setup` 中被获取，这也是为了避免setup()和其他选项式API混淆。2.setup推荐用法<template> <h1>{{ msg }}</h1></template><script

原创 从新回归Vue之3.0（一）：Vite，创建

开篇技术栈：Vite+Vue3+Volar+Ts+Element-plus

原创 从零开发Electron-Vue (四) 最新2021electron-vue项目实际碰到的问题

问题：在build成功后回过头来发现不能run electron:serve了，有俩个错误解决方法：在background.js里注释掉与VUEJS_DEVTOOLS相关的东西// import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'app.on('ready', () => { // if (isDevelopment && !process.env.IS_T.

原创 从零开发Electron-Vue (三) 最新2021electron-vue项目下载

第一篇里的electron-vue-start项目在打包时遇到了问题，仔细查看package.json，发现electron的版本是2.x的，太老了，于是重新下载最新的项目，目前最新的是11.2.3，截止时间2021年2月8日11:49:46。创建vue项目，注意用cmd的打开方式。配置淘宝镜像，一定要！npm install -g cnpm --registry=https://registry.npm.taobao.org之后用cnpm -v检测一下就可了。cnp..

原创 从零开发Electron-Vue (二)

下面举例解决实际中碰到的问题electron程序无默认的编辑框，修改应用程序框的大小mainWindow = new BrowserWindow({ width: 1200, height: 768, useContentSize: true, frame: false, webPreferences: { nativeWindowOpen: true } })如何打开电脑的默认浏览器，打开自带的浏览器电脑的默认..

原创 从零开发Electron-Vue (一)

下个项目要用前端的web技术开发windows桌面应用，后端采用python技术，现在在做调研。部署环境1.安装node，成功后安装vue-cli。npm install vue-cli2.下载electron-vue项目。注意：要使用电脑的cmd去下载，切记！vue init simulatedgreg/electron-vue electron-vue-start选项：Use Sass / Scss?输入 noSelect which Vue plugin.

原创 前端面试题总结

1.实现多个具有数据依赖的异步请求加载？promise原理？1.可以将异步变为同步执行，只不过效率偏低：es7的await将异步转同步；juery的ajax设置async:false2.异步处理(不嵌套)：es6的Promise可以实现：china().then(jiangshu).then(xian).then(function(data){ console.log(data)})Promise.all([promise1, promise2, promise

原创 前端基础之浏览器(持续更新中)

原创 前端基础之基础算法（持续更新中）

1

原创 前端基础之JavaScript（持续更新中）

1. js对象里数字与字符串属性是相等的；浏览器一致性就会形成一个栈内存，我们的代码会被压缩成一个执行上下文EC stack,执行代码；

原创 前端基础之HTML + css（持续更新中）

1. 什么是标签语义化?合理的标签做合理的事情，就叫标签语义化。 都有哪些标签？什么意思？有块状标签，行内标签，行内-块状标签；块状标签:h1-h6,div,p,ul,ol,li,dl,dd,header,footer,article,nav,section...行内标签:span,a,b,i,em,strong,sup,sub...行内-块状标签:input,image...表单元素 行内元素、块级元素和行内块元素的区别？行内元素：不独占一行，不能设置宽高块级...

原创 前端基础框架之react（持续更新中）

自从三年前开发过react之后，就再没有用过了，三年后的今天react越来越火热，RA开发原生app，AntD UI框架，Hooks，函数组件,Redux都快忘光了，版本也更新迭代了n版，话不多说，捡起react的记忆吧。1.配置环境安装node.js;...

原创 前端大环境需要掌握的技术栈（持续更新中）

1

原创 前端基础框架之vue（持续更新中）

知识总结：一，vue-cli 3.0 (2.0到3.0的过渡)跨域配置 --详见1.1 vue-cli2.0与3.0的区别--详见1.2二，vue基础知识双向数据绑定 （v-model的原理）--详见2.1 虚拟dom --详见2.2和2.3 template模板渲染语法和原理（vue-loader）--详见2.4 指令和自定义指令（v-if与v-show） methods，computed，watch，filters，data（为什么是函数） class、style 条...

原创 mpvue开发的微信小程序转字节跳动（头条，抖音）小程序遇到的坑（二）

碰到的问题汇总：一、基于平台的差异1)登录在微信里<van-button color="#958BFF" round block open-type="getUserInfo" @getuserinfo="getUserInfo" >微信授权</van-button>在头条里<button class="buttonStyle buttonS.

原创 mpvue开发的微信小程序转字节跳动（头条，抖音）小程序遇到的坑（一）

mpvue开发微信小程序完成后，领导说转抖音小程序，因为mpvue官方号称是支持的，需要尝试一下。git(ˉ▽￣～) 切~~分支之后，基本尝试如下：1.一键搬家的功能：https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/developer-instrument/development-assistance/one-key-move可以局部安装或者全局安装npm i wx-to-tt -g运行项目，确保在dist目录下有w

原创 mpvue使用echarts

在mpvue中开发小程序中，mpvue官方出了一套适用于mpvue使用的eecharts，叫mpvue-echarts；值得一提的是，原生小程序使用的是echarts-for-weixin，具体地址如下：https://github.com/ecomfe/echarts-for-weixin1.mpvue-echarts的github地址https://github.com/F-loat/mpvue-echarts首先安装npm install mpvue-echartsnpm

原创 git 指令集锦

//查看状态git status//添加文件夹到缓存区git add -f xxx//提交git commit -m xxx//推送git push//克隆git clone -b xxx ssh://[email protected]/git/xquiz/pdf/server//放弃修改git checkout .//更新git pull origin devgit推送步骤:add .commit -m ""日志pull 更新push origi.

原创 mpvue框架开发小程序

mpvue是一个使用Vue.js开发小程序的前端框架使用mpvue开发小程序，你将在小程序技术体系的基础上获取到这样一些能力： 彻底的组件化开发能力：提高代码 完整的Vue.js开发体验 方便的Vuex数据管理方案：方便构建复杂应用 快捷的webpack构建机制：自定义构建策略、开发阶段 hotReload 支持使用 npm 外部依赖 使用Vue.js命令行工具 vue-cli 快速初始化项目 H5 代码转换编译...

原创 如何在chrome浏览器上调试特定机型的屏幕效果

需求：有个项目只适配了手机，屏幕宽度大于手机尺寸是俩侧有灰色背景，现在要适配小米note4平板，如何精确适配？步骤：1.打开chromeF12，点击设备切换按钮，点击上方的手机型号选择，点击下拉列表最下边的eDit2.出现如下图界面增加机型，填写数据3.数据如何计算？1）比如小米note4平板，到小米官方商城查询可得下图。2)计算device pixel...