weixin_38687522的博客

原创 一个网站引发的程序猿的牢骚，哈哈哈

2013年大学毕业后，参数工作做的第一个前端项目，北京服装学院，今天调研一个关于iframe的需求，突然想试试，以前那些做IE6兼容的项目是否还在使用，就默默的点开了。十年了，他们没有换网站，我的岁月似乎从这一刻又回来了一次。 已经十年了，我依然坚持着写代码，做前端开发。从当初刚步入社会的小姑娘，好听点，单纯善良，不好听，就是傻灯一个。到如今为人妻，为人母。很多事情都变了。但是我工作的方向没有换。有多少同学，都放弃了代码的开发工作。尤其是女生，他们因为各种各样的原因，转行，为人母。全职带孩子。 也有肯吃苦

原创 学习笔记：JS中的void 和 TS中的void有什么不同

原创 学习笔记：接口的应用与场景

原创 学习笔记：枚举

原创 学习笔记：any unknown的两点区别和应用场景

原创 学习笔记：ts定义初体验

原创 ts学习笔记（一）

3.tsc --init 初始化tsconfig.json配置文件。

原创 git gitignore忽略文件笔记

1 首先，编辑.gitignore文件。 2 然后如果是单个文件，可以使用如下命令从仓库中删除： git rm --cached logs/xx.log 如果是整个目录： git rm --cached -r logs 如果文件很多，那么直接 git rm --cached -r . 如果提示某个文件无法忽略，可以添加-f参数强制忽略。 git rm -f --cached logs/xx.log 3 然后 git add . git commit -m “Update .gitignor

转载 webpack的构建流程

webpack构建流程：1.初始化流程，2 编译构建流程，3 输出 流程 1.运行流程 webpack的运行流程是一个串行的过程 。它的工作流程就是将各个插件串联起来。在运行过程 中会广播事件，插件只需要监听他们所关心的事件，就能加入到这条webPack机制中，去改变webpack的动作，使得整个系统扩展性良好 。 从启动到结束会依次执行三大步骤： 初始化流程：从配置文件和shell语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数 编译构建流程：从entery出发， 针对 每个m

转载 js:展开运算符，set,三元，一个问号，两个问号

1.展开运算符。它允许对数组或字符串等迭代符进行扩展，这对于添加新的值是非常有用的。 let arr = [1,2,3] let newArr = [...arr, 3,4] let obj = [{name:'wang'}] let newObj = [...obj, {name:'zhihui'}] set Object set对象是javascript中一种新的对象类型，可以用来创建没有重复的数组。当你拥有一个唯一值的列表时，这有用。 let arr = ['a', 'b', 'a'] let

原创 每天进步一点点

原创 provide与inject实现祖与孙组件之间通信

转载 Object.assign和JSON.parse(JSON.stringify())的区别

浅拷贝: Object.assign() 深拷贝: JSON.parse(JSON.stringify()) 什么是浅拷贝？ 对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会改变。 什么是深拷贝？ 深拷贝是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。 若对象是基础数据类型。此时 Object.assign()可实现深拷贝，和JSON.

原创 vue3.0 Hook函数

什么是hook. 本质上hook是一个函数，把setup函数中使用的composition API(ref函数，reactive函数， computed, watch,watchEffect, 生命周期（onBeforeCreate ,onCreated, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmounted, onUnmounted,）)进行了封装。 类似于vue2.X中的mixin 自定义hook的优势是，利用代码，

原创 vue.30通过组合式api形式使用生命周期钩子

组合式api使用生命周期 配置项的形式使用生命周期钩子 如果两种形式同时出现，则先执行onbeforeCreate ,再执行beforeCreate,依次类推。

原创 vue3.0 watchEffect函数

