npm私服搭建
前言当平台的项目群体太多,重复的功能代码滋生也难以维护,组件的复用就显得尤为重要,所以为了在不同的项目中复用组件,我们选择将这些组件封装到公共组件库,并通过npm的方式进行发布。不过,由于代码的性质并不希望公开到npm官网,所以通过搭建npm私服来进行管理。
目标:
组件发布到私服,同时接入其他镜像代理
可以将国外资源包放至私服,并知道下载私服的资源
组件开发成员注册账户,允许发布删除,并禁止其他用户注册
开启发布通知功能,获悉版本的更迭
方案1:verdacciverdaccio是一个node.js创建的轻量的私有npm仓库.是开发普遍选择的一款方案,相当易于安装和使用,是本地网络proxy,与yarn,npm,pnpm百分百向后兼容。
node环境安装
使用nvm管理安装node.环境:centos7.6
使用nvm管理nodejs
1wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
然后执行
1source ~/.bashrc
查看是否安装成功
1nvm -v
罗 ...
前端工程化的一些理解及整理
参考链接
带你入门前端工程化
从零开始手把手带你搭建一套规范的Vue3.x的项目工程环境
git工作流
stylelint配合eslint+prettier的配置
npm verion版本号的管理
工程化概念不知道从什么时候开始,前端工程化这个词汇开始出现在相关开发人员的视线,在此之前,可能只听过软件工程,网络工程相关词汇。工程,本身就是一个很泛泛的概念。
前端工程化每个人都有不一样的理解,也没有一个权威和标准的定义,只要我们清楚为什么要工程化和工程化的意义那么具体的定义就变得不那么重要了。
工程化,就是将一系列的前端开发流程系统化,规范化。
技术选型无论是大到技术框架、编程语言,还是小到工具库的选择,都属于技术选型的范围。最好从以下角度出发:
可控性
稳定性
适用性
易用性
其实就是少走弯路,并且便于维护。通常情况下直接使用主流的框架及它相关的一系列生态
统一规范在实际开发中,通常每个人都遵循自己的代码习惯,可能偶尔在复制的时候注意到其他的代码,又依照着其它的风格写。如果仅仅是视觉上的割裂感还不至于对运行造成影响,如果代码实际运行会出错就进行提交,会让后面拉取代码的人 ...
改变图片的透明度
在某些情况下,某些图片周边的背景都是白色或者其他颜色,我们期望它们是透明的,但这些图片是动态获取的,无法直接交给UI处理成透明样式。而通过javascript的方式,利用颜色RGBA的原理,我们也可以像PS那样,实现取色,替换等功能。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial- ...
发布vue插件到npm
日常开发中,我们更多的是通过npm使用插件,如果有开源的项目或者组件化的功能也可以通过npm进行管理,所以有必要了解下npm插件的发布的流程。
初始化目录1npm init -y
并手动创建lib目录及index.js入口文件
123456├── lib // 插件源码│ ├── components // 组件目录│ │ └── OwnCom.vue // 组件文件│ └── index.js // 插件入口文件├── index.js // 入口文件└── package.json // 包管理文件
写入文件内容package.json修改包的名称(名称不要重复,可以去npm官网上搜索下能不能搜索出记录)和版本,添加描述内容
12345678910111213{ "name": "rhymin-life", "version": "0.0.1", "description": "ygr test vue plugin", ...
移动H5的一些实践
写在前面初次从电脑端做移动H5时,可能会很不适应:要适应的分辨率变多了,px也不好使了,唯一庆幸的时,手机上没有IE。然后开始思考:如何做适配?然后网上搜索了很多的解决方案,主要就是rem和viewport,还有媒体查询,但是方法并不完美,当我把所有的单位都转化成rem之后,发现手机上有些字体会变得很小,或者手机上正常,但是谷歌浏览器模拟的字体显示不全。
调试
手机端的浏览器主要针对webkit内核
可通过谷歌控制台模拟调试
最好真机调试
尝试不同屏幕尺寸
视口
布局视口:视口980px
视觉视口:在网页上显示的
理想视口:meta(把布局视口设为跟理想视口一致)
123456789<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。- height:和 ...
websocket相关的webapi基本使用
为什么使用 HTTP 协议有一个缺陷:通信只能由客户端发起。服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。而使用WebSocket 服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。
特点
建立在 TCP 协议之上,服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
数据格式比较轻量,性能开销小,通信高效。
可以发送文本,也可以发送二进制数据。
没有同源限制,客户端可以与任意服务器通信。
协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。
客户端APIapi地址:WebSocket-MDN
创建WebSocket 对象提供了用于创建和管理 WebSocket 连接,以及可以通过该连接发送和接收数据的 API。
1var ws = new WebSocket("wss://echo.websocket.org");
状态websocket定 ...
ace-editor在线源码编辑器的使用
关于ace-editor本次学习,主要想使用该库实现一个在线源代码编辑器功能,并且可以在线调试和运行,类似echarts上的实例功能。
官网地址
gitee地址
github地址
参考博客:https://blog.csdn.net/hj7jay/article/details/78410738下载这里在github上下载相关文件
1git clone https://github.com/ajaxorg/ace.git
依赖下载好github的项目文件,你可以使用requireJS将lib/ace的内容作为ace加载,或者使用ace的预打包版本之一:只需将src子目录自已复制到项目中
生成build版
12npm installnode ./Makefile.dryice.js
在运行以上命令时,可以有一些打包选项
1234-m minify build files with uglify-js -nc namespace require and define calls with "ace&q ...
学习:正则表达式
什么是正则正则表达式(Regular Expression 简写regex)是一个很强大的模式语言,使用它我们能够解决很多很棘手的问题,有时候使用字符串查找来解决这类问题不是很方便,所以这个时候正则表达式就能帮我们很大的忙。
完整的正则表达式由两种字符构成。特殊字符(specialcharacters,比如*) 称为“元字符”(metacharacters),其他为“文字”(literal),或者是普通文本字符(normaltext characters).
正则组成表达式部分普通字符普通字符包括没有显式指定为元字符的所有可打印和不可打印字符。这包括所有大写和小写字母、所有数字、所有标点符号和一些其他符号。
1234//匹配字母‘abc’let re =/abc/let res = re.test('asdfabcs')console.log(res)//true
特殊字符所谓特殊字符,就是一些有特殊含义的字符。如果要查找的字符串是一个特殊字符,则需要对其进行转义,即在其前加一个 \
下表列出了正则表达式中的一些特殊字符:
特别字符
描述
$
匹配输入 ...
hexo + centos 实现博客搭建到个人服务器
写在前面hexo,一个静态的不用自己搭建数据库的博客框架,以及使用markdown文档格式编辑文章,不用花太多的时间去维护和更新,更新文章时,只要把平常写的markdown笔记迁移就完成了,对于个人而言,简单实用。
环境我的云服务器是centos7的,本机是window10,基本的环境git,nodejs,nginx就不赘述了。
云服务器配置 (本机finalshell远程登录)创建一个用户用来管理git(yuanguanrui是我的用户名,可以设置其他名字)
1adduser yuanguanrui
设置密码
12passwd yuanguanrui# 后面提示输入密码
初始化仓库 (这是我的仓库路径:’/usr/node_serve/node_project/blog.git’)
12cd /usr/node_serve/node_projectgit init --bare blog.git
另外的,git如果没有设置用户名和密码记得设置,自报家门是必须得,你的名字和Email地址。
12git config --global user.name "zhangs ...