ych6666的博客

原创 process.env配置全局变量

在项目中找到.env.development.env.production配置文件定义全局变量必须以VUE_APP开头根据不同的环境配置不同的地址

原创 【无标题】

原创 正则表达式的学习分享

正则表达式学习分享

原创 elment-ui的el-menu当采用递归方式生成导航栏的子菜单时，菜单可以正常生成，但是当鼠标hover三级菜单后，二级菜单无法自动收回

elment-ui的el-menu当采用递归方式生成导航栏的子菜单时，菜单可以正常生成，但是当鼠标hover三级菜单后，二级菜单无法自动收回解决将el-submenu的一个属性 popper-append-to-body去掉

原创 将后端返回的文件流下载到本地

exportData().then((res)=>{//1.我们需要通过blob对象来处理，需要模拟一个<a>标签来提供下载链接 const elink = document.createElement('a'); elink.style.display = 'none';//2.blob是二进制大对象，接受后台返回的数据流，导出数据 const blob = new Blob([res]);//3.创建一个url 对象，并将blob实例作为参数传入，这样href的值就

原创 el-table表头与内容右边框错位问题

一、问题1.项目中页面出现表格的表头与表格内容对不齐；2.后发现当chrome页面大小为100%时，显示正常；3.当逐渐扩大时，错位开始明显二、解决办法百度之后，得到了一致的结果，添加如下代码：.el-table th.gutter { display: table-cell !important;}然而，在当前页面添加这段代码之后，却并不生效后来发现，此段代码需要写在项目的入口文件中，App.vue 中后成功解决...

原创 vue内置组件＜component＞ ：实现动态组件

1.描述component是vue的一个内置组件相当于是一个占位符目的是实现动态组件的效果通过绑定 ”is” 属性，选择哪个组件被渲染出来2. 属性props:is -string|ComponentDefinition|ComponentConstructor3. 用法渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。<!-- 动态组件由 vm 实例的 `componentId` property 控制 --><component :is="

原创 vue+axios+egg请求403

axios请求一直报403百度之后有看到一些说法：1.一些解决办法？设置全局post请求的Content-Type值为"text/plain"，然后在发送请求的时候需要对JSON数据进行stringify转化一下 axios.defaults.headers.post['Content-Type'] = 'text/plain';试了之后，发现不行，最终发现问题提示：invalid csrf token. See https://eggjs.org/zh-cn/core/security.ht

转载 mysql-8.0.23安装步骤

下载好压缩包之后，双击mysql.exe一直闪退无奈之下，只好百度一下，按照此博主的教程，安装成功了参考链接：https://blog.csdn.net/O8088/article/details/112845276

原创 cnpm : 无法加载文件 C:\Users\hp\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。

解决方式：1、在系统中搜索框 输入 Windows PowerShell2、点击“管理员身份运行”3、输入“ set-ExecutionPolicy RemoteSigned”回车4、根据提示，输入A，回车5、再次回到cnpm -v执行成功。参考链接：https://blog.csdn.net/zlw123321/article/details/107133422/ps：不只是cnpm命令，包括pnpm、yarn等这些命令，如果执行时，报这样的错误，都可以通过此方法解决。前提是，如果是用npm

原创 如何在github上精准搜索开源项目

in:name xxx // 按照项目名搜索in:readme xxx // 按照README搜索in:description xxx // 按照description搜索附加条件：stars:>xxx // stars数大于xxxforks:>3000 // forks数大于xxxlanguage:xxx // 编程语言是xxxpushed:>YYYY-MM-DD // 最后更新时间大于YYYY-MM-DD参考：https://blog.csdn.net/qq_4342.

原创 Vscode的git配置

1. 下载官网地址：https://git-scm.com/2.vscode中的配置打开vscode->首选项->设置->搜索 “git.path”->点击编辑->将git安装文件夹下的bin/git.exe的完整路径复制到setting.json中注意：格式为D:/Service/git/Git/bin （/）而不是D:\Service\git\Git\bin保存后重启vscode 即可3.更多git的操作内容，去我的git学习分享...

原创 Vscode常用插件

上一篇说了下载vscode的一些问题，接下来说一下前端常用的插件1.常用插件1.1 Chinese Language语言插件，vscode默认语言英语，需要安装其他语言插件1.2 view in Browser静态网页可以支持直接在默认浏览器预览1.3 open in brower网页在默认浏览器中打开1.4 Auto Rename Tag标签自动重命名1.5 Beautify代码美化工具,该插件支持js、josn、css、sass和html的代码美化1.6 CSS Peakcs

原创 国内下载vscode速度慢？

问题？今天新的笔记本到啦！开心溢于言表，正当俺去官网准备下载Vscode时，发现下载龟速、急得火急火燎，本以为是网络问题……看来并不是。。解决办法1.下载时，点击全部显示，可以看到程序的下载地址我们看到：下载链接为：https://az764295.vo.msecnd.net/stable/2b9aebd5354a3629c3aba0a5f5df49f43d6689f8/VSCode-win32-x64-1.54.3.zip2.将/stable前的az764295.vo.msecnd.net

原创 Vue3.0系列（响应式数据的本质：Proxy）

1.Vue3响应式数据本质在Vue2.x中是通过defineProperty来实现响应式数据的Object.definePorperty()递归遍历所有对象的所有属性，当数据层级较深时，会造成性能影响。Object.definePorperty()只能作用在对象上，不能作用在数组上。Object.definePorperty()只能监听定义时的属性，不能监听新增属性。在Vue3.x中是通过Proxy来实现响应式数据的什么是proxy?Proxy对象用于定义基本操作的自定义行

原创 Vue3.0系列（Composition API 的补充）

上一篇我们说了ref 和 reactive创建数据，下面来做一些补充1…递归监听和非递归监听1.1 递归监听1. 默认情况下, 无论是通过ref还是reactive都是递归监听每一层都监听<template> <div> <p>{{state.a}}</p> <p>{{state.gf.b}}</p> <p>{{state.gf.f.c}}</p> &

原创 Vue3.0系列（Composition API：组合API）

1.Vue3.0六大亮点Performance：性能比Vue 2.x快1.2~2倍Tree shaking support：按需编译,体积比Vue2.x更小Composition API: 组合API(类似React Hooks)Better TypeScript support：更好的 Ts 支持Custom Renderer API：暴露了自定义渲染APIFragment, Teleport(Protal), Suspense：更先进的组件2.项目快速搭建2.1 Vue3.0-快速上

原创 Vue3.0系列（Vue3.0是如何变快的?）

1.Vue3.0六大亮点Performance：性能比Vue 2.x快1.2~2倍Tree shaking support：按需编译,体积比Vue2.x更小Composition API: 组合API(类似React Hooks)Better TypeScript support：更好的 Ts 支持Custom Renderer API：暴露了自定义渲染APIFragment, Teleport(Protal), Suspense：更先进的组件2.那么Vue3.0是如何变快的？这里先提供

原创 Vue项目配置跨域访问和Proxy代理设置

Vue项目配置跨域访问和代理设置在vue单应用项目开发时，请求后端会出现跨域问题。常用的解决方案1.前端通过代理进行访问后端2.nodejs设置响应头2.后端设置允许跨域访问方法1. vue-cli代理在config/index.js中做配置：请求http://localhost:8000/adminapi/会代理请求http://localhost:7001/module.exports = { dev: { ... port: 8000, proxyTa

原创 elementui入门-按钮组件的使用及源码解析

2020-12-261. 了解element-ui网站快速成型工具 和 桌面端组件库基于vue的一个ui框架，该框架基于vue开发了很多相关组件，方便我们快速开发页面基于vue开发并且进行了开源 ，element ui 提供的全部都是封装好的组件2.安装2.1初始化一个脚手架的项目vue init webpack element2.2安装elementui 的依赖npm i element-ui -S2.3引入elementui//在main.js中引入ElementUI和它的cs

原创 element-ui的el-upload如何判断上传文件的类型？

element-ui的el-upload如何判断上传文件的类型？<template> <div> <el-upload class="upload-demo" :before-upload = "checkFileType" drag action="https://jsonplaceholder.typicode.com/posts/" multiple> <i class="el-icon-uplo

原创 Airbnb | Css规范

Airbnb css/sass编码规范1 格式使用软制表符（2个空格）进行缩进。在类名中，最好使用破折号而不是驼峰式铸造。如果使用的是BEM，则可以使用下划线和PascalCasing（请参见下面的OOCSS和BEM）。不要使用ID选择器。在规则声明中使用多个选择器时，请为每个选择器分配自己的行。在规则声明的左大括号{之前放置一个空格。在属性中，在:字符之后（但不能在字符之前）放置一个空格。 将}规则声明的右花括号放在新行上。在规则声明之间放置空白行。Bad.avatar{

原创 Airbnb | JavaScript规范

1.引用1.1 使用 const 定义你的所有引用；避免使用 var为什么? 这样能够确保你不能重新赋值你的引用，否则可能导致错误或者产生难以理解的代码。// badvar a = 1;var b = 2;// goodconst a = 1;const b = 2;1.2 如果你必须重新赋值你的引用， 使用 let 代替 var因为 let 是块级作用域，而 var 是函数作用域。// bad var count = 1; if (true) { coun

原创 组件通信的6种方式

aaa

原创 Vue-Router学习总结(下)：路由导航钩子

又做了一张思维导图

原创 Vue-Router学习总结（上）：路由跳转及传参

一张思维导图

原创 Vuex学习总结

1.vuex是干什么的vuex是一种状态管理模式，简单来说，就是把多个组件需要共享的变量全部存储在一个store对象中，然后，把这个store对象挂载到顶层vue实例中，让所有组件都可以共享这个对象中的所有变量属性2.vuex的初使用2.1安装注意Vuex是个插件，你要想用，用脚手架初始化项目之后，得installnpm install vuex –save2.2初使用在入口文件挂载store之后，vue默认做了一步：vue.prototype.$store = store所有组件都可以

原创 element-ui 报错Cannot read property ‘setCheckedKeys‘ of undefined“

el-tree的一些坑过程是这样的1.首先我将el-tree封装为一个公用组件：myTree然后在另一组件中注册使用<my-tree ref="myTree" :show-checkbox="true" :tree-data="tableTreeData" :node-key="id" @currentChecked="currentChecked"/></my-tree>2.此时，我准备清空树中所有勾选的ch

原创 $refs 绑定的理解和使用

对$refs 绑定的理解和使用1.理解在原生里获取DOM元素，需要document.querySelector（""）获取dom节点，然后在获取值。但是用ref绑定之后，我们就不需要在获取dom节点了，直接在dom中绑定refs，然后$refs调用就行。this.$refs.xxx 这样就可以减少获取dom节点的消耗了2.用法1、ref 加在普通的元素上，用this.$refs.xxx 获取到的是dom元素2、ref 加在子组件上，用this.$refs.xxx 获取到的是组件实例，可以使用

原创 this.$nextTick()的原理与使用场景

this.$nextTick()的原理与使用场景遇到这个方法的时候，比较困惑，搜集一些资料，总结一下其原理和用途官网说法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。获取更新后的DOM，言外之意就是什么操作需要用到了更新后的DOM，而不能使用之前的DOM，所以就衍生出了这个获取更新后的 DOM的Vue方法DOM是如何更新的呢？1.原理Vue实现响应式并不是数据发生变化之后DOM立即变化，而是异步执行DOM更新的。异步执行的运行机

原创 Mock.js的学习分享

Mock.js写练手项目的时候常常会遇到一个问题,没有后台接口,获取数据总是很麻烦,我结合mock的学习视频和官方文档，来记录mock的学习历程，1.Mock是啥Mock.js是模拟JSON数据的前端技术，为什么会产生它呢对于前后端分离的项目，后端API迟迟没有上线而前端没有json数据进行填充，自己写后端模拟又太繁重Mock.js就能解决这个问题，让前端工程师独立做自己！它可以生成随机数据！2.Mock安装安装方式，我是在node下运行安装node下的mocknpm inst

原创 axios-基于Promise的http库

Axios是一个基于Promise的HTTP库，下面记录一下我axios的学习历程安装安装的话，使用npm就好啦npm install axios1.全局的 axios 默认值：开发时，很多参数是固定的 ，把公共的抽出来 比如下面的公共url前缀、取消请求的等待时间axios.defaults.baseURL = 'http://123.207.32.32:8000';axios.defaults.timeout = 5000axios.defaults.headers.common['A

原创 git的使用分享

git的使用分享1.git的介绍及其优势Git是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理，是目前使用范围最广的版本管理工具。我们为什么要学习git版本管理工具？可以完整的记录项目代码变化的过程 ： 人、时间、物、事可以备份每一个变化过程的代码版本查询历史记录复原变更比较差异多人协同开发分支合并克隆提交2.git安装windows系统安装Git bashGit 官网：https://git-scm.co

原创 markdown入门

Markdown入门1.Markdown的介绍及优点markdown是一种用来写作的轻量级标记语言，它用简洁的语法代替排版，而不像Word有大量的排版、字体设置，它使用户专心于码字。优点：专注于文字内容而不是排版样式纯文本内容,可以轻松的导入导出.md 文件可读，直观。适合所有人的写作语言初学者可以下载 Typora编辑器来编辑.md文件2. Markdown语法1.代码块我们可以用 ``` 包裹一段代码，并指定一种语言（也可以不指定）：//1.生成java代码块​```java