做你的猫miao-CSDN博客

原创 git clone --depth 1 解决git clone（early EOF index-pack failed）

git clone --depth 1 解决git clone（early EOF index-pack failed）

2022-06-22 11:10:33 818

原创表单验证系列（五）：表单校验react-final-form-hooks之子模块（卡片4 （table表单验证 TableComponent ColumnsFormHooks））

表单验证系列（五）：表单校验react-final-form-hooks之子模块（卡片4 （table表单验证 TableComponent ColumnsFormHooks））

2022-06-21 17:56:12 208

原创表单验证系列（四）：表单校验react-final-form-hooks之子模块（卡片4 （table表单验证 TableComponent ColumnsFormHooks））

Table均为输入框，输入内容时同步校验

2022-06-21 17:55:46 317

原创表单验证系列（三）：react-final-form-hooks之子模块（卡片2 （表单验证 ReactFinalFormHooksCopy））

import React, { useImperativeHandle, forwardRef, useState } from 'react';import { Form, Input, notification, Select,} from 'tea-component';import { rules, Esc_Char, Cn_En_Num_Pun_100, Cn_En_Num_Pun_1000,} from '@/utils/checkRoules';i..

2022-06-21 17:51:16 338

原创表单验证系列（二）：react-final-form-hooks-父级结构

一、页面主体样式二、页面代码import React, { useRef, useState } from 'react';import { useHistory } from 'react-router-dom';import { Layout, Card, Button,} from 'tea-component';import ReactFinalFormHooks from '../components/ReactFinalFormHooks';import ReactF

2022-06-21 17:46:19 302

原创表单验证系列（一）：Table主页

