<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[小周sri的码农]]></title><description><![CDATA[面对过去，不要迷离；面对未来，不必彷徨；活在今天，你只要把自己完全“展示”给别人看]]></description><link>https://blog.csdn.net/Govern66</link><language>zh-cn</language><generator>https://blog.csdn.net/</generator><copyright><![CDATA[Copyright &copy; Govern66]]></copyright><item><title><![CDATA[使用VUE3.0版本搭建H5模板]]></title><link>https://blog.csdn.net/Govern66/article/details/127931390</link><guid>https://blog.csdn.net/Govern66/article/details/127931390</guid><author>Govern66</author><pubDate>Sat, 19 Nov 2022 08:00:00 +0800</pubDate><description><![CDATA[使用VUE3.0版本搭建H5模板，开箱即用]]></description><category></category></item><item><title><![CDATA[Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架]]></title><link>https://blog.csdn.net/Govern66/article/details/127931287</link><guid>https://blog.csdn.net/Govern66/article/details/127931287</guid><author>Govern66</author><pubDate>Fri, 18 Nov 2022 23:14:08 +0800</pubDate><description><![CDATA[Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架]]></description><category></category></item><item><title><![CDATA[使用WordPress搭建一个专属自己的博客]]></title><link>https://blog.csdn.net/Govern66/article/details/125972694</link><guid>https://blog.csdn.net/Govern66/article/details/125972694</guid><author>Govern66</author><pubDate>Mon, 25 Jul 2022 12:47:56 +0800</pubDate><description><![CDATA[使用WordPress搭建一个专属自己的博客]]></description><category></category></item><item><title><![CDATA[vue3.0结合element-plus实现后台管理系统]]></title><link>https://blog.csdn.net/Govern66/article/details/124443118</link><guid>https://blog.csdn.net/Govern66/article/details/124443118</guid><author>Govern66</author><pubDate>Wed, 27 Apr 2022 09:54:45 +0800</pubDate><description><![CDATA[vue3.0实现一个开箱即用的后台管理系统]]></description><category></category></item><item><title><![CDATA[vue3.2结合element-plus实现一个全局分页组件]]></title><link>https://blog.csdn.net/Govern66/article/details/123403679</link><guid>https://blog.csdn.net/Govern66/article/details/123403679</guid><author>Govern66</author><pubDate>Thu, 10 Mar 2022 15:58:11 +0800</pubDate><description><![CDATA[vue3.2结合element-plus实现一个全局分页组件]]></description><category></category></item><item><title><![CDATA[使用redux-persist解决redux数据刷新丢失问题]]></title><link>https://blog.csdn.net/Govern66/article/details/118465494</link><guid>https://blog.csdn.net/Govern66/article/details/118465494</guid><author>Govern66</author><pubDate>Sun, 04 Jul 2021 18:54:10 +0800</pubDate><description><![CDATA[在React项目实际开发中，我们常常会对一些数据进行存储缓存中,防止用户刷新浏览器，数据丢失问题，比如token，用户信息之类的。之前都是手写一遍localStorage和sessionStorage储存，接来下，我们通过一个插件redux-persist配置项，来存储数据。

存储数据配置

首先安装 redux-persist插件

cnpm install redux-persist


store文件配置
本地存储 import storage from 'redux-persist/lib/st.]]></description><category></category></item><item><title><![CDATA[React中使用react-i18next切换中英文]]></title><link>https://blog.csdn.net/Govern66/article/details/118441445</link><guid>https://blog.csdn.net/Govern66/article/details/118441445</guid><author>Govern66</author><pubDate>Sat, 03 Jul 2021 16:28:50 +0800</pubDate><description><![CDATA[在React中，使用react-i18next和i18next切换中英文
Store文件数据初始化

首先安装redux依赖包
通过redux对数据状态管理,通过派发changeLanguageActionCreator来切换中英文状态

export const CHANGE_LANGUAGE = "change_language";

export const changeLanguageActionCreator = (languageCode) =&gt; {
    return {
      ]]></description><category></category></item><item><title><![CDATA[React配置路径别名]]></title><link>https://blog.csdn.net/Govern66/article/details/118190425</link><guid>https://blog.csdn.net/Govern66/article/details/118190425</guid><author>Govern66</author><pubDate>Thu, 24 Jun 2021 16:07:32 +0800</pubDate><description><![CDATA[在react中，都是组件化开发，大部分都会import 组件名 from './../../组件路径，这样写太臃肿和不美观，可以通过配置来改变这个写法
通过安装customize-cra插件来实现

在根目录新建config-overrides.js

const {
  override,
  addWebpackAlias
} = require('customize-cra')
const path = require('path')

