<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[junkaicool的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/junkaicool</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; junkaicool]]></copyright><item><title><![CDATA[基于 Docker + Verdaccio 搭建 Npm 私有库，实现在私有库上发布、下载npm包]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/122679609</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/122679609</guid><author>junkaicool</author><pubDate>Tue, 25 Jan 2022 09:58:51 +0800</pubDate><description><![CDATA[公司内部前端组件或库的共享等，搭建一个`npm`私有库就很方便，现在中大型公司也基本都有自己的`npm`私有库，这篇文章，和大家一起共同搭建一个`npm`私有库，共同学习～]]></description><category></category></item><item><title><![CDATA[基于 Docker ( Gitlab、Gitlab Runner ) 搭建一整套自动化CI、CD流程，完成从代码提交到自动打包编译到自动部署运行]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/122679508</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/122679508</guid><author>junkaicool</author><pubDate>Tue, 25 Jan 2022 09:53:48 +0800</pubDate><description><![CDATA[作为一个前端，以前在公司内接触过搭建成熟的完整CI、CD流程，后来在想是否自己也能搭建这样一套系统，通过学习研究后有了这样一篇博客，和各位一起共同学习。

首先大家需要一台服务器，本机电脑也行（推荐2核8G配置以上，因为安装的服务比较占内存）。
一、安装 Docker
linux服务器使用curl下载快速安装的shell脚本
curl -fsSL get.docker.com -o get-docker.sh

下载完成后，可以ls命令查看一下。已经存在的话，使用sh命令执行这个脚本
sh get-doc.]]></description><category></category></item><item><title><![CDATA[前端工程化之用commintlint + husky实现git提交规范化]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/106216183</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/106216183</guid><author>junkaicool</author><pubDate>Tue, 19 May 2020 16:06:11 +0800</pubDate><description><![CDATA[在我们团队协作开发时，如果每个人的git的commit提交规范都不一样，最后的代码review或看git的log提交记录时就是一团乱，今天我们用commit + husky实现git提交规范化，保证错误的commit信息不能提交成功。

一、在项目中安装commitlint

安装依赖

npm install --save-dev @commitlint/{cli,config-conventional}


生成配置文件

echo "module.exports = {extends: ['@com.]]></description><category></category></item><item><title><![CDATA[前端搭建自己的脚手架(cli)，实现公司内部前端工程化]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/106123839</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/106123839</guid><author>junkaicool</author><pubDate>Thu, 14 May 2020 17:02:08 +0800</pubDate><description><![CDATA[我们熟知的vue-cli，create-react-app都是前端圈最知名、最流行、最大众化的脚手架工具，但是我们公司内部开发时一般会对其再封装一些自己的库或者组件等，生成自己的脚手架工具，但大多搭建脚手架的文章都比较复杂，很多时候我们想要就是通过简单的命令能够比较方便的下载到我们的脚手架代码。

一、生成脚手架代码模板，并放到github

在这里我封装了两个脚手架代码模板：

基于vue-cli，封装自己的业务代码及组件等
基于create-react-app，封装自己的业务代码及组件等
并把他们上传.]]></description><category></category></item><item><title><![CDATA[Redux + React-Redux + Redux-Thunk 在 React 实际项目开发中使用详解]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/106093099</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/106093099</guid><author>junkaicool</author><pubDate>Wed, 13 May 2020 14:13:57 +0800</pubDate><description><![CDATA[React 是我们的视图框架，但在大型项目开发的时候需要公用的数据状态是很难管理的，有明显父子关系的组件还比较方便传递值，但没关系的组件传值是非常麻烦的，这时候就需要用到我们的状态管理库 Redux，该文章会讲解在实际React项目开发中redux + react-redux + redux-thunk 组合应用，这也是我们现在企业项目开发中最常用的搭配，让你能够快速应用起来！

一、Redux 介绍
Redux 是搭配 React 项目开发中最常用的状态管理库，大家知道在我们 React项目开发时，组件.]]></description><category></category></item><item><title><![CDATA[React Router 基本使用及实际项目使用详解]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/106076361</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/106076361</guid><author>junkaicool</author><pubDate>Tue, 12 May 2020 16:42:42 +0800</pubDate><description><![CDATA[React Router 是搭配React项目开发时强大的路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

一、安装react-route-dom
在你的项目中执行
npm i react-router-dom

来安装reacr-router
二、编写最简单的路由
在我的项目中App是作为我的根组件的，我编写基本路由就在App组件内，这里根据实际项目来写，有的是写在单独的router组件里。
index.js :
import React from 'react';.]]></description><category></category></item><item><title><![CDATA[React Hooks 使用详解及实际项目中遇到的坑]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/106048846</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/106048846</guid><author>junkaicool</author><pubDate>Mon, 11 May 2020 16:29:30 +0800</pubDate><description><![CDATA[React Hooks 是 React 在16.8版本中更新的新特性，在 React 中一直提倡使用函数组件，老版本中函数组件没有组件实例，没有 state，没有生命周期函数，导致很多情况不得不使用类组件，但是 Hooks 出来后我们可以在不使用类组件的情况下使用state及其他React特性！

一. useState
1. useState基本使用
import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "co.]]></description><category></category></item><item><title><![CDATA[cmd中 git log中文乱码解决方法]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/105975562</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/105975562</guid><author>junkaicool</author><pubDate>Thu, 07 May 2020 16:32:44 +0800</pubDate><description><![CDATA[在win10中，用cmd或者bash中使用git时候，经常遇到乱码问题，网上类似的教程很多，一般可以直接在cmd/bash中输入如下设置命令：
git config --global core.quotepath false 
git config --global gui.encoding utf-8
git config --global i18n.commit.encoding utf-8 ...]]></description><category></category></item><item><title><![CDATA[VUE中使用vue-json-excel超级方便导出excel表格数据]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/96423061</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/96423061</guid><author>junkaicool</author><pubDate>Thu, 18 Jul 2019 09:33:32 +0800</pubDate><description><![CDATA[在项目开发时免不了有时会用到表格数据导出excel的功能，以前会用file-saver xlsx script-loader来导出，而且配置非常麻烦，现在用vue-json-excel配置及使用都非常简单

一、安装vue-json-excel
npm install vue-json-excel -S

二、main.js里面引入并注册使用
import JsonExcel from 'vue...]]></description><category></category></item><item><title><![CDATA[Koa2用户注册生成密文密码及用户登录时生成token返回]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/93710886</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/93710886</guid><author>junkaicool</author><pubDate>Wed, 26 Jun 2019 10:10:06 +0800</pubDate><description><![CDATA[项目开发时免不了用户注册和登录的模块，用户生成密文密码保存，及用户登录时密文密码的校验还有token的生成及校验都是很重要的，这篇文章教大家在Koa2开发项目的这块教程！

一、用户注册时密文密码生成及校验

在需要加密的模块安装并引入bcrypt

bcrypt是通过hash模式生成密文的模块，且相同密码每次生成的hash密文也不一样，这就比以前MD5的加密模式安全多了，别人基本不可能解密这个...]]></description><category></category></item><item><title><![CDATA[linux下安装Nodejs+MongoDB+PM2]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/93487279</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/93487279</guid><author>junkaicool</author><pubDate>Mon, 24 Jun 2019 16:24:11 +0800</pubDate><description><![CDATA[Node项目上线时需要在Linux下安装Node环境，数据库我这里采用的MongoDB，用PM2来监控并后台运行Node项目

一、安装Nodejs
1.yum 安装 epel-release
yum install epel-release -y

2.yum 安装 Nodejs
yum install nodejs -y

3.因为yum安装Nodejs不能安装最新版，所以我们安装个node...]]></description><category></category></item><item><title><![CDATA[linux安装nginx环境及常用配置和命令]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/93463067</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/93463067</guid><author>junkaicool</author><pubDate>Mon, 24 Jun 2019 10:32:28 +0800</pubDate><description><![CDATA[当我们项目上线部署的时候，肯定少不了在linux环境中安装服务器，而nginx就是现在比较主流功能比较强大的一款服务器。这次教程带大家从基础的linux环境一步一步安装nginx，及nginx的常用配置和常用命令。

一、用yum进行安装linux必要环境
如果你Linux用的很熟练的话，我想这些程序你一定已经用yum安装过了，但是如果你还不熟悉Linux，你可以直接用yum进行安装就可以了。（...]]></description><category></category></item><item><title><![CDATA[vue项目打包时做优化处理的办法]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/90906086</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/90906086</guid><author>junkaicool</author><pubDate>Wed, 05 Jun 2019 17:29:39 +0800</pubDate><description><![CDATA[vue项目打包时做优化处理的办法

在vue项目打包时会生成很多map文件，这是占打包后项目大小的很大一部分


map文件的处理

我们编辑 /config/index.js 文件，找到其中的
productionSourceMap: true,

修改为：
productionSourceMap: false,


将项目打包到子目录

刚刚，我们是将文件，打包为根目录访问的。也就是说，必须在...]]></description><category></category></item><item><title><![CDATA[chrome浏览器配置解决本地跨域调试问题]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/90597573</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/90597573</guid><author>junkaicool</author><pubDate>Mon, 27 May 2019 09:19:13 +0800</pubDate><description><![CDATA[chrome浏览器配置解决本地跨域调试问题

有时候在项目开发过程中需要在本地开启跨域访问，用这个简单方法就可以实现本地跨域调试


关闭chrome浏览器（全部）

我们可以通过使用chrome命令行启动参数来改变chrome浏览器的设置，具体的启动参数说明参考这篇介绍。https://code.google.com/p/xiaody/wiki/ChromiumCommandLineSwitch...]]></description><category></category></item><item><title><![CDATA[express使用multer实现文件上传功能]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/90516876</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/90516876</guid><author>junkaicool</author><pubDate>Fri, 24 May 2019 15:15:46 +0800</pubDate><description><![CDATA[express使用multer实现文件上传功能

在express框架中想要实现文件上传功能，可以使用multer中间件，该文章教大家具体怎么配置和使用


使用之前首先安装 multer

npm install multer --save


在定义路由前引入

const multer = require('multer')


设置 dest 属性(设置上传文件后保存的位置)

const...]]></description><category></category></item><item><title><![CDATA[vue中用路由用history模式，在node中的配置方法]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/90516341</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/90516341</guid><author>junkaicool</author><pubDate>Fri, 24 May 2019 14:52:50 +0800</pubDate><description><![CDATA[vue中用路由用history模式，在node中的配置方法

大家知道如果你在 Vue 中使用 hisrory 模式，是无法搭配简单的静态文件服务器的。例如，如果你使用 Vue Router 为 /todos 定义了一个路由，开发服务器已经配置了相应的 localhost:3000/todos 相应，但是一个为生产环境构建架设的简单的静态服务器会却会返回 404。

这时。我们有个简单的解决方法，...]]></description><category></category></item><item><title><![CDATA[vue中用vuex来管理axios获取到的数据]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/90137520</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/90137520</guid><author>junkaicool</author><pubDate>Sun, 12 May 2019 10:07:36 +0800</pubDate><description><![CDATA[目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 vuex 来管理数据，今天就带大家一起来学习一下 如何在 vuex 中利用 axios 请求数据
安装vuex 和 axios ，这里的安装我就不再赘述
开始
1、Vuex的仓库时 store.js ，我们需要把 axios 引入，并在 action 添加新的方法

如图，我们在 store/index.js...]]></description><category></category></item><item><title><![CDATA[vue中excal表格的导入和导出]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/89548024</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/89548024</guid><author>junkaicool</author><pubDate>Fri, 26 Apr 2019 13:12:48 +0800</pubDate><description><![CDATA[注意：vue中要实现表格的导入与导出，首先要install两个依赖，
npm install -S file-saver xlsx  和  npm install -D script-loader。其次，在项目src目录下新建一个文件夹vendor（名字随意），在此文件夹下放置两个文件Blob.js和Export2Excal.js（下载地址：http://files.cnblogs.com/fil...]]></description><category></category></item><item><title><![CDATA[vue移动端开发流程]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/88837346</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/88837346</guid><author>junkaicool</author><pubDate>Wed, 27 Mar 2019 09:56:15 +0800</pubDate><description><![CDATA[1、移动端viewport的引入
&lt;meta name="viewport" content="width=device-width,initial-scale=1.0" mininum-scale="1.0" maxnum-scale="1.0" user-scalble="no"&gt;

2、reset.css的引入解决移动端各浏览器样式不一样的问题
3、border.css的引入解决...]]></description><category></category></item><item><title><![CDATA[网页各种meta标签的使用方法及场景]]></title><link>https://blog.youkuaiyun.com/junkaicool/article/details/88817102</link><guid>https://blog.youkuaiyun.com/junkaicool/article/details/88817102</guid><author>junkaicool</author><pubDate>Tue, 26 Mar 2019 12:19:10 +0800</pubDate><description><![CDATA[优先使用 IE 最新版本和 Chrome
&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/&gt;

页面描述
&lt;meta name="description" content="不超过150个字符"/&gt;

页面关键词
&lt;meta name="keywords" content=""/&gt;

网...]]></description><category></category></item></channel></rss>