自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端江湖

记录前端开发知识,难题,好玩的事情

  • 博客(26)
  • 收藏
  • 关注

原创 npm install报错: https://registry.npm.taobao.org/: certificate has expired

如果打印出来的是 https://registry.npmmirror.com,则说明已经设置成功。再次执行之前的安装依赖命令,就能成功拉取依赖包啦!#设置新的淘宝源npm镜像。#查看 npm 当前设置。

2024-03-19 23:50:01 995

原创 苹果电脑MacOS连接使用移动硬盘

苹果电脑不是高配版本的情况下,随着使用越来越久存储会不太够用。这时候使用移动硬盘是一种比较常见的选择。移动硬盘买回来时默认是NTFS格式,也就是windows系统的文件格式,苹果电脑能读取硬盘文件,但不能写入。

2023-04-25 18:36:15 2175

原创 React项目引入使用Tailwindcss

在React项目中使用 Tailwind CSS,需要安装tailwind,配置tailwind,配置项目使用tailwind,样式文件引入tailwind,最后可以在组件中写tailwind样式类进行开发。在 tailwind.config.js 文件中,配置 purge 选项指定所有的 components 文件,使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。Tailwind 会在构建时将这些指令转换成所有基于您配置的设计系统生成的样式文件。

2023-04-15 00:44:04 1673

原创 使用craco更改Create-React-App项目配置

使用 Create-React-App 创建的项目,我们可以使用 eject 命令来弹出配置项,但eject命令是不可逆的,执行命令后需要自己管理配置项目。更新 package.json 文件中的 scripts,将 eject 以外的所有脚本都用 craco 代替 react-scripts。craco是一个用来重写覆盖使用 Create-React-App 配置的工具。在项目根目录新建 craco.config.js 文件,并在这个文件中进行配置。

2023-04-14 15:16:28 420

原创 CSS布局之网格布局-display: grid; display: inline-grid;

CSS布局有很多种类型,float浮动布局,flex弹性盒子布局,百分比布局,圣杯布局,双飞翼布局,表格布局。网格布局和table布局有相似之处,但又比之灵活。

2023-04-03 00:01:07 529

原创 .nvmrc文件是什么?.nvmrc文件怎么使用?

这就需要一个管理项目node.js版本的方法,自动切换node.js版本的方法,.nvmrc该上场了!在我们开发vue,或者react的时候,项目需要用到指定版本的node.js,这时我们可以使用nvm去管理多个版本的node.js。举个例子,在当前目录下,让nvm指定18.12的最新发布版本,最新发布的LTS版本,最新发布的node版本。在有.nvmrc文件项目,打开vscode的集成终端,会发现已经自动运行nvm use,命令行有相应的输出。文件的字符串告诉 nvm 使用哪个版本的node.js。

2023-03-25 12:24:54 6107 4

原创 我要学习vue!那该怎么开始新建一个vue项目?开启你的vue入门之旅

这一步就已经是正式进入vue项目的创建了,也十分简单,打开终端执行以下命令,回车后按提示输入项目名,再把接下来的选择全部直接回车就好了!以上命令已经把项目基本目录结构和文件准备好了,现在要做的就是根据你的需求,用组件去搭建实现应用了。非常简单,安装好之后打开终端进行验证,以下命令都能正常输出版本号就成功了!辛辛苦苦码的代码,不能只在自己的电脑上能看到,也要展示出去让其他人看吧!这一步是开始把项目跑起来,可以在浏览器打开进行浏览你的vue项目了!好,现在就打开你的 vscode 敲代码吧!

2023-03-24 20:05:09 78

原创 从0开始学react系列 - 第二节: 组件化搭建博客首页

https://react.dev/learn/react-developer-tools,按照你用的浏览器进行安装,如果是chrome浏览器点击就直接在扩展页面进行安装了。开始之前我们先安装好浏览器 react开发者工具,安装之前打开react项目时,控制台会有一段提示输出让我们安装开发者工具。sass语法教程:https://www.sass.hk/guide/,使用sass可以方便进行样式嵌套,定义变量等操作。由于兼容性的问题,我们安装4.14.1版本,注意需要检查对应符合的 node.js版本。

2023-03-22 01:01:28 101

