前端常用知识
翟敏1201
这个作者很懒,什么都没留下…
展开
-
lint-staged 自动修复格式错误
上一章说到通过pre-commit检测代码规范的问题,当我们进行代码提交时,会检测所有的代码格式规范。但是我们希望的是只检查修改的代码,所以需要配合lint-staged 插件来解决这个问题。lint-staged可以让你当前的代码检查 ,只检查本次修改更新的代码,并在出现错误的时候,自动修复并且推送lint-staged无需单独安装,我们生成项目时,已经帮助我们安装过了,所以我们直接使用就可以了1.修改 package.json配置"lint-staged": { "src/**原创 2022-05-27 10:39:35 · 1827 阅读 · 0 评论 -
通过-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 阅读 · 0 评论 -
使用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 · 423 阅读 · 0 评论 -
规范化提交代码(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 · 488 阅读 · 0 评论 -
传统架构VS前后端分离架构
现在前后端分离模式好像成为了互联网市场的主流,那么传统架构,就像jsp是否已经被市场淘汰了呢?其实不然,去调研之后发现传统的架构还是占领很大的市场。那么问题就来了,既然原创 2021-06-01 15:41:12 · 570 阅读 · 0 评论 -
前端自适应
viewport1.viewport的概念每一个移动端页面在其背后,都有一个比实际屏幕大的虚拟的视窗,这个虚拟窗口就是viewport,其主要目的就是将完整的页面呈现给用户,如果实际宽度大于移动屏幕的宽度,网页就会横向滚动条。2.viewport的分类1)layout viewport——布局视窗那些为桌面设计的网站也能在移动浏览器上正常显示的宽度2)visual view...原创 2019-09-25 10:03:25 · 344 阅读 · 0 评论 -
CSS像素、、逻辑像素、设备像素比
之前对CSS像素、物理像素、逻辑像素、设备像素比一直处于懵懵懂懂的状态,今天自己决定整理一下。1.css像素css是一个不确定的物理像素,它是根据它所在的机型设备而决定的。2.逻辑像素设备独立像素也叫做逻辑像素,与css像素一样是一种虚拟的像素,它是操作系统定义的一种像素单位,应用程序将设备独立设备告诉操作系统,操作系统再将独立设备像素转为设备像素。3.设备像素...原创 2019-09-17 16:26:19 · 516 阅读 · 0 评论 -
项目技术选型分析
1.构建工具(我列举了三个常用的) gulp grunt webpack1.为什么要用构建工具资源压缩 静态资源替换 模块化处理 编译处理2.MVVM框架选择vue react angular3.模块化设计4.自适应方案设计5.代码维护及复用性设计的思考需求变更 产品迭代 Bug定位 新功能开发...原创 2019-09-12 06:20:20 · 552 阅读 · 0 评论 -
本地搭建easy-mock
最近加入了技术胖的星球,跟着技术胖每天成长,在里边技术胖推荐了easy-mock,之前模拟数据都是用mock.js,当我遇到easy-mock才发现,这才是模拟数据的神器。 easy-mock的网址是:https://www.easy-mock.com/,可能因为每天访问的人比较多,这个网址及其的不稳定,所以笔者上网找了写资料决定自己本地搭建一个。 1.下载nod...原创 2019-08-02 14:42:27 · 811 阅读 · 0 评论 -
移动端适配
移动端适配的方法有很多中,今天我介绍一种比较简单的适配方法。通过获取手机宽度来设置根元素,再通过rem进行适配,具体方法请看代码。超级简单 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0">...原创 2019-07-31 17:33:13 · 108 阅读 · 0 评论 -
layui动态渲染表格(一)
实践是检验真理的唯一标准,只有不断的总结才会有所进步,下面总结一下我使用layui的心得和方法以及遇到的坑。1.首先引入layui的包(从官网下载整个ui包,不要只下载layui.js和layui.css) 点击打开链接2.html部分<table class="layui-hide" id="test"></table>3.js部门 layui.use(['table...原创 2018-07-13 09:39:17 · 5445 阅读 · 0 评论 -
webstorm激活方法
最初使用webstorm时一直在网上搜最新的激活码,可是用不了多久就失效了,很麻烦,最近发现还可以这样。打开这个网址 http://idea.lanyus.com/点击获取注册码然后将注册码复制到Activation code中,点击ok。这时会发现报错最后一步,修改hosts文件(C:\Windows\System32\drivers\etc\hosts)在ho...原创 2018-10-18 09:56:36 · 647 阅读 · 0 评论 -
echar 数据显示在小圆点里
产品需求,这个让我好找啊,百度了半天也没有搜到,最后还是在echarts里找到得http://gallery.echartsjs.com/editor.html?c=xB1TnWeujb原创 2018-10-30 17:06:12 · 274 阅读 · 0 评论 -
echarts实现半圆饼图
var myChart = this.$echarts.init(document.getElementById('myChart')) let data = [ { value: 57, name: '半年分配', itemStyle: { normal: { ...原创 2018-11-01 14:48:57 · 9168 阅读 · 0 评论 -
echarts去掉横向网格线
原创 2018-11-02 10:45:27 · 3649 阅读 · 0 评论 -
EsLint校验报错批处理
eslint校验报错,修改package.json中的如下内容然后执行npm run lint最后重新跑一下就原创 2019-04-26 16:21:11 · 339 阅读 · 0 评论 -
搭建静态服务器值nginx
1.下载nginx2.下载成功之后注意一下nginx.conf的路径,打开该文件3.修改nginx默认的端口号(以免8080端口被占用导致nginx启动失败)4.接下来我们将本地桌面的resoure文件配置到nginx中如有403错误,请修改nginx.conf中的配置如下...原创 2019-05-13 17:29:26 · 87 阅读 · 0 评论 -
英文单词显示不全的小技巧
在开发过程中会遇到一行显示不下的时候,我们用省略号代替后边的内容,这样中文显示是没有问题的,如果遇到英文,有的时候单词就会被分隔开,这里有一个小技巧,就是加一个行高就可以解决此问题了。...原创 2019-06-16 19:05:34 · 1016 阅读 · 0 评论 -
表格导出
首先引用一个jquery.table2excel.js插件链接:https://pan.baidu.com/s/1gl3qCY1RcQk4xgbkeHypsQ 密码:w5zy<button onclick="exportDevLedger()">导出列表</button> <table id="tableShowAllInfo"> ...原创 2018-07-10 18:03:42 · 247 阅读 · 0 评论