tby_pr的博客

原创 图片的运用

路径提示拓展Path Intellisense引入样式i { width: px; height: px; display: block; background: url("") no-repeat; background-size: contain;}写scss记得：一定要写& > div@占位符的代码提示Vue @占位符的代码提示_tby_pr的博客-CSDN博客_vue中的占位符...

原创 vue3发布2020.09.18

vue3插件(和2冲突)作者推荐webpack

原创 vue3和vue2的区别

首先 vue3 最大的变化 是 不在需要顶级元素包裹vue3写法拆分

原创 微信小程序 快速上手

微信小程序/支付宝小程序/百度小程序/字节小程序一、小程序介绍1.1、小程序是什么官方文档：微信开放文档微信小程序，简称小程序，英文名MiniProgram，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，对于用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用。 --- 轻应用1.2、小程序与普通网.

原创 Webpack4

一、webpack官网：webpack1.1、webpack是什么webpack是一种前端资源构建工具，一个静态模块打包器.在webpack看来，前端的所有资源文件(js/json/css/image/less/sass...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。webpack可以解决当前web开发中所面临的困境，webpack提供了：友好的模块化支持 代码压缩混淆 处理js/css兼容问题 性能优化（模块删减）注：webpack默认.

原创 TypeScript基础整理

类型声明类型声明是TS非常重要的一个特点，通过类型声明可以指定TS中变量（参数、形参）的类型，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错，类型声明给变量设置了类型，使得变量只能存储某种类型的值。ts中的类型名称一定小写自动类型(类型推论)耗性能当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型，工作中建议还是手动指明变量类型，尽量少的去让TS自动判断类型。3.1、布尔值let isDone: boolean = false;...

原创 UmiJS 3-阿里-react二次封装

约定式路由，自带组件库照着快速上手配置这时，pages下的所有tsx的都会自动约定拥有路由

原创 React 后台管理系统

后台管理系统2.1、技术栈测试接口环境：nodejs前端:react.jsredux react-redux redux-thunkreact-router-dom@5styled-components/sass(node-sass)ui组件库 ant-design Ant Design - 一套企业级 UI 设计语言和 React 组件库axios/fetchsessionStorage/localStorage/cookiewebpack配置(装饰器配置和代理

原创 react 路由 懒加载 和 拆分

原创 react的函数组件的扩展Hooks(v16.8)

增强功能函数,可以将功能代码聚合,组件层级变浅,代码量少.1.1、简介在React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。React在v16.8的版本中推出了 React Hooks 新特性，Hook是一套工具函数的集合,它增强了函数组件的功能，hook不等于函数组件，所有的...

原创 get请求中文乱码解决方案//encodeURIComponent

自己解码

原创 mock数据

可以模拟get/post/put/delmock数据（faker数据），即使用假数据来模拟后台的数据。为什么要做假数据？因为后端开发接口并产出接口文档没有哪么快，此时就需要我们自己来模拟请求数据。模拟的数据字段、格式等，需要和后端工程师沟通。这样，我们可以先通过模拟的数据继续完成前端的工作任务，待后端工程师写好数据接口并提供了接口信息后，我们只需要修改请求地址，前后端就实现了无缝衔接。安装json-server帮助我们快速启动一个web服务npm i-gjson-server...

原创 react类组件移动端项目

npm i -D customize-cra react-app-rewired http-proxy-middlewarenpm i -S redux react-redux redux-thunk styled-componentsimmutableredux-immutablereact-router-dom@5react-transition-group axios清理创建好的项目中不需要的文件及文件夹删除public目录下的部份内容 删除src目录下...

原创 React的immutable(工作很少用)

二、immutable.js也是个框架,结构化数据共享2.1、概述官网：Immutable.jsList (List) - Immutable 3.8.1 中文开发手册 - 开发者手册 - 云+社区 - 腾讯云Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。所有的更新操作都会返回新的值，但是在内部结构是共享的，来减少内存占用(和垃圾回收的失效)。持久化数据结构：这里说的持久化是用来描述一种数据结构

原创 redux网络请求渲染数据流程

redux好了cvshop的redux好了

原创 react自定义导航组件(封装组件)

原创 react的redux状态管理

状态管理(redux)3.1、简介Redux中文文档2013年 Facebook 提出了 Flux 架构的思想，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。如果你的项目组件的数量和层级也变得越来越多，越来越深，此时组件间的数据通信就变得异常的复杂和低效，为了解决这个问题，引入了状态管理(redux)从而很好的解决多组件之间的通

转载 ESLint-[转自 花裤衩 的掘金]

不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，个人推荐 eslint+vscode 来写 vue，绝对有种飞一般的感觉。效果如图：每次保存，vscode就能标红不符合eslint规则的地方，同时还会做一些简单的自我修正。安装步骤如下：首先安装eslint插件安装并配置完成 ESLint 后，我们继续回到 VSCode 进行扩展设置，依次点击 文件 > 首选项 > 设..

原创 案例--react电影小项目

技术栈使用react框架来完成本次项目的实现，使用技术有如下一些：nodejs 进行模拟接口数据(代理)react react-domreact-router-domredux react-redux redux-thunk immutable redux-immutablestyled-components(css作用域)/sass/less/stylusantd-mobile ui组件库(移动端)react-transition-groupaxios...

原创 react配置 反向代理

跨域解决方案jsonp(模拟get)/CORS(跨域资源共享)靠死/代理/iframe/postMessage/window.name/WebSocketreact的代理实现跨域在配置在src/setupProxy.js文件，并通过npm安装http-proxy-middleware,代理中间件模块创建 src/setupProxy.js安装模块npm i -S http-proxy-middlewareconst {createProxyMiddlewar...

原创 react配置 装饰器@

装饰器@ es8的预案，现在还没通过。 【类】组件的。装饰器是一种函数，写成 @函数名。它可以放在类和类方法的定义前面。react脚手架创建的项目【默认是不支持装饰器】，需要手动安装相关模块和添加配置文件。安装npm i -D customize-cra react-app-rewired修改package.json文件中scripts命令"scripts": { "start": "react-app-rewired start", "build": "...

原创 案例--react用户管理小练习

状态提升,全在父操作,子只做渲染删除

原创 React复习

网址：https://zh-hans.reactjs.org/1.1、概述React 起源于 Facebook(脸书)的内部项目，它是一个用于构建用户界面的javascript库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。1.2、特点声明式你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI，数据的声明基于组件组件时React最重要的内容，组件表示页面中的部分内容-- react元素 -- 虚拟dom学习一次...

原创 vue后台项目

https://element.eleme.cn/#/zh-CN/component/installationnpm 安装推荐使用 npm 的方式安装，它能更好地和webpack打包工具配合使用。npm i element-ui -S完整引入在 main.js 中写入以下内容：import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/inde...

原创 VueX复习

Vuex 是什么？ | Vuexstate存放状态(数据) 必须的 mutations state成员操作-- 修改state中的数据 同步操作 getters er加工state成员给外界-- 获取state中的数据，类似于组件中的计算属性 actions 异步操作异步操作 在vuex中可以进行异步操作（ajax），异步操作不能修改state modules 模块化状态管理多状态文件管理时使用首先，Vue组件如果调用某个VueX的方法过程中需要向后端请求时...

原创 Vue中错误处理 =＞ 日志

全局错误统一处理（一般可以在此记录，项目中的问题，然后不着急的时候来处理）组件一定要起 唯一的名字！！！API — Vue.js在 main.js中 通过设置全局的统一的错误处理，来完成错误的收集，从而方便我们日后BUG的修复Vue.config.errorHandler = function (err, vm, info) { console.log(err, vm, info)}...

原创 自动化导入调用import模块

举例：在 route下的 index.js 里写 【自动化导入路由】webpack提供一个api方法，完成对于模块的自动加载通过执行require.context函数,主要用来实现自动化导入模块,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块参数1：要去检索的目录参数2：是否递归检索，true是，false否参数3：指定要检索的文件类型 用正则来完成返回值：是一个函数，且此函数有一个方法为keys返回一个检索到的文件列表(数组)正则的 i..

原创 ui库样式穿透::v-deep

ui库改样式要用【样式穿透】！！！::v-deep 样式名{}scoped是样式作用域，不推荐去掉

原创 lodash节流

滚动条事件优化 可以用 lodash节流npm i -S lodashLodash 简介 | Lodash 中文文档 | Lodash 中文网

原创 Vue代码 异步懒加载 和 拆分

vue懒加载异步懒加载 和 拆分 （es6模块化中 import 当做函数时，它就会拆分模块）想要 懒加载 要 回调 并 返回promise魔法注释 /*webpackChunkName:'文件名'*/

原创 Vue @占位符的代码提示

在vue中提供了一个占位符，@表示src在根目录 创建一个 【jsconfig.json】文件

原创 Vue组件

将一个具备完整功能的项目的一部分分割多处使用 加快项目的进度 可以进行项目的复用 // 就是活字印刷组件注册分为：全局注册 和局部注册全局注册Vue.component('组件名称', { })第1个参数是标签名称，第2个参数是一个选项对象。全局组件注册后，任何vue实例都可以用。！注意：data必须是函数，同时这个函数要求 返回一个对象 => 会被调用多次，对象是引用类型，会影响到别人，但是通过函数返回的话每次都是一个新的，互相之间...

原创 案例 -- web移动端项目（vue）

开发流程选择手动模式安装vue扩展一路回车就行路由模式每个配置都用单文件设置vant组件库网址：Vant - Mobile UI Components built on Vue安装vant库npm i vant -S自动按需引入组件(推荐)npm i babel-plugin-import -D在项目根目录下面有一个babel.config.js文件，在此文件中进行如下操作修改babel.config.js文件后，一定要重...

原创 封装 -- fetch网络请求

export default ({ url, method = 'GET', data = null,}) => { // 请求配置 let options = { method } // data不为空时，它就是post请求 if (data) { options = { ...options, body: JSON.stringify(data), headers: { 'content-t...

原创 网络请求（vue）

网络请求方案1. XMLHttpRequest // 没有promise时的产物当时的万物皆回调，太麻烦2. Fetch // html5提供的对象，基于promise因为promise的存在，为了简化网络请求。使用 Fetch - Web API 接口参考 | MDNFetch是新的ajax解决方案 Fetch会返回Promise对象。fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。参数：1、第一个参数是URL:...

原创 Vue生命周期

在 模板编译 和 数据劫持 的 过程 暴露了一些 钩子！ beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了执行1次 created 在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来执行1次 用this对象 ...

原创 封装 -- 对象合并

let o1 = { id: 1, fn() { console.log('o1') } }let o2 = { name: '张三', age: 20, fn() { console.log('o2') } }// o1 = { ...o2, ...o1 }o1 = merge(o1, o2)o1.fn()console.log(o1.name)function merge(o1, o2) { let obj = { ...o1 } for (let key in o2) {...

原创 案例 -- vue自定义指令 实现 按钮权限

<div id="app"> <button v-auth>查看员工薪资</button></div><script> // 这在项目中是通过登录得到的 // sessionStorage.setItem('username', 'lisi') Vue.directive('auth', { inserted(el) { // console.log(new URLSearchParams(lo...

原创 封装 -- vue自定义修饰符

export default { phone(el, binds) { if (!/^1[3-9]\d{9}$/.test(el.value)) { el.style.color = '#f00' } else { el.style.color = '#000' } }, min(el, binds) { if (binds.value.min) { if (el.value.length <= binds.val...

原创 封装--vue自定义组件表单项验证

// 默认导出，一个文件只能默认导出一次export default { len(el, binds) { el.style.color = el.value.trim().length > 3 ? 'red' : '#000' if (el.value.trim().length > 3) { if (el.parentNode.lastChild.nodeName != 'SPAN') { let span = document.cre...