原创 HTML5 canvas画布画直线

HTML5新元素之一 canvas,定义使用 JavaScript 的图像绘制,只需要简单几步就能用js在canvas中画图。为了让canvas元素更直观地显示出来,我们加上边框样式。在html页面声明canvas标签。

2023-03-20 23:59:11 338

原创 nginx日志管理 - 日志切割、自定义日志字段,清理日志

nginx默认配置中有一个名为 main log格式,里面包含了很多字段,有些可能不是我们想要了解的信息,可以删减,也可以增加其他字段。例如下面配置了一个 my_blog的日志规则。http{# nginx日志修改时间格式为年月日时分秒$time_iso8601 生成格式:2019-04-20T09:24:35+08:00$time_local 生成格式: 20/Apr/2019:09:24:13 +0800。

2023-03-19 20:07:56 808

原创 从0开始学react系列 - 第一节: 搭建环境+创建项目

终端提示 webpack 编译成功,浏览器也自动打开访问 localhost:3001了(我这里因为有另一个项目占用了3000,所以自动切换到3001端口了,全新启动的是3000端口的),项目脚手架初始化的页面成功展示出来了。如果提示 node.js版本过低,要求node.js14以上版本,重新安装达到要求的版本,或者使用nvm切换到高版本。因为上面我们已经执行 create-react-app,所以已经创建好项目,这时我们就不能重复create了,否则提示目录已经存在。安装了nvm的情况下,执行。

2023-03-18 14:53:46 147

原创 node.js版本管理工具nvm的安装和使用

当我们使用新的前端框架时,经常会提示我们某个工具需要更高版本的node.js,但是现有的一些旧项目又需要依赖旧版本的node.js。于是nvm应运而生,它是专门用来管理node.js版本的工具。有了它我们可以在不同的项目中使用不同的版本,也可以在终端很方便地切换版本来进行匹配不同的环境。有安装教程,在macOS上是一样的安装。这里只做macOS或者linux的安装介绍,windows的可以自行查找安装。会输出所有的 node.js 版本,此处只截图一小部分。在项目中一般以上命令就可以满足开发需求了。

2023-03-18 08:00:00 121

原创 阿里云服务器安装ftp服务,客户端FileZilla管理文件

vsftpd 是“very secure FTP daemon”的缩写,安全性是它的一个最大的特点。我们经常需要在测试服务器上部署开发好的更新,安装一个ftp工具来管理文件比较方便,现在就来看看看怎么使用FileZilla连接centos管理文件。

2023-03-17 21:03:07 455

原创 阿里云centos从0开始部署node.js应用+mysql+pm2+yarn

1、购买阿里云主机后,登录阿里云管理控制台,在云服务器ECS实例中重置实例密码和远程登录密码。2、在云服务器ECS实例中打开网络和安全组,设置端口开放规则。回车,输入密码进行登录。3、安装node.js。

2023-03-17 18:42:48 681

原创 阿里云服务器CentOS安装redis

您只能从运行Redis的计算机127.0.0.1(localhost)连接到Redis服务器。恭喜,您已在CentOS 7服务器上成功安装了Redis。如果使用单个服务器设置,并且应用程序和Redis在同一台计算机上运行,则不应启用远程访问。恭喜,这时您已经在CentOS 7服务器上安装并运行了Redis。如果您的服务器上禁用了IPv6,则Redis服务将无法启动。仅当您要从远程主机连接到Redis服务器时,才执行以下步骤。此时,Redis服务器将接受TCP端口6379上的远程连接。用您的IP地址替换。

2023-03-16 07:30:00 273

原创 阿里云服务器centos安装nginx,配置vue项目,开启nginx反向代理

主要配置文件:/etc/nginx/nginx.conf 指向:/etc/nginx/conf.d/default.conf。1.查看文件目录是否做默认目录(/usr/share/nginx/html)下,一般出现这个问题,是因为文件不在默认文件夹下。模块所在目录:/usr/lib64/nginx/modules。访问日志:/var/log/nginx/access.log。错误日志:/var/log/nginx/error.log。默认站点目录:/usr/share/nginx/html。

2023-03-15 21:04:02 262

原创 npm更新版本失效, npm version patch, npm version minor, npm version major, npm update

首次发布自己的依赖到npm上,新增优化一些功能后想更新给使用者,但是遇到更新失效?在开发中遇到要更新依赖的时候,用npm update却怎么都安装不上?这篇文章或许能帮助你完成上传更新和下载更新。

2023-03-14 17:11:28 2197

原创 怎么发布npm包以及npm的使用

随着越来越多新技术的涌现,当我们项目中需要引用js库或框架的时候,打开一个个官网下载文件放进项目中需要耗费很大的时候和精力,效率十分低下。无论是开发vue,react还是小程序,现在都能通过 npm来进行库和框架的引用和管理,极大的提高开发效率和减少出错的风险。

2023-03-13 23:30:27 253

原创 MacOS环境配置 .zshrc .bashrc .bash_profile

每当学习一门新技术的时候,其中一个最大的拦路虎就是环境安装配置,比如java,安卓,比如php都需要安装和配置一大堆工具,安装不顺利的时候无疑会在我们的热情上浇一头冷水。这不,最近打算学习Flutter开发,光是安装配置就捣鼓了好几天,现在记录下来Mac环境变量的配置。在安装好 java sdk 之后,如果我们需要运行 javac 对 java文件进行编译,首先需要打开shell,然后通过执行 java 安装目录的bin目录下的命令工具。配置好环境变量,那我们就可以在任何目录下直接输入命令就可以执行。

2023-03-12 18:08:38 9740

原创 MacOS安装flutter开发环境

在任何屏幕构建apps。Flutter是一个谷歌开源框架,用一套代码就可以构建优美的,本地编译的,多平台应用。我们先来安装好开发环境,开启学习之旅。

2023-03-12 00:24:02 1205

原创 阿里云服务器CentOS上安装Node.js

在服务器CentOS 7上安装Node.js 的方法: 通过NVM(Node version manager)安装,源码安装,已编译版本安装,EPEL(Extra Packages for Enterprise Linux)安装和这四种方法,其中,源码安装,已编译版本安装两种方法基本上都是Linux通用的安装方式,特别是源码安装,其优点是可以安装最新的版本。

2023-03-11 00:16:18 783 3

原创 商城优惠券模块设计与实现

优惠券作为营销获客的常用手段,无论是什么平台基本上都有它的身影。接下来从优惠券是什么,有什么类型,该怎么设计等方面展开说明。

2023-03-10 16:33:16 232

原创 node.js爬虫获取新闻TOP10

随着各种APP和网页的使用的增多,我们查看资讯就需要打开各个APP进行查看,耗时且耗费我们很多精力。很多时候我们想要把数据收集起来,放在自己的系统中进行统一展示输出。数据收集的方法由手工记录,剪贴报,截图,手工复制粘贴等传统方法,这里我们尝试使用 node.js 来对信息进行采集处理成我们需要的格式供我们使用。

2023-03-09 17:05:35 244

原创 webpack入门学习与配置说明

从零开始一步步使用配置webpack,首先安装webpack,然后在terminal终端或者cmd通过命令传入参数使用,再通过配置文件来对复杂项目进行打包。一步步循序渐进熟悉webpack的这个工具。

2023-03-09 14:31:09 103 1

原创 js性能优化之DocumentFragment文档片段

在javascript中每当对DOM进行一次操作如插入删除元素,会触发浏览器重新解析和渲染。对DOM反复操作会导致页面重绘、回流,效率非常低,并且页面可能会被卡死。当你需要一次性进行多次DOM插入操作时,使用DocumentFragment可以减少浏览器重新解析。向DOM添加元素有逐项插入法,innerHTML属性赋值替换法,DocumentFragment文档片段一次性添加法,setTimeout分段添加法。

2023-03-09 14:03:26 210

原创 Element-ui之ElScrollBar组件滚动条的使用

在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动。原来是采用优化浏览器样式的方式,对滚动条进行样式调整。但这个方法并不兼容火狐浏览器,在火狐访问时依然是浏览器默认的滚动条样式。在查看element文档时发现页面滚动条很精致,于是产生了灵感:能否使用element使用的滚动条组件呢?带着这个问题我们看这篇文章。

2018-04-25 15:18:27 86116 8

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除