<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[前端小丑]]></title><description><![CDATA[前端小丑，大牛勿嘲！！！]]></description><link>https://blog.youkuaiyun.com/qq_33286909</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; qq_33286909]]></copyright><item><title><![CDATA[Docker镜像部署jenkins]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/123050982</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/123050982</guid><author>qq_33286909</author><pubDate>Mon, 21 Feb 2022 18:56:57 +0800</pubDate><description><![CDATA[Docker镜像部署jenkins
1.  centos 安装docker 环境

docker安装步骤官网
docker pull jenkins/jenkins  # 拉取镜像
jenkins容器创建方式
2. 创建Jenkins容器前准备


创建jenkins文件夹，用于和容器内文件夹做磁盘挂载
mkdir -p /home/jenkins


需要修改文件夹的归属者和组


在安装jenkins时候，挂在文件夹/home/jenkins/的归属用户id必须是1000，否则会抛出无操作权限异常。异常]]></description><category></category></item><item><title><![CDATA[Jenkins自动化部署Vue项目]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/123004365</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/123004365</guid><author>qq_33286909</author><pubDate>Fri, 18 Feb 2022 17:23:54 +0800</pubDate><description><![CDATA[Jenkins 自动化部署vue项目]]></description><category></category></item><item><title><![CDATA[vue2.0和Vue3.0全套流程开发模板]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/120840223</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/120840223</guid><author>qq_33286909</author><pubDate>Tue, 19 Oct 2021 10:11:50 +0800</pubDate><description><![CDATA[vue2.0和Vue3.0全套流程开发模板
简要：供刚接触前端开发，不善于搭建vue-cli脚手架的同学使用，以便更好的学习开发项目
用法 ：npm全局安装ll-tpl-cli
 npm install ll-tpl-cli -g



系统内容包括：
登录页，菜单模板化、路由和store模板化，自定义换肤，组件（例如table的封装）、指令（水印、拖拽）
的封装，axios拦截封装、路由守卫（permission）封装。

后面在试着整一哈react的微服务模板，基于umijs.

...]]></description><category></category></item><item><title><![CDATA[如何实现全局弹窗组件____(this.$notice({}))]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/114288111</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/114288111</guid><author>qq_33286909</author><pubDate>Tue, 02 Mar 2021 16:45:29 +0800</pubDate><description><![CDATA[如何实现全局弹窗组件____(this.$notice({}))
弹窗这类组件的特点是它们在当前vue实例之外独⽴存在，通常挂载于body；它们是通过JS动态创建
的，不需要在任何组件中声明。常⻅使⽤姿势：

 submitFrom() {
      this.$refs.loginItem.validate((isValid) =&gt; {
        console.log(isValid);
        this.$notice({
          title: "提示信息",
   ]]></description><category></category></item><item><title><![CDATA[实现表单的双向绑定和校验控制逻辑]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/114285921</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/114285921</guid><author>qq_33286909</author><pubDate>Tue, 02 Mar 2021 16:11:29 +0800</pubDate><description><![CDATA[**实现表单的双向绑定和校验控制逻辑 **
1. 需求
         - 实现input表单的双向绑定
	     - 实现表单的输入校验，以及校验信息提示
	     - 实现表单提交时的整体校验

类似element表单提交校验
2. input表单的双向绑定       v-modal语法糖
输⼊框Kinput 组件
&lt;template&gt;
  &lt;div&gt;
    &lt;input :type="type" :value="value" @input="onInput" v]]></description><category></category></item><item><title><![CDATA[浅谈 vue异步更新策略与Vue.nextTick()原理]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/113863575</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/113863575</guid><author>qq_33286909</author><pubDate>Fri, 19 Feb 2021 14:42:51 +0800</pubDate><description><![CDATA[浅析Vue.nextTick()原理
1、为什么用Vue.nextTick()
2、什么是Vue.nextTick()
3、怎么用
4、小结

为什么用Vue.nextTick()

首先来了解一下JS的运行机制
JS运行机制（Event Loop）
JS执行是单线程的，它是基于事件循环的。


所有同步任务都在主线程上执行，形成一个执行栈。
主线程之外，会存在一个任务队列，只要异步任务有了结果，就在任务队列中放置一个事件。
当执行栈中的所有同步任务执行完后，就会读取任务队列。那些对应的异步任务，会结束等待]]></description><category></category></item><item><title><![CDATA[手写实现vuex插件的基本功能]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/113559888</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/113559888</guid><author>qq_33286909</author><pubDate>Tue, 02 Feb 2021 16:15:33 +0800</pubDate><description><![CDATA[实现vuex插件的基本功能（state、commit、dispatch、getters)


vuex的用法


插件需实现需求分析
`需求分析


  1.实现Store类中的响应式state,commit,dispath,响应式getters
  2.实现


]]></description><category></category></item><item><title><![CDATA[React JSX 的基础用法]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/108799388</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/108799388</guid><author>qq_33286909</author><pubDate>Fri, 25 Sep 2020 16:41:26 +0800</pubDate><description><![CDATA[React JSX 的基础用法
- 为什么要使用JSX语法
使用React，不一定非要使用JSX语法，可以使用原生的JS进行开发。但是React作者强烈建议我们使用JSX，因为JSX在定义类似HTML这种树形结构时，十分的简单明了。简明的代码结构更利于开发和维护。
XML有着开闭标签，在构建复杂的树形结构时，比函数调用和对象字面量更易读。看下面直接的对比：
#使用JSX
React.render(
    &lt;div&gt;
        &lt;div&gt;
            &lt;div]]></description><category></category></item><item><title><![CDATA[如何发布自己的npm包（超详细步骤，博主都在用）]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/108421181</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/108421181</guid><author>qq_33286909</author><pubDate>Sat, 05 Sep 2020 17:52:27 +0800</pubDate><description><![CDATA[发布自己的npm超详细步骤


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


创建项目
主要是]]></description><category></category></item><item><title><![CDATA[自封装的常用组件贴图（自用）]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/108228778</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/108228778</guid><author>qq_33286909</author><pubDate>Tue, 25 Aug 2020 20:52:10 +0800</pubDate><description><![CDATA[自封装的常用组件：
用法：
npm i llgtfoo-components-box --save

在main.js中引入
import llgtfooComponentsBox from "llgtfoo-components-box";
import "llgtfoo-components-box/dist/llgtfoo-components-box.css";
Vue.use(llgtfooComponentsBox);
注：全局使用,组件可以单独引用





组件：





&lt;date]]></description><category></category></item><item><title><![CDATA[个人前端学习路线之学习视频资源分享]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/108183214</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/108183214</guid><author>qq_33286909</author><pubDate>Sun, 23 Aug 2020 16:20:38 +0800</pubDate><description><![CDATA[个人前端学习路线之资源分享
本人2019年6月份毕业于安徽省合肥学院计算机科学与技术系网络工程专业，目前是一本院校。在学校的时候大一大二的时候基本都是玩游戏待在宿舍里，大学前两年是没学习到什么东西，到了大三的时候听到学长学姐的励志的分享的时候，内心有股激情在涌动，势必要毕业有所作为。大三的时候就开始制定学习方向，想过学习网络，做网络工程师，毕竟是学习的网络工程专业嘛，后来意识到从事网络工程师，需要考取证书才能有好的就业机会，考取证书需要大量时间和费用，毕竟农村孩子钱是没有的，就果断放弃了网络方向。有想过学习]]></description><category></category></item><item><title><![CDATA[深入理解vue中的slot与slot-scope的基本使用]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/108024680</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/108024680</guid><author>qq_33286909</author><pubDate>Sat, 15 Aug 2020 16:53:28 +0800</pubDate><description><![CDATA[深入理解vue中的slot与slot-scope


简单概念：
插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。
从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。
非插槽模板指的是html模板，指的是‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由插件自身控制；插槽模板是slot，它是一个空壳子，因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定，slot写在组]]></description><category></category></item><item><title><![CDATA[async/await的基础用法]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/107897140</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/107897140</guid><author>qq_33286909</author><pubDate>Sun, 09 Aug 2020 17:53:34 +0800</pubDate><description><![CDATA[async/await的用法


async


async/await实际上是Generator的语法糖。顾名思义，async关键字代表后面的函数中有异步操作，await表示等待一个异步方法执行完成。声明异步函数只需在普通函数前面加一个关键字async即可，如:
async function test() {}

async 函数返回一个Promise对象（如果指定的返回值不是Promise对象，也返回一个Promise，只不过立即 resolve ，处理方式同 then 方法），因此 async 函数通]]></description><category></category></item><item><title><![CDATA[vue组件间通信常用的六种方式]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/107445910</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/107445910</guid><author>qq_33286909</author><pubDate>Sun, 19 Jul 2020 15:26:23 +0800</pubDate><description><![CDATA[vue组件间通信常用的几种方式
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：

如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。
针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，
如
			props/$emit、
			$emit/$on、
			vuex、
			v-]]></description><category></category></item><item><title><![CDATA[echarts自动滚动效果（鼠标移入停止滚动，移开继续滚动）]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/107241254</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/107241254</guid><author>qq_33286909</author><pubDate>Fri, 10 Jul 2020 00:37:14 +0800</pubDate><description><![CDATA[echarts自动滚动效果（鼠标移入停止滚动，移开继续滚动）
（希望能帮助大家实现ecarts的动画效果）
1.效果图：
2.图表建立
this.option = {
        grid: {
          left: "0%",
          right: "3%",
          bottom: "0%",
          top: "5%",
          containLabel: true
        },
        tooltip: {
       ]]></description><category></category></item><item><title><![CDATA[git基础命令（自总结）]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/107140709</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/107140709</guid><author>qq_33286909</author><pubDate>Mon, 06 Jul 2020 08:59:32 +0800</pubDate><description><![CDATA[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]]></description><category></category></item><item><title><![CDATA[promise概念介绍和基础用法]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/107141120</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/107141120</guid><author>qq_33286909</author><pubDate>Sun, 05 Jul 2020 17:05:45 +0800</pubDate><description><![CDATA[基础概念介绍

Promise 是一个 构造函数，既然是构造函数， 那么，我们就可以  new Promise() 得到一个 Promise 的实例；
在 Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数）
在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到 .then() 方法
Promise 表示一个 异步操作；每当我们 new 一个]]></description><category></category></item><item><title><![CDATA[webpack基础配置说明]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/107140443</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/107140443</guid><author>qq_33286909</author><pubDate>Sun, 05 Jul 2020 16:16:11 +0800</pubDate><description><![CDATA[基本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') //自动将指定]]></description><category></category></item><item><title><![CDATA[前端开发vscode中比较实用的插件工具之分享]]></title><link>https://blog.youkuaiyun.com/qq_33286909/article/details/107140251</link><guid>https://blog.youkuaiyun.com/qq_33286909/article/details/107140251</guid><author>qq_33286909</author><pubDate>Sun, 05 Jul 2020 16:05:26 +0800</pubDate><description><![CDATA[前端开发vscode中比较使用的插件工具
  （希望能帮助刚入门的前端开发小伙伴）



Chinese (Simplified) Language Pack for Visual Studio Code	
中文简体语言包
Auto Close Tag	
自动添加HTML / XML关闭标签
Auto Rename Tag	
自动重命名配对的HTML / XML标签
HTML Snippets	
代码自动填充
HTML Boilerplate	
提供生成标准HTML样板代码
Image Preview	
鼠]]></description><category></category></item></channel></rss>