module.exports = override(
  // ]]></description><category></category></item><item><title><![CDATA[React组件实现权限按钮显示和隐藏]]></title><link>https://blog.csdn.net/Govern66/article/details/117574454</link><guid>https://blog.csdn.net/Govern66/article/details/117574454</guid><author>Govern66</author><pubDate>Fri, 04 Jun 2021 22:40:09 +0800</pubDate><description><![CDATA[在一些管理后台中，经常会编写权限这一块功能模块，通过调用后端返回的接口，匹备权限码来控制显示和隐藏，
按钮权限控制显示和隐藏

需要和后端沟通好，通过给用户分配权限(权限码)，通过接口的形式，后端返回权限码存储到redux中。

编辑高级组件

role_button:存储到redux的权限码
button 按钮级别传的权限码

import React, { Component,Fragment } from 'react'
import PropTypes from 'prop-types';
impo]]></description><category></category></item><item><title><![CDATA[Redux DevTools浏览器插件调试redux两种方法]]></title><link>https://blog.csdn.net/Govern66/article/details/117306601</link><guid>https://blog.csdn.net/Govern66/article/details/117306601</guid><author>Govern66</author><pubDate>Wed, 26 May 2021 22:06:27 +0800</pubDate><description><![CDATA[通过科学上网的方式，在谷歌商店安装Redux DevTools
方法一

安装插件完之后，在你的redux文件，添加如下代码，reducer忽略即可

const store = createStore(
   reducer, 
window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__()
 );


如果你安装了redux-thunk了使用applyMiddleware，修改如下
首先需要在red]]></description><category></category></item><item><title><![CDATA[react结合antd动态生成左侧菜单栏]]></title><link>https://blog.csdn.net/Govern66/article/details/115682072</link><guid>https://blog.csdn.net/Govern66/article/details/115682072</guid><author>Govern66</author><pubDate>Wed, 14 Apr 2021 19:43:42 +0800</pubDate><description><![CDATA[antd专门为react定制的中后台组件库，提供了大量的组件供开发者使用，

官网地址 点击跳转
在中后台中，菜单项是必不可少的，今天就使用react结合antd配置一个菜单栏目

先定义好路由结构
const Router = [{
        title: '控制台',
        icon: 'laptop',
        key: '/index',
        role: ["user", "information", "product"]
    },
    {
       ]]></description><category></category></item><item><title><![CDATA[react实现文字展开和收起功能]]></title><link>https://blog.csdn.net/Govern66/article/details/115386320</link><guid>https://blog.csdn.net/Govern66/article/details/115386320</guid><author>Govern66</author><pubDate>Thu, 01 Apr 2021 22:35:52 +0800</pubDate><description><![CDATA[无论是在PC端页面还是WAP端页面，很常见的页面效果，超长文字，隐藏，然后点击展开和收齐功能。

