gaearon-优快云博客

原创 git 提交报错：不能访问 *** Permission denied

你可能使用 sudo 权限下载了 git，这导致在普通用户下无法使用 git 命令这样做：sudo chown -R username /Users/username/.configusername 是你的用户名完美：

2021-08-26 23:45:40 579

原创 vue2 使用 CompositionAPI

Vue3 新出的 CompositionAPI 可以以更优雅的姿势聚集零散代码，自定义的 hook 函数使逻辑可以更好的复用，之前老旧的 Vue2 项目也可以体验 CompositionAPI 了。安装 @vue/composition-api：yarn add @vue/composition-api在 main.js 中引入:import Vue from 'vue'import VueCompositionAPI from '@vue/composition-api'Vue.use(V

2021-07-05 01:36:08 2889

原创【vscode 插件集】前端必备插件 -- 第二弹前端框架必备

上一篇博文：https://blog.youkuaiyun.com/weixin_45499478/article/details/114541517 到现在的阅读量和收藏量已经不少了，感谢大佬们的支持，又是三个月过去了，博主感觉第一篇推荐的插件已经不能满足开发需求了，为了更好的摸鱼，把大部分时间用在开发逻辑上，又整了几个不错的插件。好了废话不多说，直接上干货。卑微博主在线求赞代码调试必备 – Debugger for Chrome害，随着码龄增加 bug 不减反增，如果还是使用传统的 console

2021-05-22 23:33:39 2472 30

原创 css flex 布局子元素撑大父元素导致页面布局错乱

原因是没有给父元素设置一个固定的宽高，导致子元素 flex 的计算延伸到了父元素，给父元素设置固定的宽即可：.main { /* 之前被撑大的外部父元素 */ box-sizing: border-box; padding: 0 30px; border-right: 1px solid #ccc; width: 709px; /* 设置固定的宽 */}.albums { /* flex 布局父元素 */ width: 98%; display: flex; flex-wr

2021-05-14 23:18:59 2191

原创自定义 hook 使 useEffect 页面初次渲染时不执行

function useDidUpdateEffect(fn, inputs) { const didMountRef = useRef(false); useEffect(() => { if (didMountRef.current) fn(); else didMountRef.current = true; }, inputs);}使用方法：useDidUpdateEffect(() => { if (user.msg === "" &&a

2021-05-06 22:38:08 7593 1

原创 react 多页应用编译失败 Cannot read property ‘filter‘ of undefined 解决方案

经过修改 webpack 的 entry 及 HtmlWebpackPlugin 等配置后，出现如下报错：这是因为将 webpack 的 entry 将原来的数组方式修改为了对象，自然没有 filter 方法。解决方法修改 entrypoints.main 中的 main 为你在 entry 中配置的项目首页的 key。我的 entry 配置中首页的 key 为 index ，因此可改为 entrypoints.index。...

2021-05-01 18:22:33 1403

原创 Vue watch 监听地址栏的变化

watch: { // 监听地址栏变化 $route(to, from) { console.log(to, from) }}

2021-04-30 15:20:33 1013 1

原创 Vue 子组件的 created 不能拿到 props 的问题

SPA 应用，所有的数据都需要依靠 ajax 获取，这就导致子组件已经创建了，但是父组件所请求的 ajax 还没有返回，父组件无法传递最新的 props 数据，这就导致子组件不能正常加载。看下我的错误代码：父组件：<template> <singleComments :singleComment="singleComent"></singleComments></template><script>export default { m

2021-04-30 03:53:51 2279 2

原创【JS 设计模式】JS 实现工厂模式

工厂模式，就是将 new 的操作单独的放到一个类中，在创建类时，只需要调用工厂方法就好。这样做的好处是：日后修改某个类名，只需要修改某个类和工厂中的类名即可，不必整个项目中查找。哎，JS 想要实现工厂模式，缺少 Java 所需的接口，所以实现方式也和 Java 有所不同。Java UML 类图：JS UML 类图：害，由于 JS 没有接口的概念，所以将原本的两个 Product 整合成了一个 Product，并且取消了 interface 。JS 代码实现：class Product{

2021-04-23 03:51:34 555

原创【JS 设计模式】JS 实现单例设计模式

单例设计模式就是一个类只能有一个实例，这就需要类的构造方法不能被类外的作用域捕获。JS 是一个弱面向对象形式的语言，对于三大特性的支持不够完善，即使 ES6 也不能很好的支持。先来看看 Java 代码的实现，看不懂也没关系，有大量的注释：public class SingleObject { // 私有的构造函数，外部不可以实例化当前类，这也是 js 不能实现的地方 private SingleObject(){} // 唯一被创建的实例 private static

2021-04-23 03:35:25 453

原创 antd 组件库配置

<h2 id="css-样式按需导入">css 样式按需导入</h2><p>详细配置：<a href="https://3x.ant.design/docs/react/use-with-creat

2021-04-14 08:06:09 440 1

原创【Vue 开发小技巧】给遍历的组件绑定不同的事件回调

首先说明，如果不是特别紧急的情况下还是不要使用这种方法，这种方法可读性不是太好。场景如下：通过 v-for 遍历出来的组件中，每个组件会触发不同的事件回调。但是只能绑定相同的事件回调，可以利用遍历的索引值来触发不同的回调，看代码：<van-cell @click="emitEvent(index)" class="listItem" v-for="(item, index) in lis

2021-04-13 16:31:21 605 2

原创【Vue 开发小技巧】给组件路径配置别名

前几天在 GitHub 参考一位阿里大佬的项目源码，大佬的写法令我眼花缭乱，代码写得简直太 6 了。其中一种写法让我大呼牛逼~。来看看：这个 @ 是个什么操作？我发现它的 @ 指向的是 src 目录，我傻傻的尝试了一下，果不其然，报错了……在网上搜啊搜，它是通过改写 vue.config.js 文件实现的。但是网络上给出的答案有些老旧了。阿里大佬的写法：const path = require('path')const resolve = (dir) => path.join(__dirn

2021-04-12 22:46:32 351

原创 postcss适配移动端

<h2 id="下载所需库">下载所需库</h2><pre><code class="language-text">"less-loader": "7.0.1&quot

2021-04-09 23:31:26 853

原创 React路由我把它拿捏的死死的

<p>文档地址：<a href="https://react-router.docschina.org/">React Router: Declarative Routing for React.js

2021-04-09 01:38:18 637

原创 vant 使用 font-class 方式引入第三方图标

阿里图标库：https://www.iconfont.cn/选择需要的图标，添加至购物车，一定要点击下载代码，否则无法生成所需要的css等文件，解压至assets目录下，将其中的iconfont.css文件引入项目中。然后打开解压目录中的 demo_index.html 文件，图标的名称有三个选项点击 font-class ，上图中框出的就是 icon 的 name 属性，如果想要引入微信图标：<van-icon class="iconfont" class-prefix="icon"

2021-04-01 14:41:27 1292

原创 react 解决跨域问题

<p>react 仅仅关注数据本身，没有发起网络请求的功能，需要借助 ajax 发起数据请求，推荐使用 axios</p><p>使用 react 做开发，开放模式往往是前后端分离，如果后端没有配置允

2021-03-29 15:28:00 4713 6

原创火爆全网的 “蚂蚁牙黑” 特效今天你也可以做。

不仅仅是 “蚂蚁牙黑” 特效，还有比如 “让老照片动起来”，都可以做。我不生产代码，我只是 GitHub 的搬运工。????GitHub 仓库地址：https://github.com/dunnousername/yanderifier所需文件我都已经放到了百度网盘：ffmpeg-win32-v3.2.4：https://pan.baidu.com/s/1H6oDH3Nr0j1X84CtC43Giw提取码：nuijyanderify：https://pan.baidu.com/s/1fcdszj

2021-03-28 16:29:51 3250

原创 koa2 洋葱模型

示意图koa2 是基于 async 和 await 实现的，使用 next 进行流程控制。这样就可以使用 await next() 进行一种特殊的执行顺序，等下一个路由执行完毕之后，再执行当前路由，通常称为 “洋葱模型”。何谓 “洋葱模型”就像那首歌一样，“一层一层剥开我的心”，koa2 中的 “洋葱模型” 也是这样，匹配到的路由，可以一层一层进去，进入最内层之后，再一层一层出来。例如这个 demo：api.get("/", async function (ctx, next) { cons

2021-03-19 17:50:33 687

原创 koa2 快速入门

简单说说 koa2koa2 是由 express 的原班人马开发的，koa 框架有两个版本：koa 和 koa2。koa 使用 ES6 的 generator 来编写的，当 node 引擎支持 ES7 之后，koa 的创始人立即使用 async 和 await 重构了 koa 框架，就有了现在的 koa2。所以，下文中下载 koa2 的脚手架工具时，下载的是 koa....（详见下文）。脚手架和基础配置脚手架koa2 提供了脚手架工具，可以用来更好的创建 koa2 项目。npm 下载地址：ht

2021-03-18 09:18:08 5515

原创 let that = this 重要性

阅读其他人代码的时候，可能会遇到这样一段代码let that = this不要小看这段话，作用大了去了。原因是：this 会随着上下文环境而变换它的指向，在当前作用域中设置一个变量用来存储 this 可以防止在其他地方找不到 this 的错误。...

2021-03-14 20:54:55 1113 1

原创 React 数据和事件绑定

数据绑定与事件初探上文说到，jsx 为元素设置属性，需要使用 jsx 的属性，可是想要修改属性有点难受。这样绑定属性和 vue 相比就太垃圾了。jsx 可以采用类的方式定义组件，在 constructor 中定义渲染页面时需要的数据。jsx 可以一个组件为一个对象，结合了面向对象编程的思想。如下代码所示：import { Component, Fragment } from "react";class app extends Component { render() {

2021-03-12 00:55:20 382

原创 React 组件和 JSX 语法

React 组件React 组件和 Vue 组件没啥区别，都是将局部的代码封装到一个新的文件中，这样可以使代码易于维护。下载 React 扩展可以在 vscode 中快速生成一个新的 React 组件：常用快捷键：imr：自动导入 Reactimrc：自动导入 React 和 Componentcc：生成无 constructor 的组件类，并导出ccc：生成包含 constructor 的组件类，并导出。更多快捷键：https://blog.youkuaiyun.com/qq_39721418/

2021-03-12 00:48:05 403

原创 React 开发环境搭建

react 官方网站https://reactjs.org使用 react 脚手架创建项目脚手架工具，例如 webpack、gulp、vue-cli 等。react 像 vue 一样提供了自己的脚手架工具，Creata React App。官网中给出了示例：https://zh-hans.reactjs.org/docs/create-a-new-react-app.htmlnpx create-react-app my-appcd my-appnpm start上述命令，会自动创建 m

2021-03-12 00:41:36 149

原创使用 nodejs + express + layui 搭建的个人博客

采用 mvc 架构项目地址：https://gitee.com/keepess/blog记得安装依赖

2021-03-10 11:46:36 977 2

原创【vscode插件集】学前端一年，珍藏的 40个 vscode 插件

猿生不能只有 Ctrl + C 和 Ctrl + V，还要有 Ctrl + D。工欲善其事，必先利其器。今天给大家带来了博主学习前端一年多以来偷懒，呸~ 提升效率必备的 40 个 vscode 插件。看完觉得有帮助的记得点个赞~HTML 标签自动闭合 – Auto Close Tag身为一个前端程序猿，打 HTML 标签那必须是快速的，vscode 本身就提供了标签自动闭合的功能。但是对于一些自定义标签 vscode 就不能识别了。这时安装这个插件，vscode 就可以自动识别你的自定义标.

2021-03-08 19:57:20 11758 41

原创解决 axios 请求时不携带 cookie

问题描述最近在做一个项目，开发模式是前后端分离的，用户登录之后服务端返回 cookie 信息，通过 document.cookie 设置 cookie 了，但是发起其他请求时请求头没有cookie ？？？截图：解决方案想到了之前 vue 电商项目中，手动设置了 Authorization ，今天可以 ctrl c+v 了axios.interceptors.request.use(config => { config.headers.cookie = document.cookie

2021-03-04 16:56:50 3766 1

原创 vuex 核心概念 state、mutations、actions、getters

核心概念statemutationsactionsmodules手动引入vuex如果在vue脚手架中没有引入vuex需要进行手动配置。在main.js中添加如下代码：import store from 'vuex'// 在创建vue实例时，将store挂载进去new Vue({ render: h => h(App), store}).$mount('#app') statestate中设置数据源，页面中所有在vuex中存放的数据都要放到store的state

2021-03-02 01:40:44 555

原创 vuex 的基本使用

vuex官方教程：https://vuex.vuejs.org/zh/guide/vuex概述学习vue 的时候组件之间的传值太让人头疼了，有以下三种情况：父向子传值：v-bind子向父传值：v-on兄弟之间的数据共享：$on$emit以上三种情况只适合小范围的传值对于全局数据共享太麻烦了，vuex就是实现组件全局状态管理的一种机制。使用vuex与不使用vuex的情况如下：vuex中的数据都是响应式的，在一个组件中修改了值，其他组件中的值同样被更改。创建项目

2021-03-02 01:35:26 221 2

原创基于 vue 实现的电商后台管理系统

源码地址：https://github.com/Hero601/vue_shop后端接口：https://goal.lanzous.com/b01c5hhsb密码:5ees免费的小星星点一个吧~

2021-02-26 17:21:41 1034 2

原创晋升全栈之路 —— express 框架的使用

Express 框架是什么Express 可以创建各种 Web 应用，可以使用 npm install express 下载。该框架简化了 Node.js 的网站配置，具有以下特性：提供了方便简洁的路由配置对 HTTP 请求参数进行了简化处理支持模板引擎提供中间件机制可扩展Express 提供了 get 和 post 方法用来区分 get 和 post 请求。使用 send 方法向客户端响应数据。中间件Express 可以接收客户端发送来的数据，可以进行响应，也可以将请求交给下一个中

2021-02-04 18:51:32 341

原创晋升全栈之路 —— 原生 nodejs 使用 http 模块搭建网络服务器

服务器端基本概念在使用浏览器对网站进行访问可以使用 http://baidu.com 进行访问，Node.js 可以搭建一个本地的服务器，Node.js 所搭建的本地服务器所使用的通信协议使用的 localhost 协议，例如使用 Node.js 监听 3000 端口，那么在浏览器中可以输入 localhost:3000 来访问这个服务器。使用 Node.js 创建 web 服务器需要使用内置模块 http，如下代码所示：const http = require('http')// 调用 cre

2021-02-04 15:11:28 584 3

原创 nodejs之模块加载机制

有路径没有后缀当使用 require() 方法引入一个模块没有指定没有指定后缀名时，就像下面这样：require('./test.js')require('./test')模块加载机制规则：require 方法根据模块路径查找模块，如果是完整路径，没有省略后缀名，直接引入该模块当后缀名被省略时，先按照路径查找同名 js 文件，再找路径下的同名文件夹如果找到了同名文件夹，引入文件夹中的 index.js 文件文件夹中没有 index.js ，在当前文件夹中的 package.json 中

2021-02-04 15:02:37 343

原创 nodejs之常用第三方模块

第三方模块第三方模块是 Node.js 中没有的，而是其他开发者写好的、我们可以直接使用的模块，第三方模块通常由多个文件组成，放在一个文件夹中，又称为包。第三方模块有两种存在方式：以 js 文件存在提供实现功能的 API 接口以命令行形式存在，辅助项目开发Node.js 中的第三方模块通常存在 NPM 中：NPM官网Node.js 内置了 npm 来对 NPM 官网中的内容进行安装，在终端中输入：npm -v 可以查看当前 npm 的版本。安装模块命令：npm install modul

2021-02-04 15:01:43 2014

原创 nodejs之常用内置模块

fs 模块fs 全名为 File System 中文名为文件系统，该模块可以进行文件操作，是 Node.js 内置模块，需要使用 require 引入。node 官网中 fs 模块的 APIfs 模块引入：const fs = require('fs')引入的 fs 为 Node.js 的内置对象，所以一般都是使用常量接受。读取文件，需要使用 readFile() 方法，该方法语法结构如下：fs.readFile(path, encoding, callback)参数说明：path：

2021-02-04 14:59:28 748

原创 JavaScript 生成UUID

/*!Math.uuid.js (v1.4)http://www.broofa.commailto:robert@broofa.comCopyright (c) 2010 Robert KiefferDual licensed under the MIT and GPL licenses.*//* * Generate a random uuid. * * USAGE: Math.uuid(length, radix) * length - the desired number

2021-02-03 12:32:50 1116

原创 nodejs 连接数据库报错： connect 被调用多次

问题截图使用 nodejs 连接两个数据库报出了这样的错误，原因是使用 connect 方法连接时，只能连接一个数据库。如果需要连接多个数据库需要使用 createConnection() 方法。let db = mongoose.createConnection( "mongodb://localhost/electricity_user_database");db.on("error", console.error.bind(console, "... connect error ..."

2021-01-28 17:07:41 648 2

原创 Vue-CLI3 脚手架搭建教程（全都是图）

脚手架是什么Vue 脚手架用于快速生成 Vue 项目基础架构，网址：Vue CLI安装脚手架：npm install -g @vue/cli使用命令行创建项目在终端中输入如下命令进入交互式命令行：vue create project这个界面让你选择创建的模式，按上下键可以移动，分别为：默认：vue2默认：vue3手动选择如果选择手动，会变成下面界面：按下 a 选择所有，按下 i 反向选择，按下空格选择当前，选择完毕按下回车确认。弹出下面界面：这个界面让选择使用的 v

2021-01-27 00:20:51 6194

原创 vue 单文件组件

单文件组件是什么在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。存在以下问题：全局定义强制要求每个 component 中的命名不得重复字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏没有构建步骤限制只能使用 HTML 和 ES5 JavaScrip

2021-01-27 00:15:41 228

原创这么完整的 webpack 使用教程，不来看看吗？

webpack 的安装和基本使用终端运行下面命令安装相应的包npm i webpack webpack-cli -D安装成功的话，应该输出下面文本：npm notice created a lockfile as package-lock.json. You should commit this file.npm WARN Vue@1.0.0 No descriptionnpm WARN Vue@1.0.0 No repository field.+ webpack@5.16.0+

2021-01-27 00:13:12 322 1

空空如也

空空如也