技术栈：umi、React、ts、tea-component搭建基础父级页面import React, { useRef, useState, Fragment } from 'react';import { useHistory } from 'react-router-dom';import { Layout, Card, Button, SearchBox, Table, Justify,} from 'tea-component';const { Conte

2022-06-21 17:45:35 171

原创 umi首屏加载速度优化

以上内容来源于转载作者：pro-xiaoy链接：https://juejin.cn/post/6964352706832302117来源：稀土掘金umi应用首屏加载速度提高3倍+（通用的首屏优化方法）根据以往的博客,目前我就司的公司前端框架umi, ali出品以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展的前端应用框架。问题所在一直以来我们网站的首页加载速度很慢,虽然使用了umi但是我们没有使用ssr依旧使用的是spa.首屏加载速度在6s左右, 当我们

2022-06-21 17:15:19 2803

原创 Hook and Mobx demo

一、import React, {useState, useEffect, useCallback} from 'react'// import { CloseOutlined } from '@ant-design/icons';export default function HookFour() { const [list, setlist] = useState(['a', 'ab', 'abc', 'b', 'cn']) const [oldlist] = useState(['a', '

2020-08-06 14:17:04 259

原创 React模拟后台项目（八）添加用户页面

一、添加用户页面 src/pages/user/usersCreate/index.js// 导入库import React, {Component} from 'react'import { connect } from 'react-redux'import { withRouter } from 'react-router-dom'// 导入组件import { postUsersData } from '../store/actionCreators'// 导入样式import {

2020-08-02 21:41:32 325 2

原创 React模拟后台项目（八）附加 user仓库文件配置

一、用户页面仓库 src/pages/user/store/index.jsimport reducer from './reducer';import * as actionCreators from './actionCreators';import * as constants from './actionTypes'; export {reducer, actionCreators, constants} 二、用户页面仓库 src/pages/user/store/actionT

2020-08-02 21:37:54 168

原创 React模拟后台项目（八）user页面文件配置

一、用户页面 src/pages/user/index.js// 导入库import React, {Component} from 'react';import {connect} from 'react-redux';import { getUsersData, deleteUsersData, putUsersData,} from './store/actionCreators'import { withRouter } from 'react-router-dom'/

2020-08-02 21:34:08 308

原创 React模拟后台项目（七）Login页面文件配置

一、登录 src/page/login/index.js// 导入库// 导入Reactimport React, { Component } from 'react'import {connect} from 'react-redux'import {Redirect} from 'react-router-dom'import { loginAction} from './store/actionCreators'// 导入样式// 导入styled import {

2020-08-02 21:29:36 1109

原创 React模拟后台项目（六）components文件配置

一、错误处理 components/err/404.jsimport React, { Component } from 'react' class Err404 extends Component { render() { return ( <div> this is Err404 index </div> ) }}export default

2020-08-02 21:24:00 259

原创 React模拟后台项目（五）接口文件配置（ajax）

一、请求封装 src/api/request.jsimport axios from 'axios'// 判断当前的运行环境// isDev 为真开发环境 --- npm run serve// isDev 为假非开发环境（测试环境，生产环境）- npm run buildconst isDev = process.env.NODE_ENV === 'development'const request = axios.create({// 根据环境设置不同的baseURL// ba

2020-08-02 21:17:05 618

原创 React模拟后台项目（四）路由文件配置

一、路由封装 src/router/privateRoute.js// 导入react全家桶import React from 'react'import { Route, Redirect } from 'react-router-dom'// 手册：https://reacttraining.com/react-router/web/example/auth-workflow // 自定义私有路由高阶组件const PrivateRoute = ({component: Compone

2020-08-02 21:07:30 520

原创 React模拟后台项目（三）修改全局样式文件配置

一、统一全局样式文件 src/static/reset.jsimport {createGlobalStyle} from 'styled-components';export const GlobalStyle = createGlobalStyle` html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, b

2020-08-02 21:00:19 857

原创 React模拟后台项目（二）公共Store文件配置

一、导出公共仓库 src/store/index.js// 导入模块import thunk from 'redux-thunk'import { createStore, applyMiddleware } from 'redux'import { composeWithDevTools } from 'redux-devtools-extension'// 导入reducerimport reducers from './reducers'// 创建仓库const store = c

2020-08-02 20:55:33 407

原创 React模拟后台项目（一）入口文件配置

一、入口index文件 src/index.js// 导入库import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';import {Provider} from 'react-redux';import { ConfigProvider } f

2020-08-02 20:50:56 1452

转载 vue+elementUI为table表格中每一个按钮单独设置loading，按钮loading互不影响（半转载，半本人测试补充）

一、解决思路data中设置一个btnLoading: false缺点：点击一个按钮，列表里的按钮都会进入loading状态（不采用）data中设置一个对象，里面放很多个btnloading{ btnLoading1: false, btnLoading2: false,… }缺点：不知道会列表里会有多少条数据（不采用，太傻了）直接设置 v-loading=“scope.row.MarkUpPirceLoading”可行，行动二、行动第一次尝试(直接贴代码) <el-table-col

2020-07-05 12:59:16 4871 16

原创 VUE main.js、App.vue和assets/css/reset.scss配置

一、目录main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'// import store from './store'// 配置ElementUIimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);// 配置全局默认样式imp

2020-06-16 20:52:06 1283

原创 VUE 路由编写

一、目录router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'// 登录部分import Login from '../views/user/Login'// 后台导航首页import First from '../views/index/First' // 后台内容首页import FirstIndex from '../views/index/FirstIndex'// 后台引导模块import D

2020-06-16 20:44:32 237

原创前端路由封装 router

一、目录privateRoute.js// 导入react全家桶import React from 'react'import { Route, Redirect } from 'react-router-dom'// 手册：https://reacttraining.com/react-router/web/example/auth-workflow // 自定义私有路由高阶组件const PrivateRoute = ({component: Component, ...props})

2020-06-10 15:26:45 330

原创前端异步请求封装 api

一、目录request.jsimport axios from 'axios'// 判断当前的运行环境// isDev 为真开发环境 --- npm run serve// isDev 为假非开发环境（测试环境，生产环境）- npm run buildconst isDev = process.env.NODE_ENV === 'development'const request = axios.create({// 根据环境设置不同的baseURL// baseURL: 'htt

2020-06-10 15:22:52 385

原创微信小程序异步请求封装包含wx.showLoading懒加载和wx.showToast提示

一、目录结构utils/require.js二、内容// JSDoc手册： https://www.html.cn/doc/jsdoc/tags-author.html// 接口地址 const baseUrl = 'http://XXX.XXX.XXX'/** * 封装数据请求的方法 * @see {@link https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html} *

2020-05-14 22:09:03 1284

原创微信小程序登录封装 openID

一、目录结构utils/require.js二、内容function isLogin(){ // 获取微信存储数据 wx.setStorage({ // 获取openid key: 'openid', success: res=>{ console.log('已登录', res) }, fail: err=>{ login() } })}// 登录function login(){ //

2020-05-14 22:03:34 379

原创 react 使用screenfull插件实现全屏特效

一、安装yarn add screenfull二、导入import screenfull from 'screenfull'三、定义方法fullScreen = () => { screenfull.toggle()}四、调用<ButtononClick = {this.fullScreen}>全屏</Button>...

2020-04-30 08:35:21 2633 1

原创 React项目框架初始化操作（建框架，UI，样式，路由）及错误lessOptions?, prependData?, appendData?, sourceMap?解决

一、创建框架 CRA命令： npx create-react-app item注释： npx不可用的可使用cnpm创建二、安装基本插件yarn add react redux react-redux redux-devtools-extension immutable react-immutable react-router-dom三、选择UI框架（此处以Antd UI 为例）框架...

2020-04-30 08:31:23 776

原创 React和VUE项目推荐目录结构

一、React项目推荐目录结构src目录api 接口目录components 公共组件（或common）pages 组件目录 orders 订单目录 components（相关组件） store （仓库） index.js (默认组件) style.js （默认样式 import styled from 'styled-compon...

2020-04-30 08:16:14 664

原创 vs code 添加代码片段（vue 和 vuex）

Vue代码片段一一、进入vscode方法一：1、ctrl + shift + p2、 snip3、选择Preferences:Configure User Snippets（首选项：配置用户代码段）方法二：二、首次设置输入html回车三、代码片段{ "vue": { "prefix": "vue", "body": [ "<!DOCTYPE html&...

2020-04-01 21:45:10 705

原创 vue开发工具安装、测试及安装过程的问题（vue开发工具测试面板为空，"windows 找不到文件chrome）

一、下载vue开发工具下载地址：https://173app.com/chrome-ext二、跳转至扩展程序三、开启开发者模式四、将下载的vue开发工具拖拽至扩展程序中五、测试编写vue测试项目后 F12六、过程可能存在问题问题1：下载的vue插件拖入扩展程序后，F12测试面板为空解决方案：（1）更新高版本Chrome（2）找到C盘下的manifest.json...

2020-03-30 22:47:17 533

原创 Vue4安装过程

一、安装问题安装vue4版本出现问题如下：原因：安装4版本前未卸载之前版本解决方法：npm uninstall -g vue-cli（卸除3之前版本）之后重新安装二、安装1、命令：最新版本： npm i @vue/cli -g注意：管理员身份运行安装，安装目录无要求2、查看安装版本信息命令：vue -V3、选择目录生成vue项目文件目录命令：vue create 项目名...

2020-03-29 09:48:49 1799 2

原创全选单选反选

html`全选反选单选单选单选`

2020-02-27 21:31:31 129

原创 js函数中的 arguments、 return、 this

函数中有3个内容： arguments、 return、 this一、argument函数中有一个内置对象 arguments 它是一个类数组对象。它存储着本次函数执行的时候传递进来的所有实参。类数组对象：指的是具备数组的数字下标和length属性，但是没有数组的方法。二、returnreturn是函数中的关键字，只能存在于函数里面它有两个作用：1 向函数的调用处返回内容2 终止...

2020-01-04 19:37:43 182

weixin_46030044的博客