通过React Hook提供的useState定义好状态，来点击切换展开和收起
id,name,image,info,price从父组件传递的数据
info.substring(0,200)先对文本内容截取
通过对按钮绑定点击事件，去触发useState里面的setReadMore去改变readMore的状态，即可实现这个功能
通过三目运算符 readMore ? info : `${info.substri.]]></description><category></category></item><item><title><![CDATA[小程序实现搜索历史记录，去重搜索字段以及限制展示字段数量]]></title><link>https://blog.csdn.net/Govern66/article/details/115133975</link><guid>https://blog.csdn.net/Govern66/article/details/115133975</guid><author>Govern66</author><pubDate>Tue, 23 Mar 2021 18:02:16 +0800</pubDate><description><![CDATA[使用微信小程序实现搜索历史记录，去重搜索字段，限制字段数量以及点击重新搜索功能。



对应界面

  &lt;view class="search-left"&gt;
      &lt;view class="search-icon"&gt;&lt;/view&gt;
      &lt;input 
          class="search-input" 
          bindinput="bindKeyInput" 
          bindconfirm="OnSearch" .]]></description><category></category></item><item><title><![CDATA[微信小程序修改radio样式]]></title><link>https://blog.csdn.net/Govern66/article/details/113028957</link><guid>https://blog.csdn.net/Govern66/article/details/113028957</guid><author>Govern66</author><pubDate>Sat, 23 Jan 2021 09:38:05 +0800</pubDate><description><![CDATA[在开发小程序的时候，使用一些小程序自己提供的组件，感觉有和ul设计的不一样，这样让我们修改很通过，尤其是radio组件，checkbox组件。我们怎么去修改这样的样式。
小城默认样式


使用小程序的radio组件

&lt;radio-group name="sex"   class="form-radio_wrap"&gt;
					&lt;label&gt;
						&lt;radio  value="男" checked="{{sex == '男'}}" /&gt;男&lt;/label&gt]]></description><category></category></item><item><title><![CDATA[基于vue3.0全家桶H5模板]]></title><link>https://blog.csdn.net/Govern66/article/details/110178890</link><guid>https://blog.csdn.net/Govern66/article/details/110178890</guid><author>Govern66</author><pubDate>Thu, 26 Nov 2020 11:14:45 +0800</pubDate><description><![CDATA[基于vue3.0全家桶 + vant3.0 +scss + rem适配方案 + axios封装，构建H5模板脚手架

版本要求

vue cli版本需要node 8.9 或者更高的版本。或者你可以使用nvm来切换node版本
本案例中，node版本的是12.15.0

启动项目
 git clone https://github.com/MrZHLF/vue3.0-vant-h5.git

 cd vue3.0-vant-h5

 npm install 或者使用 cnpm 切换到淘宝镜像

 cnpm .]]></description><category></category></item><item><title><![CDATA[使用Vue-Cli4.x配置文件路径别名]]></title><link>https://blog.csdn.net/Govern66/article/details/110072676</link><guid>https://blog.csdn.net/Govern66/article/details/110072676</guid><author>Govern66</author><pubDate>Tue, 24 Nov 2020 14:21:34 +0800</pubDate><description><![CDATA[vue脚手架版本升级到4.x以后，目录发生了很大的变化，有些配置需要我们自己去配置
自己项目中的目录结构


在根目录创建一个 vue.config.js文件

配置一下引入文件路径的别名

const path = require('path')
const resolve = dir =&gt; path.join(__dirname, dir)
module.exports = {
  chainWebpack:(config)=&gt;{
    config.resolve.alias
    .]]></description><category></category></item><item><title><![CDATA[vue项目中使用echarts实现雷达分析图]]></title><link>https://blog.csdn.net/Govern66/article/details/109242449</link><guid>https://blog.csdn.net/Govern66/article/details/109242449</guid><author>Govern66</author><pubDate>Sat, 24 Oct 2020 22:31:29 +0800</pubDate><description><![CDATA[在工作中常常会开发大数据可视化展示效果，今天就使用vue结合echarts实现一个雷达分析图，记录一下，便于以后工作中查询


在vue安装echarts
npm install echarts

使用

在methods定义一个方法drawRight1接受后端返回的数据

drawRight1 (indicatorData, seriesData) {
      let chart = this.$echarts.init(document.getElementById('chart_1'));
  .]]></description><category></category></item><item><title><![CDATA[node+express实现微信公众号授权]]></title><link>https://blog.csdn.net/Govern66/article/details/108195503</link><guid>https://blog.csdn.net/Govern66/article/details/108195503</guid><author>Govern66</author><pubDate>Mon, 24 Aug 2020 11:32:06 +0800</pubDate><description><![CDATA[微信的网页授权是指在微信公众号获取用户个人信息等一些权限.这次我们将使用node+express实现一个微信授权功能。
准备工作

如果没有域名的话，现在我是通本地host文件配置一个域名，只适合局域网测试专用。C:\Windows\System32\drivers\etc

我们使用vue快速搭建一个H5页面,vue.config.js一些简单的配置,前端做跨域处理

module.exports = {
  lintOnSave: false,
  devServer: {
    host: "m.i]]></description><category></category></item><item><title><![CDATA[使用css动画实现网易云音乐播放界面波浪动画效果]]></title><link>https://blog.csdn.net/Govern66/article/details/107794030</link><guid>https://blog.csdn.net/Govern66/article/details/107794030</guid><author>Govern66</author><pubDate>Tue, 04 Aug 2020 18:20:16 +0800</pubDate><description><![CDATA[通过实现CSS实现仿网易云音乐播放界面动画效果，最终的效果如下

界面布局

图片也是实现滚动效果的，使用四个div，来标识每一帧波动的效果。

&lt;div class="container-wrap"&gt;
			&lt;div class="container"&gt;
				&lt;div class="more"&gt;&lt;/div&gt;
				&lt;div class="more"&gt;&lt;/div&gt;
				&lt;div class="more"&gt;&lt;/]]></description><category></category></item><item><title><![CDATA[Nativefier一行代码快速将网站打包成桌面程序]]></title><link>https://blog.csdn.net/Govern66/article/details/107517967</link><guid>https://blog.csdn.net/Govern66/article/details/107517967</guid><author>Govern66</author><pubDate>Wed, 22 Jul 2020 17:10:58 +0800</pubDate><description><![CDATA[Nativefier简介
Nativefier是一个命令行工具，仅仅通过一行代码就可以轻松地为任何的网站创建桌面应用程序，应用程序通过Electron打包成系统可执行文件。
作者github： https://github.com/jiahaog/nativefier

安装

建议使用cnpm全局安装

cnpm install nativefier -g

使用

创建一个桌面应用程序,只需要运行下面命令就行，随便找一个网址，就行

nativefier "https://www.baidu.com/"]]></description><category></category></item></channel></rss>