watch套路是：既要指明监视的属性，也要指明监视的回调。 watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。 watchEffect与computed有点相似： 但是computed注重的是计算出来的值 （回调函数的返回值 ），所以必须要写返回值 。 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值 。 使用方法： watchEffect(()=>{ const x1=sum.value const x2=person.ag

原创 vue3.0计算属性computed

转载 (function (window, document, undefined) {})(window, document)的真正含义

IIFE(即时调用的函数表达式) (function (window, document, undefined) { // })(window, document); JavaScript具有函数作用域，因此首先创建了一些需要的“私有范围”。例如: (function (window, document, undefined) { var name = 'Todd'; })(window, document); console.log(name); //name is not defined，

原创 vue3.0 watch监听reactive数据注意事项

原创 vue3.0之toRaw, markRaw

初始数据： 我们看到obj数据改变了，state也改变了，但是Ui界面未响应。 因为: obj = reactive(state) 这不是赋值关系，而是引用关系，state是Proxy对象，在这个Proxy对象中引用了obj。 所以直接修改obj是无法触发UI界面的，只有通过包装之后的对象来修改，才会触发界面更新。 也就是将state.name重新赋值才会发生变化 。 obj2= toRaw(state) 如上，可以看到obj2和obj是一样的。也就是说通过toRaw拿到state的原始数据obj .

原创 vue3.0中shallowRefs使用

function shallowRef(target){ return { _value: target, get value(){ console.log('读取数据‘) return this._value }, set value(val){ console.log('修改数据') this._value = val } } ref的源码 function ref(target){ if(target && typeof target === 'objec

转载 vue项目中公共方法的配置和调用

项目中我们总有不少公共方法要提取，在Vue中具体大致可采用三种形式来实现。 一、过滤器 通常直接在实例模版中使用，用于处理数据格式。 注⚠️：我在webpack中配置过路径别名，以下代码中的 @ 都是src文件夹的别名 把处理格式的函数都写在src/filters/index.js里，每个方法都单独export。过滤器函数都必须有返回值 // src/filters/index.js /** * 把时间处理成所需格式的字符串 * @param {(Object|string|number)} time

转载 vue 中 scoped的用法 以及css文件引入问题的补充

vue中scoped的编译原理 所谓局部 css， 就是通过vue-loader这个插件，在编译打包的时候将带有scoped属性的css打上一个tag， 同时将template内的所有Html 都打上一个相同的tag, 最后通过css的属性选择器定位，造就了所谓的局部css, css-loader对Import文件会当做外部资源，那么我能理解为它是把Import的css文件单独提取出来，并没有把其中的样式放在<style scoped> @import '../assets/css/home.

原创 vue3.0生命周期详细解析

一、图示vue2.0到vue3.0改变 beforeCreate => setup() created => setup() beforeMount => onBeforeMount mounted => onMounted beforeUpdate => onBeforeUpdate updated => onUpdated beforeDestroy => onBeforeUnmount destoryed => onUnmounted error

原创 vue2.0中keepAlive的使用

在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态。 设置meta 的属性keepAlive 为true 返回后保持当前停留位置 ...

转载 webpack HtmlWebpackPlugin插件

webpack的plugins(插件)是其的辅助功能，主要作用是解决其loader无法实现的事情，今天将详细介绍HtmlWebpackPlugin插件的功能 作用: 1. 生成项目的主入口html文件，一般原则是单应用的话会生成一个html文件，多应用的话会生成多个对应的html文件 2. 管理生成的html中引入js,css等资源配置，一般在多应用中会体现的比较突出一些 源码: 此处的配置项也是比较多的，以源码为例进行简单的介绍 constructor (options) { // Default

原创 TypeError: require.context is not a function [解决文案]

const files = require.context(path.join(’…/…/’, ‘src/views’), true, /.htmlKaTeX parse error: Can't use function '\.' in math mode at position 404: …iews'), true, /\̲.̲html/)

原创 旧vue项目迁移，npm install一直安装中

今天将一个旧vue项目迁移到新的电脑上，发现，npm install之后，一直在安装中，没有进展，停留了一中午也没装上。 我突然意识到，我现在用的环境是vue3.0. 在这个环境直接安装导致的。 于是，通过nvm 将旧项目的node版本重新安装。nvm install node@12.2.0 nvm list 查看当前node版本信息 nvm use 12.2.0 会弹出安装窗口，确认就可以了。然后就切换成功了。 再然后重新执行npm install就可以了。 ...

原创 【解决办法】Module build failed: Error: No ESLint configuration found.

直接找到config/index.js，把useEslint改成false

原创 vue ssr服务端渲染

原创 prerender-spa-plugin预渲染

原创 vue 如何实现多页面应用（简单版）

简单版（待实践后补充 ，先放转载链接）

转载 为什么单页面的seo不友好？如何解决这一问题？

大家可能都知道单页面的SEO不友好，但是你有没有思考过为什么单页面的SEO不友好呢？在单页面盛行的今天，有哪些策略来规避掉这一缺点呢？ 搜索引擎的工作原理 在搜索引擎网站的后台会有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是被称之为“搜索引擎蜘蛛”或“网络爬虫”程序从茫茫的互联网上一点一点下载收集而来的。随着各种各样网站的出现，这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库

原创 IT界的单词都是啥

loT：Internet of Things 物联网 Serverless：The Serverless Framework (无服务器架构）允许你自动扩展、按执行付费、将事件驱动的功能部署到任何云 IDE：IDE一般指集成开发环境。集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。 SDK: Software Development Kit 一般指软件开发工具包 API:

原创 Error: Cannot find module ‘webpack‘ 问题解决办法

这句话的意思是：没有找到webpack模块。 就算之前你装了webpack，那肯定是非全局安装 所以要全局安装 npm install --save-dev webpack

转载 Git使用教程,最详细，最傻瓜，最浅显，真正手把手教

git教程 csdn转载的教程

原创 vue3.0--实现树形视图可用于组织架构，菜单

tree.vue <template> <h1>树形视图</h1> <!-- the demo root element --> <ul id="demo"> <tree-item class="item" :item="treeData" @make-folder="makeFolder" @add-item="addItem" ></tree-item

原创 报错Failed to resolve component: tree-item at ＜Tree onVnodeUnmounted=fn＜onVnodeUnmounted＞ ref=Ref＜ n

Failed to resolve component: tree-item at <Tree onVnodeUnmounted=fn ref=Ref< null > > at at

原创 vue3.0---watch使用方法

<template> <div> watch监听ref属性值：{{a}} <el-button type="primary" @click="plusFn">ref加1</el-button> </div> <div> watch监听reactive属性值：{{b}} <el-button type="primary" @click="plu

转载 vue3.0---风格指南（二）

1.组件文件 只要有能够拼接文件的构建系统，就把每个组件单独分成文件。 当你需要编辑一个组件或查阅一个组件的用户时，可以更快的找到它 2.单文件组件文件的大小写 单文件组件的文件名应该要么始终是单词大写开头（pascalCase），要么始终是横线连接（kebab-case） 单词大写开头对于代码编辑器的自动实例最为友好，因为这使得我们在JS和模板中引用组件的方式尽可能的一致。然而，混用文件命名方式有的时候会导致大小写不敏感的文件系统问题，这也是横线连接命名同样完全可取的原因。 components/ |-