前端小丑-CSDN博客

原创 Docker镜像部署jenkins

Docker镜像部署jenkins1. centos 安装docker 环境docker安装步骤官网docker pull jenkins/jenkins # 拉取镜像jenkins容器创建方式2. 创建Jenkins容器前准备创建jenkins文件夹，用于和容器内文件夹做磁盘挂载mkdir -p /home/jenkins需要修改文件夹的归属者和组在安装jenkins时候，挂在文件夹/home/jenkins/的归属用户id必须是1000，否则会抛出无操作权限异常。异常

2022-02-21 18:56:57 2996 1

原创 Jenkins自动化部署Vue项目

Jenkins 自动化部署vue项目

2022-02-18 17:23:54 19366 8

原创如何实现全局弹窗组件____(this.$notice({}))

如何实现全局弹窗组件____(this.$notice({}))弹窗这类组件的特点是它们在当前vue实例之外独⽴存在，通常挂载于body；它们是通过JS动态创建的，不需要在任何组件中声明。常⻅使⽤姿势： submitFrom() { this.$refs.loginItem.validate((isValid) => { console.log(isValid); this.$notice({ title: "提示信息",

2021-03-02 16:45:29 1470

原创实现表单的双向绑定和校验控制逻辑

**实现表单的双向绑定和校验控制逻辑 **1. 需求 - 实现input表单的双向绑定 - 实现表单的输入校验，以及校验信息提示 - 实现表单提交时的整体校验类似element表单提交校验2. input表单的双向绑定 v-modal语法糖输⼊框Kinput 组件<template> <div> <input :type="type" :value="value" @input="onInput" v

2021-03-02 16:11:29 337

原创浅谈 vue异步更新策略与Vue.nextTick()原理

浅析Vue.nextTick()原理1、为什么用Vue.nextTick()2、什么是Vue.nextTick()3、怎么用4、小结为什么用Vue.nextTick()首先来了解一下JS的运行机制JS运行机制（Event Loop）JS执行是单线程的，它是基于事件循环的。所有同步任务都在主线程上执行，形成一个执行栈。主线程之外，会存在一个任务队列，只要异步任务有了结果，就在任务队列中放置一个事件。当执行栈中的所有同步任务执行完后，就会读取任务队列。那些对应的异步任务，会结束等待

2021-02-19 14:42:51 505 2

原创手写实现vuex插件的基本功能

实现vuex插件的基本功能（state、commit、dispatch、getters)vuex的用法插件需实现需求分析`需求分析 1.实现Store类中的响应式state,commit,dispath,响应式getters 2.实现

2021-02-02 16:15:33 190 1

原创 React JSX 的基础用法

React JSX 的基础用法- 为什么要使用JSX语法使用React，不一定非要使用JSX语法，可以使用原生的JS进行开发。但是React作者强烈建议我们使用JSX，因为JSX在定义类似HTML这种树形结构时，十分的简单明了。简明的代码结构更利于开发和维护。XML有着开闭标签，在构建复杂的树形结构时，比函数调用和对象字面量更易读。看下面直接的对比：#使用JSXReact.render( <div> <div> <div

2020-09-25 16:41:26 304

原创如何发布自己的npm包（超详细步骤，博主都在用）

发布自己的npm超详细步骤前沿：从去年毕业，vue掌握的还算熟练应用了，做过的vue项目也有十几个了吧，每次做项目的时候，有些组件老是使用，拷贝来拷贝去的使用。我就想把这些组件封装到一起，以后做项目可以直接使用。一开始我不知道封装，在网上找资料学习，大部分的帖子都没有把封装包的方式和发包方式讲的详细，今天我特意自我总结分享发布自己的npm的步骤，让每个人都可以封装自己的包，当然我的方式只是封装包一种方式，至少可以封装正常npm下载使用（大佬有好的方式，勿喷！）本人发布的简单包创建项目主要是

2020-09-05 17:52:27 21957 25

原创个人前端学习路线之学习视频资源分享

个人前端学习路线之资源分享本人2019年6月份毕业于安徽省合肥学院计算机科学与技术系网络工程专业，目前是一本院校。在学校的时候大一大二的时候基本都是玩游戏待在宿舍里，大学前两年是没学习到什么东西，到了大三的时候听到学长学姐的励志的分享的时候，内心有股激情在涌动，势必要毕业有所作为。大三的时候就开始制定学习方向，想过学习网络，做网络工程师，毕竟是学习的网络工程专业嘛，后来意识到从事网络工程师，需要考取证书才能有好的就业机会，考取证书需要大量时间和费用，毕竟农村孩子钱是没有的，就果断放弃了网络方向。有想过学习

2020-08-23 16:20:38 4166 11

原创深入理解vue中的slot与slot-scope的基本使用

深入理解vue中的slot与slot-scope简单概念：插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。非插槽模板指的是html模板，指的是‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由插件自身控制；插槽模板是slot，它是一个空壳子，因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定，slot写在组

2020-08-15 16:53:28 1621

原创 async/await的基础用法

async/await的用法asyncasync/await实际上是Generator的语法糖。顾名思义，async关键字代表后面的函数中有异步操作，await表示等待一个异步方法执行完成。声明异步函数只需在普通函数前面加一个关键字async即可，如:async function test() {}async 函数返回一个Promise对象（如果指定的返回值不是Promise对象，也返回一个Promise，只不过立即 resolve ，处理方式同 then 方法），因此 async 函数通

2020-08-09 17:53:34 1548

原创 vue组件间通信常用的六种方式

vue组件间通信常用的几种方式组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如 props/$emit、 $emit/$on、 vuex、 v-

2020-07-19 15:26:23 1192 4

原创 echarts自动滚动效果（鼠标移入停止滚动，移开继续滚动）

echarts自动滚动效果（鼠标移入停止滚动，移开继续滚动）（希望能帮助大家实现ecarts的动画效果）1.效果图：2.图表建立this.option = { grid: { left: "0%", right: "3%", bottom: "0%", top: "5%", containLabel: true }, tooltip: {

2020-07-10 00:37:14 15995 15

原创 git基础命令（自总结）

git的一些基础命令Git常用命令请确保已经安装里git客户端一般配置git --version //查看git的版本信息git config --global user.name //获取当前登录的用户git config --global user.email //获取当前登录用户的邮箱登录git/* 如果刚没有获取到用户配置，则只能拉取代码，不能修改要是使用git，你要告诉git是谁在使用*/git config --global user.name ‘userName

2020-07-06 08:59:32 224

原创 promise概念介绍和基础用法

基础概念介绍Promise 是一个构造函数，既然是构造函数，那么，我们就可以 new Promise() 得到一个 Promise 的实例；在 Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数）和 reject（失败之后的回调函数）在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到 .then() 方法Promise 表示一个异步操作；每当我们 new 一个

2020-07-05 17:05:45 1693

原创 webpack基础配置说明

基本webpack配置说明（基于webpack4)（纯属个人习惯配置，不喜勿喷）在package.json的script中配置"build": “webpack”,可以直接使用npm run build 编译文件，不需要传统的找webpack命令了。const path = require('path')const webpack = require('webpack')const htmlWebpackPlugin = require('html-webpack-plugin') //自动将指定

2020-07-05 16:16:11 331

前端小丑