- 博客(131)
- 收藏
- 关注
RSS订阅原创 lint-staged 自动修复格式错误
上一章说到通过pre-commit检测代码规范的问题，当我们进行代码提交时，会检测所有的代码格式规范。但是我们希望的是只检查修改的代码，所以需要配合lint-staged 插件来解决这个问题。lint-staged可以让你当前的代码检查 ，只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送lint-staged无需单独安装，我们生成项目时，已经帮助我们安装过了，所以我们直接使用就可以了1.修改 package.json配置"lint-staged": { "src/**
2022-05-27 10:39:35
1829
原创 通过-pre-commit-检测提交时代码规范
之前章节有说过ESLint与Prettier配合可以解决代码格式问题，但是这个只能检测本地的，本地需要配置才可以，如果在团队开发中，有的小伙伴忘记配置，就会存在问题，所以我们期望通过 husky监测 pre-commit钩子，在该钩子下执行 npx eslint --ext .js,.vue src指令来去进行相关检测：1.执行 npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"2.该操作会生成对应文...
2022-05-26 17:57:05
314
原创 使用husky+commitlint检查提交描述是否符合规范要求
commitlint1.安装依赖npm install --save-dev @commitlint/[email protected] @commitlint/[email protected].创建commitlint.config.js文件echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js3.打开commitlint.confi
2022-05-26 17:20:27
425
原创 规范化提交代码（commitizen）
1.全局安装commitizennpm install -g [email protected].在项目中安装cz-customizable插件npm i [email protected] --save-dev3.添加配置到package.json中... "config": { "commitizen": { "path": "node_modules/cz-customizable" } }4.自定义提交内容，项目根目录下
2022-05-25 16:46:30
491
原创 prettier集成到vscode中
前端开发最头疼应该就是eslint规范了吧，各种校验不符合，手动改是不是很愚蠢的行为呢。prettier的出现可以很好的解决eslint校验的问题，在保存代码时，让代码直接符合ESLint的规范。1.打开vsocde,安装插件2. 在项目根目录下创建.prettierrc配置内容如下：{ "semi": false, "singleQuote": true, "trailingComma": "none"}3.打开vscode设置面板4.在设置中搜
2022-05-20 17:58:22
211
原创 传统架构VS前后端分离架构
现在前后端分离模式好像成为了互联网市场的主流，那么传统架构，就像jsp是否已经被市场淘汰了呢？其实不然，去调研之后发现传统的架构还是占领很大的市场。那么问题就来了，既然
2021-06-01 15:41:12
568
原创 Docker搭建接口测试服务DOClever
1.github地址：https://github.com/sx1989827/DOClever/tree/master/docker2.使用docker-compose进行容器的管理，并修改文件内容version: "2"services: DOClever: image: lw96/doclever restart: always container_name: "DOClever" ports: - 20082:10000 volume.
2021-02-04 11:36:43
296
原创 axios封装
1.首先在本地项目新建axios.js2.安装引入axios.jsimport axios from 'axios'const instance = axios.create();3.拦截请求与响应// 封装axios的请求，返回重新封装的数据格式// 对错误的统一处理import axios from 'axios'import errorHandle from './errorHandle'const instance = axios.create();// 请求
2020-12-18 15:00:49
172
原创 toLocaleString()和toString()的区别
两者都是字符串转换，但是也有一些区别：1.转换数字var num = 1234console.log(num.toString()) //1234console.log(num.toLocaleString()) //1,234toLocaleString方法3位以逗号分割2.转化时间格式化var time = new Date()console.log(time.toString()) // Sun Sep 27 2020 09:54:54 GMT+0800 (中
2020-09-27 10:37:35
234
原创 $emit 和 $on用法
<html> <head> <title>$emit 和 $on</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div ...
2020-02-07 15:46:31
343
原创 把类数组变成一个数组
function print() { Array.from(arguments).forEach((item)=>{ console.log(item) })}print('a','b','c')
2020-02-06 14:32:57
240
原创 对象深拷贝
对象深拷贝是我们开发经常遇到的，请看下面的列子：let obj1 = { name: "minmin", message: { age: 18 }}let obj2={...obj1};obj2.message.age=22;console.log(obj2.message.age)console.log(obj2.message.age)当我修改obj2中...
2020-01-16 14:30:55
160
原创 est字符串模版原理
let name = "minmin",age = 25;let desc = `my name is ${name}, my age is ${age}`;我们都知道，es6增加了字符串模版，方便了我们字符串拼接的麻烦，笔者之前也是只知道字符串模版，没有去深入的了解一下原理。首先，我们看一下字符串模版转为es5语法后是什么样的let name = "minmin",age = ...
2020-01-15 15:22:18
223
原创 本地安装webpack4.0
1.本地安装webpacknpm init -ynpm install webpack webpack-cli -D2.用webpack进行打包npx webpack --mode development // 开发环境打包，不会压缩npx webpack // 线上打包，会压缩...
2019-12-06 18:15:07
136
原创 vue项目中将px转为rem
之前在写项目的时候，封装了一个css,用来将px转rem,后来发现这样写还不是很友好，那么有没有一种方法是将我写的px项目运行后自动转为rem的呢，答案肯定是当然有了。1.设置根节点的font-size// 基准大小const baseSize = 32// 设置 rem 函数function setRem() { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要...
2019-10-15 13:42:43
663
原创 前端自适应
viewport1.viewport的概念每一个移动端页面在其背后，都有一个比实际屏幕大的虚拟的视窗，这个虚拟窗口就是viewport，其主要目的就是将完整的页面呈现给用户，如果实际宽度大于移动屏幕的宽度，网页就会横向滚动条。2.viewport的分类1）layout viewport——布局视窗那些为桌面设计的网站也能在移动浏览器上正常显示的宽度2）visual view...
2019-09-25 10:03:25
344
原创 CSS像素、、逻辑像素、设备像素比
之前对CSS像素、物理像素、逻辑像素、设备像素比一直处于懵懵懂懂的状态，今天自己决定整理一下。1.css像素css是一个不确定的物理像素，它是根据它所在的机型设备而决定的。2.逻辑像素设备独立像素也叫做逻辑像素，与css像素一样是一种虚拟的像素，它是操作系统定义的一种像素单位，应用程序将设备独立设备告诉操作系统，操作系统再将独立设备像素转为设备像素。3.设备像素...
2019-09-17 16:26:19
516
原创 js能力提高(七) BOM
知识点navigator 浏览器的属性screen 屏幕属性location 地址history 历史// navigatorvar ua = navigator.userAgent // 查看浏览器的类型//screenconsole.log(screen.width) // 屏幕的宽度console.log(screen.height) // 屏幕的...
2019-09-17 14:09:00
76
原创 项目技术选型分析
1.构建工具(我列举了三个常用的) gulp grunt webpack1.为什么要用构建工具资源压缩 静态资源替换 模块化处理 编译处理2.MVVM框架选择vue react angular3.模块化设计4.自适应方案设计5.代码维护及复用性设计的思考需求变更 产品迭代 Bug定位 新功能开发...
2019-09-12 06:20:20
551
原创 js能力提高(六) DOM
DOM结构操作var div1 = document.getElementById('div1') // 添加新节点var p1 = document.createElement('p');p1.innerHTML = "this is P1";div1.appendChild(p1)// 移动已有节点var p2 = document.getElementById("p2")...
2019-09-05 11:24:50
76
原创 js能力提高(五) 日期、math、数组和对象的API
1.日期Date.now() // 获取当前时间毫秒数var dt = new Date() dt.getTime() // 获取毫秒数dt.getFullYear() // 年dt.getMonth() // 月 （0-11）dt.getDate() // 日 （0-31）dt.getHours() // 时 (0-23)dt.getMinutes() // 分...
2019-08-28 13:18:45
99
原创 js能力提高(四) 异步和单线程
1.什么是异步，异步和同步的区别1.异步: 异步加载也叫非阻塞性加载，在需要等待的时候会继续执行它后面的程序console.log(100);setTimeout(()=>{ console.log(200)}, 1000)console.log(300);2.同步:js是单线程执行，同步执行当遇到需要等待当线程它会等待它执行完成才会执行下一个，也就是会出现阻塞的情况...
2019-08-27 13:43:57
90
原创 js能力提高(三) 作用域与闭包
在js中没有块级作用域，只有函数和全局作用域。// 无块级作用域if (true) { var name = "zhaimin"}console.log(name)// 函数和全局作用域var a = 100;function fn() { var a = 200; console.log(a)}console.log('global', a)fn()作用域...
2019-08-20 18:22:35
79
原创 js能力提高(二) this指向
this的指向问题对于很多初学者来说会有一点点的难度。当我们理解之后就发现，其实它很简单。this要在执行时才能确认值，定义时无法确认。来说会有一点点的难度。当我们理解之后就发现，其实它很简单，1.this指向。var a = { name: "FF", fn: function() { console.log(this.name); }}a.f...
2019-08-20 17:42:59
86
原创 js能力提高(一)原型规则
基础扎实才能走的更远，所以笔者现在打算回头重新梳理一下js的知识。里面的知识是跟着某课老师系统学习的，这里只做总结，方便日后查看。1.构造函数function Foo(name, age) { this.name = name; this.age = age; // return this; //默认有这行}var f = new Foo ('xiaoming',18...
2019-08-15 15:56:15
172
原创 node中exports与moudle.exports 的区边
export与moudle.exports都表示对外暴露，但是很多初学者对它们两个还是懵懵懂懂，下面我简单的总结一下它们的区边。1.export 导出的是方法，说直白一点就是其他文件倒入进来可以直接拿来用2.module.exports 导出的是模块对象本身，返回的是一个累，其他模块想要使用必须实例化。...
2019-08-09 15:37:07
76
原创 本地搭建easy-mock
最近加入了技术胖的星球，跟着技术胖每天成长，在里边技术胖推荐了easy-mock,之前模拟数据都是用mock.js,当我遇到easy-mock才发现，这才是模拟数据的神器。 easy-mock的网址是：https://www.easy-mock.com/，可能因为每天访问的人比较多，这个网址及其的不稳定，所以笔者上网找了写资料决定自己本地搭建一个。 1.下载nod...
2019-08-02 14:42:27
809
原创 移动端适配
移动端适配的方法有很多中，今天我介绍一种比较简单的适配方法。通过获取手机宽度来设置根元素，再通过rem进行适配，具体方法请看代码。超级简单 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0">...
2019-07-31 17:33:13
108
原创 组建按需加载之babel-plugin-import
笔者最近发现，很多开发的小伙伴引用第三方的库都喜欢全局引入，其实这样是非常不友好的// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from ...
2019-07-31 14:30:22
10359
原创 node笔记(五) fs文件系统
1.读取文件const fs = require('fs');fs.readFile('./modA.js','utf8', (err,data) => { if (err) throw err; console.log(data);})// 同步读取const modb = fs.readFileSync('./modB.js','utf8')consol...
2019-07-23 18:25:52
136
原创 node笔记(五) 事件
const EventEmitter = require('events');class CustomEvent extends EventEmitter {}const ce = new CustomEvent()// 绑定一个事件ce.on('test', ()=> { console.log("哈哈")})setInterval(()=>{ c...
2019-07-23 16:38:13
79
原创 node笔记(四) Buffer
Buffer主要用于操作二进制流，Buffer类在全局作用域中，因此可以直接用，无需用require引入,Buffer类似于整数数组，但是不同的是它的长度是固定的，无法改变。C++代码在V8堆外分配物理内存。// 创建一个长度为10，且用9填充的Bufferconst buff1 = Buffer.alloc(10,9)console.log(buff1)/*allocUnsaf...
2019-07-18 20:36:26
107
原创 node笔记(四) 基础API之path
path会根据操作的系统的不同自动获取对应的系统的文件路径格式。具体可查看文档http://nodejs.cn/api/path.html#path_path_normalize_path。下面我总结几个比较常用的api:1.path.normalize()normalize方法会规范给定的路径// 引入方式const {normalize} = require('path')...
2019-07-17 19:29:06
228
原创 node笔记(三) debug调试
这里还是总结几个比较常用的调试工具1. Chrome DevTools 调试(1) 打开chrome://inspect/#devices添加插件https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj(2)在ide中调试（也就是编...
2019-07-16 15:18:49
570
原创 node笔记(二)
process 进程具体详细的介绍可以查看nodejs API,这里总结几个比较常用的1.process.argv返回一个数组，第一个元素是process.execPath（属性返回启动 Node.js 进程的可执行文件的绝对路径名），第二个返回的元素是正在执行的 JavaScript 文件的路径。 其余元素将是任何其他命令行参数。// 打印 process.argv。pro...
2019-07-16 11:04:10
88
原创 node笔记(一)
require 的特性a.module 被加载的时候执行，加载后缓存b.一旦出现某个模块被循环加载，就只输出已执行的部分，未知性的部分不会执行（见如下代码）// modA.js 代码module.exports.test = 'A';const modB = require('./modB')console.log("modA:", modB.test)module....
2019-07-15 18:29:07
103
原创 mockjs的使用方法
为了提高工作效率，作为前端的我们经常要自己造数据，最常用的当然是mockjs了1.安装mockjs 和axiosyarn add mockjs -Dyarn add i axios --save2.新建json数据在index.js中引入对应的json3. 在main.js中引入mockjs4.在scr目录下新建api/store.js在store.js...
2019-07-09 11:27:33
1561
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人