![](https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端工具
文章平均质量分 81
脚手架、webpack、nvm、git
努力的小朱同学
未来很长,梦想很远。
展开
-
Nuxt.js 中定制 error.vue 错误缺省页
在Nuxt.js项目中,当接口报错或后台数据返回异常时,前端展示就会呈现接口报错的信息,这会给用户非常不好的体验。所以当出现404、500等应用错误时,我们可以在项目的根目录下创建layouts文件夹,然后在该文件夹下创建error.vue文件,创建后该文件就是Nuxt.js默认的错误缺省页,当出现404、500等应用错误时就会自动跳转到该error.vue页面,或者根据接口结果进行手动跳转。同时我们可以通过修改该文件的布局和样式,以及接收出错页传递进来的报错信息,来定制化项目错误页面。原创 2022-08-21 17:57:11 · 3765 阅读 · 0 评论 -
前端PWA应用的相关知识和基础Demo
PWA 主要拥有以下几种特点:① 跨平台② 可安装③ 离线访问④ 推送通知⑤ 快速加载⑥ 可搜索⑦ 热更新。PWA的实现依赖于多种技术实现,其中最核心的技术为`Service Worker`、`Web App Manifest`和`Push Notification`。原创 2023-08-19 22:36:56 · 4166 阅读 · 0 评论 -
使用Echarts.js绘制环形图(指定触发高亮事件)
1、tab选中不限时,环形图表中正常渲染环形图,以及对应的数据类型图例和指示文字。2、环形图hover时,高亮hover所在的图形区域,图形区域放大,并悬浮弹窗展示相关数据。3、在切换tab时,选中指定tab,则环形图中的对应数据图形进行高亮显示,图形区域放大,指示文字和指示线加粗处理。其余数据图形区域透明度降低处理。4、指定图形标题和图形区域颜色。5、设置图形最小占有区域。原创 2023-12-07 10:48:25 · 1129 阅读 · 0 评论 -
使用Echarts.js绘制多条折线图
1、tab选中不限时,图表中同时渲染多条折线,对应多种类型的数据。2、切换tab时,如果选中指定tab,则图表中只渲染当前tab对应的折线,且指定不同tab对应不同的折线颜色。3、折线图hover时,会以提示框的形式展示X轴信息以及对应所有折线的信息。4、Y轴坐标会根据数据列表自动计算坐标轴的最小值和最大值。5、X轴坐标会根据数据列表决定坐标轴信息。6、指定图表标题和标题位置。注意:当前案例是在Vue2中使用,echarts.js版本为5.3.2。原创 2023-11-22 14:13:10 · 1440 阅读 · 2 评论 -
使用Echarts.js绘制中国地图
1、展示中国所有省份,包括南海诸岛,确保领土完整,中国领土神圣且不可侵犯。2、每个省份根据对应数据的不同渲染不同的颜色,根据数据从小到大,对应底部视觉映射组件指定的颜色渐变区间内从浅到深。3、每个省份不可被选中,但鼠标hover会展示对应数据信息,且对应数据图形具有hover高亮样式。4、颜色渐变区间对应的数据区间,由数据列表的实际数据决定,最小值为0,最大值为数据列表的最大值。注意:当前案例是在Vue2中使用,echarts.js版本为5.3.2。原创 2023-11-22 11:01:20 · 1689 阅读 · 0 评论 -
在html中使用Echarts.js绘制柱状图
1. 横坐标为作业名称,作业名称一行6个字符,最多两行,超出显示省略号。 2. 纵坐标为百分比数字,分为5个刻度,且每个刻度在坐标系中都有延伸虚线。 3. 柱状图默认为半透明的蓝色,鼠标hover之后变色,并以浮窗的形式展示该条数据的相关信息。 4. 当数据量超过10条时,x轴下面有横向滚动条,默认每屏展示10条数据,数据之间的间距相等,可以通过滚动条来滚动查看前后的数据。原创 2022-11-29 19:43:35 · 3510 阅读 · 2 评论 -
在VSCode中配置代码自动 eslint 格式化(修改eslint规则、eslint忽略文件)
本博客是讲述对一个已经引用 eslint 依赖Nuxt项目(vue项目应该相同),在使用VScode进行开发时,如何配置VScode在保存时,自动 eslint 格式化,并修改部分 eslint 规则,使其不与自动格式化的规则相冲突。这样可以大大提升我们的开发效率,并且如果对某些外部复制(抄)过来的代码,也可通过自动格式化,来使其符合 eslint 的格式。......原创 2022-07-07 09:48:34 · 10848 阅读 · 3 评论 -
Nginx 基础使用(前端)
1、简介 Nginx 由俄罗斯访问量第二的rambler.ru站点设计开发的,首次发布于2004年10月,是一个高性能的HTTP和反向代理的web服务器,其主要特点为占用内存少,并发能力强,官方测试数据表明能支持50000各并发连接数的响应。安装简单、配置文件简洁(支持perl语法),而且可以做到24小时不间断运行,在不间断服务的情况下进行软件升级原创 2022-04-12 00:08:19 · 5979 阅读 · 0 评论 -
常用的 Git 命令汇总
一、日常使用(最基本的)Reomte — 远程git仓库。Repository — 本地仓库Index — 暂存区Workspace — 工作目录(工作区)git init — 初始化本地git仓库git add [dir] — 将工作目录中文件的代码增加到暂存区(dir 是文件名,可以用 . 表示提交所有)git commit -m [message] —原创 2021-10-11 13:51:41 · 1715 阅读 · 0 评论 -
nvm的安装(win10)和基本使用
nvm在win10系统中的安装和基本使用 nvm是nodejs的版本管理工具,可以下载多个版本的node,然后根据项目需要去切换使用不同版本的node,不再需要我们自己手动去卸载再安装node,节约了时间。 这个教程已经算是手把手的教了,小白也能看得懂。一、清理系统环境 如果之前电脑里面安装了node,则需先卸载安装好的node,再安装nvm。1、在下面的界面中,选中Node,右键卸载。2、检查电脑中是否还存在以下文件,如果存在请删除:C:\Program Files (x86原创 2021-12-27 18:11:45 · 2127 阅读 · 0 评论 -
前端工程化(二)--- webpack
一、概念 webpack 是目前十分流行的前端项目构建工具(打包工具),提供了友好的模块化支持,以及代码压缩混淆、处理 js 兼容性问题、性能优化等强大功能,大大提高了开发效率。目前大多企业的前端项目都是基于 webpack 进行打包构建的。webpack 是基于 node.js 开发的打包工具,所以在它的配置文件中,支持使用node.js 相关的语法和模块。 现在的项目开发几乎不会让我们手动配置 webpack ,都会使用脚手架创建项目,自动配置webpack,所以我们只要简单了解webpac原创 2021-10-25 20:45:04 · 239 阅读 · 0 评论 -
前端工程化(三)--- vue-cli 脚手架
一、概念 vue-cli 是 Vue.js 的开发工具,它简化了程序员基于webpack 创建工程化的Vue项目的过程。可以让开发者把精力专注在应用逻辑上,而不必花好几天去纠结 webpack 配置的问题。 中文官网:Vue CLI (vuejs.org)二、Vue项目的运行流程 在工程化的项目中,vue要做的事情很单纯就是通过 main.js 将App.vue 渲染到index.html的指定区域中。分开来说就是,App.vue 用来编写待渲染的模板结构,index.html 中要预留原创 2021-10-26 14:19:43 · 174 阅读 · 0 评论 -
前端工程化(一)--- ES6模块化
一、模块化概述 传统开发模式主要面临两个问题:命名冲突和文件依赖。模块化的的出现就是为了解决以上这两个问题。模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间互相隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块。模块化开发的优点在于:方便代码的重用,从而提高开发效率,并方便后期的维护。 目前模块化开发具有很多不同的规范,例如浏览器端的 AMD 和CMD 规范,服务器端的 CommonJS 的规范,Node.JS 的默认模块化规范就是 CommonJS。这些模块化规范都存在原创 2021-10-20 13:45:37 · 350 阅读 · 0 评论