- 博客(128)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 Vue单元测试
Vue单元测试新建一个vue项目# 1.创建项目vue create vue-jest-demo # 新建一个vue的项目（选择jest单元测试）# 2.选择自定义配置 default (babel, eslint)> Manually select features# 3.选择安装feature，也可以根据自己的喜好去安装 (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router
2023-07-17 10:30:43
595
原创 Jest单元测试(二)
Jest 使用匹配器新建 using-matchers.test.js 测试文件普通匹配 - toEqual// using-matchers.test.js// toBe 使用 Object.is 来测试精确相等test('two plus two is four', () => { expect(2 + 2).toBe(4);});// 如果您想要检查对象的值，请使用 toEqual, toEqual 递归检查对象或数组的每个字段。test('object assi
2023-07-17 10:28:01
1473
原创 Jest单元测试(一)
Jest 简介Jest是Facebook一套开源的 JavaScript 测试框架，它自动集成了断言、JSDom、覆盖率报告等测试工具。他适用但不局限于使用以下技术的项目：Babel, TypeScript, Node, React, Angular, Vue官网地址：https://jestjs.io/en/Jest 安装使用 yarn 安装 Jest︰yarn add --dev jest或 npm：npm install --save-dev jest注：Jest的文档统一使用y
2023-07-17 10:20:51
2046
1
原创 Docker-CE用nginx:latest镜像部署web项目
1.编写启动nginx:latest镜像脚本docker rm -f nginxdocker run \ --name nginx \ --restart=always \ -p 8090:80 \ -p 9090:9090 \ -v /data/nginx/conf/nginx.conf:/usr/local/webserver/nginx/conf/nginx.conf \ -v /data/nginx/conf.d:/usr/local/webserver/nginx/
2020-11-21 11:24:05
843
原创 编写Dockerfile来构建nginx:latest镜像
1.新建 Dockerfile 文件1.在 Dockerfile 目录下，新建一个名为 Dockerfile 文件:[root@VM_0_6_centos src]# pwd/usr/local/src[root@VM_0_6_centos src]# mdkir Dockerfile [root@VM_0_6_centos src]# lsDockerfile [root@VM_0_6_centos src]# cd Dockerfile/[root@VM_0_6_centos Dock
2020-11-21 11:23:39
2287
原创 CentOS容器中安装Nginx
1.加载本地 centos8.tar 镜像docker load --input centos8.tar[root@VM_0_6_centos images-bak]# docker imagesREPOSITORY TAG IMAGE ID CREATED SIZE[root@VM_0_6_centos images-bak]# lscentos8.tar[root@VM_0_6_centos im
2020-11-08 21:54:23
863
原创 Docker-CE 安装 CentOS
1.查看可用的 CentOS 版本1.访问 CentOS 镜像库地址：https://hub.docker.com/_/centos?tab=tags&page=1。点击右上角的：View Available Tags 之后便可以查看 CentOS 其他的版本2.使用 docker 命令来查看 CentOS 其他的版本[root@VM_0_6_centos docker]# docker search centos8NAME
2020-10-10 14:30:18
270
原创 CentOS Docker 安装
CentOS安装Docker-CE官方安装教程：https://docs.docker.com/engine/install/centos/Docker 支持 64 位 CentOS 7 以上 的版本1.卸载旧版本的Docker如果以前安装过旧版的 docker， 先删除旧版的 docker （旧版的docker叫：docker or docker-engine ）。新版的 docker 叫：docker-ce， 全称：Docker Engine-CommunityOlder versions
2020-10-10 14:29:49
152
原创 node编写cli命令行(三)
该文章是在 node编写cli命令行(二) 的基础上继续编写的1.编写 addcom 指令编写一个 addcom 指令，例如当执行：vue-temp-cli addcom HelloWorld -d /src/view/main 时，会在/src/view/main目录下新建一个 HelloWorld 组件1.添加模板文件新建一个 template 文件夹lib |--index.jstemplate |-- mockjs `-- src |-- base
2020-08-21 09:43:52
604
原创 node编写cli命令行(二)
该文章是在 node编写cli命令行(一) 的基础上继续编写的1.编写 create 指令编写一个新建vue项目的 create 指令，例如当执行：vue-temp-cli create myVue 时，会新建一个项目名称为myVue 的 Vue 项目1.编写 create 指令1.修改index.js文件在第3步添加新建项目的 create 指令#!/usr/bin/env nodeconsole.log('vue-temp-cli')var program = require('com
2020-07-22 17:39:31
1704
原创 node编写cli命令行(一)
node编写cli命令行(一)前端日常开发中，会遇见各种各样的cli，比如一行命令帮你打包的 webpack，一行命令帮你生成vue项目模板的vue-cli，还有创建react项目的create-react-app等等。那么这些脚手架是什么编写的？下面演示一下如何制作一个vue-temp-cli 脚手架。1.先编写node脚本1.新建一个vue-temp-cli 文件夹`-- vue-temp-cli |-- index.js `-- lib2.在改文件夹下新建一个index.j
2020-07-13 15:41:30
1227
原创 nginx+keepalived 部署web高可用
nginx+keepalived 部署web的高可用1.准备两台在同一个局域网的Linux服务器主机器ip：172.16.119.213备用机器ip：172.16.119.2142.两台服务器先都搭建好nginx服务器1.两台服务器都安装keepalivedyum install keepalived -y # 先安装好nginx后再安装 keepalivedkeepalived 配置文件路径：/etc/keepalived/keepalived.confcp /etc/keepal
2020-05-11 19:51:07
633
原创 编写vue-cli远程Preset
1.什么是 vue-cli 插件？Vue CLI 使用了一套基于插件的架构。如果你查阅一个新创建项目的 package.json，就会发现依赖都是以 @vue/cli-plugin- 开头的。插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。基于插件的架构使得 Vue CLI 灵活且可扩展。...
2020-01-14 14:36:38
1468
原创 发布一个npm包
1.发布一个npm包1.npm 是什么？npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从npm服务器下载别人编写的第三方包到本地使用。允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。由于新版的Nodejs已经集成了npm，所以之前...
2020-01-08 17:37:12
279
原创 Shell脚本的语法
Shell脚本的语法Shell Script ，Shell脚本与Windows / Dos下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比Windows下的批处理更强大，比用其他编程程序编辑的程序效率更高，它使用了Linux/Unix下的命令。Shell 是一个用 C 语言编写的程序，它是用户使用 Linux ...
2019-11-04 17:44:08
251
原创 Jenkins部署前端项目
1.Jenkins部署前端项目在使用Jenkins部署前端项目时需要搭建好 JenKins 的自动化部署环境。1）Linux服务器上安装好了JDK软件，并配好了环境变量2）Linux服务器上安装好 Jenkins 软件，并安装了 JenKins 推荐安装的插件3）Linux服务器上安装好了Node软件，并配好了环境变量（npm 需要设置淘宝镜像）# 设置淘宝镜像npm config s...
2019-10-25 15:14:09
9069
原创 centos 搭建 Jenkins
1.Jenkins简介Jenkins是一个开源软件项目，是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件的持续集成变成可能。持续集成是一种软件开发实践，即团队开发成员经常集成他们的工作，通常每个成员至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过**自动化的构建（拉取代码，编译，发布，自动化测试）**来验证，从而尽快地发现集成错...
2019-10-22 15:26:30
448
原创 Linux 指令使用
1.网络相关的指令1.查看网卡ip地址ifconfig ifconfig -a2.修改网卡ip地址1.ifcofig eth1 192.168.56.1022.ifconfig //修改后查看效果3.切换用户su - root 密码：4.暂时关闭或启动网卡ifconfig eth0 down //关闭第一块网卡ifconfig eth0
2019-10-21 12:04:26
242
原创 JavaScript中的深拷贝
1.什么是深拷贝浅拷贝只是解决了第一层的拷贝问题，拷贝第一层的***基本类型值***，以及第一层的***引用类型地址***，并没有递归拷贝第二层以后的属性。深拷贝会拷贝所有的属性，拷贝的属性指向动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。深拷贝可以解决多层拷贝的问题。2.深拷贝的使用1.JSON.parse...
2019-09-29 15:29:38
299
1
原创 JavaScript中的浅拷贝
1.什么是浅拷贝例如：根据原始A对象浅拷贝一个新的B对象出来浅拷贝就是创建一个新对象B，这个对象B有着原始对象A属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是A对象的基本类型的值；如果属性是引用类型，拷贝的就是A对象的内存(引用)地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。浅拷贝只是解决了第一层的拷贝问题，拷贝第一层的基本类型值，以及第一层的引用类型地址，并没有递...
2019-09-29 15:28:04
198
原创 常用的正则表达式
1.正则表达式正则表达式，又称规则表达式**。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换、验证表单、提取**那些符合某个模式(规则)的文本。许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工...
2019-09-26 15:59:57
1363
原创 Webpack4 自定义 Plugins
1.PluginWebpack 通过 Plugin 机制让其更加灵活，以适应各种应用场景。在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件。除此之外 Plugin 还可以广播自定义事件和监听自定义广播（例如，多个Plugin插件之间的通讯就可以通过定义自定义广播事件）。通过 Webpack 提供的 API 可以在构建的合适时机去改变输出的结果。1)一个最基...
2019-09-20 13:04:31
1358
原创 Webpack4 自定义 Loader
1.LoaderLoader 就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式的经过多个翻译员翻译。以下面处理 CSS 文件为例：CSS 源代码会先交给 css-loader 处理，找出 CSS 中依赖的资源、压缩 CSS 等；把 css-loader 输出的 CSS 交给 style-loader 处理，转换成通过脚本加载的 JavaScript 代码( ...
2019-09-12 16:13:59
778
原创 Webpack4 HappyPack增加编译进程数
1.HappyPack在用Webpack构建项目时有大量文件需要解析和处理，构建过程是文件读写和计算密集型的操作（特别是当文件数量变多后），Webpack 构建慢的问题会显得严重。运行在 Node.js 之上的 Webpack 是单线程模型的，也就是说 Webpack 需要处理的任务需要一件件挨着做，不能多个事情一起做。文件读写和计算操作是无法避免的，那能不能让 Webpack 同一时刻处理...
2019-09-12 16:10:17
3953
原创 Webpack4 制作动态链接库
1.动态链接库DLLWebpack构建时接入动态链接库的思想后，会大大提升构建速度。 原因在于包含大量复用模块的动态链接库只需要编译一次，在之后的构建过程中被动态链接库包含的模块将不会在重新编译，而是直接使用动态链接库中的代码。 由于动态链接库中大多数包含的是常用的第三方模块，例如 react、react-dom，只要不升级这些模块的版本，动态链接库就不用重新编译。而Externals 用来...
2019-09-06 15:47:09
1093
原创 Webpack4 配置 Externals
Externals 配置项用来告诉 Webpack 要构建的代码中使用了哪些不用被打包的模块，也就是说这些模版是外部环境提供的，Webpack 在打包时可以忽略它们。1.有些 JavaScript 运行环境可能内置了一些全局变量或者模块，例如在你的 HTML BODY标签里通过以下代码：<script src="https://cdn.bootcss.com/jquery/3.4.1/j...
2019-09-05 12:25:12
9005
原创 Webpack4 配置 DevServer 本地服务器
前面的已经介绍过如何用webpack 打包一个项目，细心的人会发现，打包后想要项目运行起来必须要把打包后的项目上传到服务器中，或者静态的项目也可以在本地直接用浏览器打开。但在实际开发中可能会需要实时预览界面效果，那么这个时候就需要创建一个本地的HTTP服务器来实现实时预览项目。然而官方提供的开发工具 DevServer 也可以很方便地做到项目的实时预览, 修改文件后自动刷新，Source Map...
2019-09-05 10:43:19
1855
原创 Webpack4 配置 Resolve
Webpack4 配置 ResolveWebpack在启动后会从webpack.config.js 配置文件中的enter属性指定的入口模块出发找出所有依赖的模块，Resolve 的作用就是：配置 Webpack 如何寻找模块所对应的文件。resolve 属性的值是一个对象。该对象常用的属性有： modules、extensions、alias、...， 其中modules是配置寻找模块的根目录...
2019-07-26 14:19:15
1557
原创 Webpack4 配置 Plugins
1.Webpack4 配置 PluginsPlugin 用于扩展 Webpack 功能，可以通过在构建流程里注入钩子实现，然而各种各样的 Plugin 几乎让 Webpack 可以做任何构建相关的事情。loader vs plugins 区别 :loader 用于加载某些资源文件，它只专注于转化文件（transform）这个领域，loader运行在webpack打包之前。plugins ...
2019-07-22 11:33:26
642
原创 Webpack4 配置TS Loader
TypeScript 是 JavaScript 的一个超集，主要提供了类型检查系统和对 ES6 语法的支持，但不支持新的 API。 目前没有任何环境支持运行原生的 TypeScript 代码，必须通过构建把它转换成 JavaScript 代码后才能运行。TypeScript 官方提供了能把 TypeScript 转换成 JavaScript 的编译器:typescript 。 你需要在当前项目根...
2019-07-19 16:02:10
9440
原创 Webpack4 配置JS Loader
1.ES6兼容介绍ECMAScript 6.0 是2015年发布的下一代 JavaScript 语言标准，它引入了新的语法和 API 来提升开发效率。虽然目前部分浏览器和 Node.js 已经支持 ES6，但由于它们对 ES6 所有的标准支持不全，这导致在开发中不敢全面地使用 ES6。通常我们需要把采用 ES6 编写的代码转换成目前已经支持良好的 ES5 代码，这包含2件事：把新的 ES...
2019-07-19 12:57:27
3163
原创 Wbpack4 配置 PostCss Loader
1.配置PostCss LoaderPostCSS 也是一个CSS 预处理工具，和 SCSS 不同的地方在于它通过插件机制可以灵活的扩展其支持的特性，而不是像 SCSS 那样语法是固定的。PostCSS 的用处非常多，包括给 CSS 自动加前缀、使用下一代 CSS 语法等，目前越来越多的人开始用它，它很可能会成为 CSS 预处理器的最终赢家。PostCSS 和 CSS 的关系就像 Babe...
2019-07-17 11:11:06
294
原创 Webpack4 配置 scss Loader
1.配置 scss LoaderSCSS 可以让你用更灵活的方式写 CSS。 它是一种 CSS 预处理器，语法和 CSS 相似，但加入了变量、逻辑、等编程元素。SCSS 又叫 SASS，区别在于 SASS 语法类似 Ruby，而 SCSS 语法类似 CSS，对于熟悉 CSS 的前端工程师来说会更喜欢 SCSS。使用 SCSS 可以提升编码效率，但是必须把 SCSS 源代码编译成可以直接在浏览器...
2019-07-17 11:08:23
4719
1
原创 Webpack4 配置 Loader
1.Modulemodule 配置如何处理模块, 它的值是一个对象，常用的值有 noParse 和 rules 。其中 noParse 是用来指定哪些资源不需要解析，提高编译性能；rules 是用来定义多个规则，这些规则用来匹配对应的模块，然后给对应的模块应用指定的loader,rules 接收的是一个数组，数组存放的是 rule 对象;rule 对象常用的属性：test, use, i...
2019-07-17 10:31:11
1294
原创 Webpack4 配置 Output
Webpack4 配置 Outputoutput 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。output 是一个 object，里面包含一系列配置项，下面分别介绍它们。简单案例：( webpa...
2019-07-15 11:21:41
2549
原创 Webpack4 配置 Entry
Webpack4 配置 Entryentry是配置模块的入口，可抽象成输入，Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块。entry 配置是必填的，若不填则将导致 Webpack 报错退出。简单的配置代码：( 在 webpack.config.js 文件下 配置 )module.exports = { // 1.JavaScript 执行入口文件...
2019-07-11 17:26:04
2834
原创 Webpack4-的安装和使用
1.Webpack安装在用 Webpack 执行构建任务时需要通过 webpack 可执行文件去启动构建任务，所以需要安装 webpack 可执行文件。 ( 例如：webpack --config webpack.config.js )在安装 Webpack工具前请确保你的系统安装了5.0.0及以上版本的 Node.js。因为webpack在执行打包压缩等时是依赖node.js的，没有no...
2019-07-11 10:52:03
2634
原创 Webpack构建工具介绍
1.WebpackWebpack 是一个现代 JavaScript 应用程序静态模块打包工具(module bundler)，在 Webpack 里一切文件皆模块(例如：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块)，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件（Chunk）。Webpack 专注于构建模...
2019-07-11 10:40:17
472
原创 Nginx服务器进阶
1.Nginx 动静态资源分离1.配置反向代理1.基本的配置# 修改配置文件需要重启服务器user liujun liu;worker_processes 1;events { worker_connections 1024;}http { include mime.types; default_type application/oct...
2018-10-25 16:44:45
267
原创 Nginx服务器简单入门
1.Nginx 环境搭建1.Mac下搭建 Nginx1.brew 简介brew又叫Homebrew，是Mac中的一款软件包管理工具，通过brew可以很方便的在Mac中安装软件或者是卸载软件。一般Mac电脑会默认安装有brew, 常用指令如下:- brew 搜索软件 brew search nginx - brew 安装软件 brew install nginx - b...
2018-10-25 16:40:06
395
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人