- 博客(55)
- 收藏
- 关注
RSS订阅原创 react+antd项目初始化
目录总结1 项目创建1.2 命令创建1.3 模块分类1.3.1 模块功能1.4 使用antd UI1.4.1 安装**antd**1.4.2 配置antd1.5 使用less1.5.1 安装less1.5.2 配置使用1.6 使用路由1.6.1 安装router1.6.2 使用路由1.7 使用redux1.7.1 安装redux1.7.2 使用redux1.8 使用请求1.8.1 安装redux-thunk1.8.2 配置使用2 项目开发2.1 登录页面2.2 首页开发2.3 模块开发1 数据接口2 首
2021-05-10 15:22:49
1007
3
原创 React开发总结篇---配置文件请求
问题：项目的请求地址，存于电脑（服务器）的系统环境变量中，项目启动的时候，使用电脑中的请求地址？答：修改项目的配置文件项目描述（1）项目已经开发完成，要求动态获取环境变量中的请求地址（2）使用git管理仓库（3）没有执行过命令eject（注意此操作不可逆）1 操作1.1 刷新代码$ git add .git commit -m "运行eject"2.1 执行eject操作yarn run eject将会多出两个文件夹（配置文件）1.3 删除node_modules.
2021-04-29 14:59:11
608
2
原创 超详细的typeScript笔记(二)类的基本使用
文章目录1 引入2 使用2.1 基本使用2.2 封装使用2.3 继承2.3.1 基本继承(只继承父类)2.3.2 继承并修改2.4 多态2.5 修饰符1 引入2 使用2.1 基本使用三种定义方式class Person{ // 成员变量 name:string age:number // 构造函数 constructor(name:string,age:number){ this.name=name this.age=a
2020-11-11 10:18:23
215
1
原创 超详细的typeScript笔记(一)安装配置
文章目录1 安装2 配置3 运行第一个文件1 安装cnpm i typescript -g查看版本tsc -v2 配置基于vscode使用1 创建.ts文件2 生成配置文件tsc --init ----- tsconfig.json3 自动编译配置1 修改配置文件2 运行指令终端-----运行生成文件3 运行第一个文件自动生成js文件浏览器不能编译ts文件 ts能使用ES6以上语法 编译时将ts转换成低级语法...
2020-11-10 21:28:20
265
1
原创 超级详细react笔记(十三)项目篇(待办事项)redux
文章目录1 下载依赖2 编写2.11 下载依赖cnpm i redux react-redux react-thunk -S2 编写1 创建store/index.js引入redux 引入监听 暴露函数2 reducer.js 默认参数 暴露函数3 将组件抽离要共享数据的组件 react-redux producer connect4 reducer.js 类型 进行业务操作2.1APP.jsimport React,{Component} from 'react'imp
2020-11-10 10:10:24
128
原创 超级详细react笔记(十二)redux篇
文章目录1 引入2 使用2.1 基本使用2.1.1 下载依赖2.1.2 使用2.1.3 暴露存储的数据2.1.4 使用存储数据2.2 常见使用(react-redux)2.2.1 引入2.2.2 创建项目2.2.3 开发1 引入ele2 页面结构3 文件2.3 组件化2.4 axios (react-thunk)2.4.1 下载依赖2.4.2 配置入口文件2.4.3 编写请求方法2.5 错误3 总结3.1 react-redux使用4 源码1 引入解决组件之间传值问题(类似于vue中的vuex)
2020-11-09 21:30:21
348
2
原创 超级详细react笔记(十三)项目篇(待办事项)
文章目录0 使用技术1 项目搭建1.1 创建项目1.2 搭建项目结构1.2.1 准备数据1.2.2 组件化开发1.2.3 引入element-ui2 开发模块2.1 Header模块2.2 Input模块2.3 List模块2.4 Item模块3 项目文件4 优化4.1 条件渲染4.1.1 旧版渲染4.1.2 新版渲染4.2 按需更新4.2.1 利用生命周期4.2.2 利用纯组件5 用户体验0 使用技术axios 请求数据json-server 模拟数据react 操作domelement-ui
2020-11-09 17:35:59
339
原创 超级详细react笔记(十)组件优化篇
1 优化1.1 按需更新1.1.1 利用生命周期1 普通写法import React from 'react'export default class Rodom extends React.Component{ constructor() { super(); this.state={ number:0 } } shouldComponentUpdate(nextProps, nextState,
2020-11-06 10:41:59
124
2
原创 超级详细react笔记(九)组件进阶篇
文章目录1 引入2 组件2.1 组件的props2.2 组件的children(推荐)2.2.1 使用2.2.2 校验2.3 高级组件基本封装2.4 高级组件组件化封装2.5 优化源码1 引入了解组件的基本使用和组件之间传值后,需要深度剖析组件使组件化更明显降低组件之间的耦合度增强组件的独立性2 组件基于鼠标移动讲解2.1 组件的propschildren.jsimport React,{Component} from 'react'export default class
2020-11-05 21:39:04
128
原创 超级详细react笔记(八)axios请求篇
文章目录1 引入2 请求2.1 项目结构2.1.1 文件如下2.2 浏览器的fetch请求2.3 axios请求2.3.1 基本请求2.3.2 基本封装请求两种1 基本式封装2 创建式封装2.3.3 基本封装的请求拦截1 基本式封装的请求拦截2 创建式封装的请求拦截2.3.4 post请求封装拦截QS0 项目结构1 编写测试接口2 编写请求API1 引入在学请求时需要先了解一下react的生命周期1 this.state={} 初始化数据state2 componentWillMount
2020-11-05 20:24:19
369
原创 超级详细react笔记(七)组件传值篇
文章目录1 引入2 传值2.1 父传子2.1.1 文件convert/children.jscomponent/index.jsAPP.js2.1.2 总结2.1.3 children属性2.2 子传父2.2.1 基础写法2.2.2 优雅式写法2.3 兄弟之间传值(上两者结合)2.3.1 子组件1得到父组件的值2.3.2 子组件2得到父组件的值和方法2.3.3 实现2.3.4 预览2.4 指定组件传值2.4.1 基本写法2.4.2 使用Context写法2.4.3 优化封装(组件化)target文件crea
2020-11-04 21:08:37
392
原创 从入门到上手项目react框架使用
文章目录学习链接学习链接React学习笔记(一)背景+概念超级详细的react学习笔记(二)基本使用超级详细的react笔记(三)jsx超级详细的react笔记(四)语法篇
2020-11-03 21:08:43
157
原创 超级详细的react笔记(五)入门总结篇
文章目录概述1 基本使用1.1 创建1.2 配置(可选)1.3 运行2 语法2.0 项目结构2.1 数据使用2.1.1 创建式2.1.2 嵌入式2.1.3 定义式2.2 属性绑定2.2.1 绑定属性2.3 渲染2.3.1 条件渲染2.3.2 数据渲染2.3.3 列表渲染2.4 样式绑定2.4.1 style2.4.2 className2.4.3 classnames依赖2.5 组件使用2.5.0 项目结构2.5.1 有状态组件2.5.2 无状态组件2.5.3 可控组件和不可控组件1 可控组件2 不可控组件
2020-11-03 21:07:04
400
原创 超级详细的react笔记(六)总结篇
文章目录1 引入2 总结2.1 项目创建2.1.1 预览2.1.2 创建2.1.3 预览2.1.4 文件结构2.2 项目开发使用2.2.1 项目结构2.2.2 组件的使用创建创建容器引用路由中页面2.2.3 路由的使用2.2.4 请求的使用2.2.5 react中的生命周期1 引入我们总结一下在开发中使用脚手架开发webpack也可以开发,但是由于每一个插件的版本问题,会出现很多坑2 总结2.1 项目创建build-react(推荐使用)可选择init 基本使用工具complete
2020-11-03 17:36:23
384
原创 微信小程序开发详细笔记
文章目录参考链接参考链接微信小程序入门开发超详细笔记(一)微信小程序入门开发超详细笔记(二) 引入UI篇微信小程序入门开发超详细笔记(三) 项目篇微信小程序开发遇到的坑(一)
2020-11-03 08:57:54
276
1
原创 超级详细的react笔记(四)语法篇
文章目录1 引入2 语法2.1 挂载页面vue中react中2.2 创建元素2.3 渲染数据2.3.1 遍历数据2.3.2 className 和 style2.3 创建组件2.3.1 无状态组件2.3.2 有状态组件2.4 组件封装1 创建组件2 使用组件2.5 事件绑定2.5.1 基本使用2.5.2 组件使用1 引入react中的行为结构样式都是用js来实现的都可以在js中编写行为:所需执行的函数,方法结构:页面搭建的结构(可以使用babel转换成react.createElement)
2020-11-02 19:24:50
1641
原创 超级详细的react笔记(三)jsx
文章目录1 引入2 babel下载与配置配置文件1 引入jsx: javascript+xmlreact中样式结构行为都是用js编写的,由于在js中直接编写html代码会报错出现了jsx,需要用babel来转换babel会将js中的结构代码解析成html代码,然后渲染到页面说明:webpack引入依赖时,会因为版本问题出现很多的坑2 babel下载与配置基础下载cnpm i babel-core babel-loader babel-plugin-transform-runtime
2020-11-01 21:55:59
259
1
原创 超级详细的react学习笔记(二)基本使用
文章目录1 结构搭建2 基本开发2.1 安装依赖2.2 结构如下2.3 编写index.js2.4 编写index.html2.5 执行如下1 结构搭建参考链接2 基本开发2.1 安装依赖react : 构建实例 虚拟dom创建 生命周期react-dom : 解析dom元素 渲染到页面-S:是开发和生产模式都要使用的依赖-D:是开发模式使用的依赖cnpm i react react-dom -S2.2 结构如下2.3 编写index.js// 1 引入包import R
2020-10-31 21:44:12
226
原创 超级简单的webpack4.x的基本使用
文章目录环境创建项目1 配置2 配置package.json文件2 安装依赖3 创建文件4 配置webpack.config.js5启动项目环境npmnode 14+vs code编译器创建项目初始化文件夹npm init -y配置指定版本依赖安装依赖npm i配置启动命令"dev": "webpack-dev-server --open --port 5500 --hot --host 127.0.0.1"1 配置npm init -y2 配置package.json文件
2020-10-31 17:48:18
201
原创 webpack-4.x基本使用+版本配置+坑的解决
文章目录1 介绍1.1 版本4.x2 安装2.1 基本安装2.1.1 全局安装2.1.2 项目安装2.1.3 项目其他安装2.2 配合安装2.2.1 项目安装3 使用3.1 搭建项目结构3.1.1 创建项目文件夹3.1.2 初始化项目3.1.3 创建需要的文件夹3.1.4 创建所需的文件3.1.5 创建入口文件3.1.6 项目搭建完成3.2 打包3.2.1 工具3.2.2 警告配置1 配置2 使用3.3 实时编译3.3.1 工具 webpack-dev-serve3.3.2 工具安装1 执行命令2 配置
2020-10-31 17:13:37
543
原创 微信小程序开发遇到的坑(一)
1 路径问题1 图片路径问题问题描述: 图片存在,却报错找不到报错内容:[ app.json 文件内容错误] app.json: ["tabBar"]["list"][2]["selectedIconPath"]: "/tabs/profile-active.png" 未找到报错显示:解决办法:多建一层目录 或者 重新启动项目...
2020-10-31 16:00:11
275
原创 微信小程序入门开发超详细笔记(三) 项目篇
文章目录1 创建项目2 开发项目2.1 底部导航模块设计(原生)2.1.1 引入2.1.2 配置2.1.3 显示如下2.2 底部导航模块设计(自定义)2.2.1 引入2.2.2 文件如下`app.json`文件`custom-tab-bar` 文件夹下配置1 `custom-tab-bar/index.js` 文件2 `custom-tab-bar/index.wxml` 文件3 `custom-tab-bar/index.json` 文件4 `custom-tab-bar/index.json` 文件
2020-10-31 15:58:23
607
原创 微信小程序入门开发超详细笔记(二) 引入UI篇
基于(一)的项目完成UI组件的使用文章目录1 引入UI组件2 使用UI组件1 配置所使用的组件2 使用3 源码1 引入UI组件官网链接weappUI组件2 使用UI组件引入使用1 配置所使用的组件找到要使用组件的页面home/home.json{ "usingComponents": { "van-button": "/vant/button/index" }}home/home.wxml<view> <van-bu.
2020-10-31 11:55:38
339
原创 vue生命周期+微信小程序生命周期详解
文章目录1 vue生命周期1 明确2 小程序生命周期1 应用生命周期2 页面生命周期页面之间跳转3 组件生命周期4 应用生命周期影响页面生命周期5 总结参考链接1 vue生命周期1 明确最早操作数据是在created中路由传参时在该生命周期函数中可以取值页面在mounted中可以渲染到页面2 小程序生命周期应用生命周期页面生命周期组件生命周期应用生命周期影响页面生命周期1 应用生命周期系统资源过高时,在后台的小程序会自动销毁unLaunch只会在应用第一次打开.
2020-10-31 11:32:54
1400
原创 微信小程序入门开发超详细笔记(一)
文章目录1 引入1.1 小程序的应用1.2 小程序的介绍1.3 市场分类1 小程序2 webapp3 混合app4 原生app1 ios2 android3 react-native2 开发2.1 准备1 官网注册登录2 工具下载2.2 入门小程序1 创建2 创建成功3 开发项目结构与vue对比4 基本创建结构创建5 基本使用1 插值表达式2 属性绑定3 事件使用点击事件输入框事件4 流程语句5 显示和隐藏6 循环语句7 属性设置和获取8 tabbar使用9 路由的使用组件式路由1 可返回2 不能返回3 路
2020-10-29 21:41:51
3027
原创 路由守卫+请求拦截+响应拦截
文章目录1 介绍1 路由守卫2 请求拦截3 响应拦截2 配置1 路由守卫的配置2 请求拦截配置2.1 前端配置2.2 后端验证1 配置2 使用3 响应拦截配置1 介绍1 路由守卫没有登录的用户不能直接进入主页面(包括其他页面)可以重定向到登录页面判断依据为是否有token只针对前端对页面路由的跳转操作2 请求拦截3 响应拦截响应拦截一些状态码并返回响应的提示信息2 配置1 路由守卫的配置定义路由位置配置项目的根目录下存放路由的文件夹router/index.
2020-10-28 20:17:22
1390
原创 vue移动端开发(四)购物车模块实现
文章目录1 基础2 项目2.1 引入vuex2.1.1 安装下载2.1.2 配置1 创建资源2 配置资源2.1.3 使用3 讲解共享传递使用3 模块化4 打包1 执行命令5 优化1 项目添加 nprogress 进度条2 自动移除log1 执行命令2 配置3 使用3 CDN移除外部资源1 配置2 引入6 总结1 基础在此之前你需要先了解vuex在项目中的使用点击学习2 项目vue实现数据共享2.1 引入vuex安装下载配置使用2.1.1 安装下载cnpm i vuex -S2
2020-10-17 11:33:13
463
原创 Vuex基本使用 项目基本构建模块化
Vuex 状态管理模式1 概念1.1 官方Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能1.2 理解全局模式2 配置2.1 原生创建在vue项目创建的时候直接选上vuex项目会配置好并且可以直接使用比原来项目多了
2020-10-16 12:05:19
151
原创 vue移动端开发(三)
文章目录购物开发流程开发总结1 时间戳过滤器moment依赖安装配置使用2 加入购物车半场动画定义配置使用总结购物开发流程1 主页(路由跳转)2 配置路由3 创建路由跳转的组件4 编写接口 暴露接口5 调用接口请求数据6 渲染到页面开发总结1 时间戳过滤器moment依赖安装cnpm i moment -S配置src/filters/dataFmt/index.jsimport Vue from 'vue'import moment from 'moment'
2020-10-15 20:03:06
145
原创 React学习笔记(一)背景+概念
文章目录1 React背景1.1 前端的三大框架AngularReactVue1.2 比较ReactVue2 React 介绍2.1 概念2.1.1 虚拟DOMDOM树渲染高效更新 js对象 模拟嵌套关系2.1.2 diff算法tree diffcomponent diffelement diff1 React背景1.1 前端的三大框架Angular非开源出现比较早的前端框架近几年使用较少React开源facebook的前端公司开发当时开发一个图片交友网站时,市面上没有合适
2020-10-15 19:39:11
290
原创 ES5+ES6+ES7特性整理
文章目录ES6内容1 语法1.1 定义变量1.1.1 let 定义1.1.2 const 定义1.2 结构解析1.2.1 使用2 增强2.1 字符串增强2.1.1 trim()2.1.2 includes()2.1.3 startsWith() 和 endsWith()2.1.4 padEnd() 和 padStart()2.1.5 repeat()2.1.6 模板字符串*2.2 数组增强2.2.1 ES5的高阶函数somefiltereverymapforE
2020-10-14 21:30:11
604
2
原创 vue学习入门完整路线
文章目录入门学习问题一:想要将数据跟页面有联系怎么弄?指令学习生命周期动画入门学习数据怎么渲染到页面,怎么处理数据?---->指令学习获取页面元素拿不到,怎么处理?---->生命周期学习想要实现动画,入场,出场,半场动画?---->动画学习想要自定义过滤器,指令,组件?----> 自定义学习跟后端通过接口交互,怎么处理请求?----> 请求和路由学习项目模板怎么弄? ---->vue脚手架(vue-cli)学习vue脚手架篇(六)v
2020-10-14 21:28:22
1191
1
原创 vue开发(一)
文章目录vue开发组件化开发模块化开发vue 项目项目文件夹源码文件夹apiassetscomponentsmixinspluginsrouterviewsApp.vue文件main.js总结vue开发模块化开发组件化开发组件化开发概念vue的组件为component是针对前端的UI 分析的将相同的页面显示变成组件,按需引入模块化开发概念针对后端的代码分析的将具有相同业务逻辑或者代码提取出来modulemixin 混合在vue开发中,有相同的代码和逻辑,
2020-10-14 21:23:18
253
原创 项目托管git的使用
文章目录主分支提交第一步 : 初始化仓库 git init第二步: 添加到本地仓库第三步: 查看文件的状态第四步: 提交到本地仓库第五步:与远程仓库关联第六步:提交到远程仓库创建子分支并提交创建切换子分支添加到本地仓库提交到本地仓库提交到远程仓库主分支提交git init 初始化仓库git add . 添加到本地仓库git status 查看状态git commit -m “提示信息” 提交到本地仓库git remote add origin ssh地址 管理远程仓库git p.
2020-10-13 10:14:45
148
原创 vue学习路由篇（七）
文章目录安装标签引入npm安装下载使用使用router-view使用预览router-link使用预览嵌套路由(children)使用预览linkActiveClass 路由高亮显示自定义router-link-activelinkActiveClass自定义路由参数queryparams场景使用预览总结安装标签引入(在vue引入后,vue-router是基于vue的)npm安装(在项目中使用)标签引入下载vue-router.js文件引入<script src="lib/vu.
2020-10-11 21:15:59
166
1
原创 vue学习动画篇(三)
文章目录动画创建方式vue创建创建预览animate.css创建引入使用预览钩子函数创建半场动画(加入购物车)使用(入场动画)预览动画的分类transitionname 同一页面的多个动画transition-groupappeartag总结动画创建方式vue创建animate.css创建钩子函数创建第三个vue标签transition第四个vue标签transition-groupvue创建v-enterv-enter-activev-enter-tov-leavev-le.
2020-10-11 11:20:26
210
原创 总结vue实例中的函数和对象
文章目录元素类el 绑定的元素(view层)对象类data 存放数据(对象,元素,数组)methods 存放方法computed 计算watch 监听数据和路由route 存放路由compontes 存放组件directives 自定义指令filters 自定义过滤器生命周期类(函数)1 (创建中)第一个生命周期函数2 (创建中)第二个生命周期函数3 (创建中)第三个生命周期函数4 (创建中)第四个生命周期函数(实例完全创建好)5 (执行中)第五个生命周期函数6 (执行中)第六个生命周期函数7 (销毁中)
2020-10-10 21:22:30
931
原创 vue学习自定义组件篇(六)
文章目录自定义组件组件组件分类(1)全局组件组件创建的方式方式一 extend方式二 {}方式三(有提示) template(2)私有组件组件传值(1)父传子值定义父组件和子组件视图绑定父组件,子元素定义和子元素使用(2)父传子方法创建父组件和子组件视图绑定父组件,子组件定义,调用(3)子传父值在父传子方法上加上参数在子组件上定义数据传,在父组件上定义数据接收(4)兄弟传组件场景组件切换两个组件切换多个组件切换总结拓展自定义组件组件帮助我们实现组件化开发,方便使用组件化:针对前端,UI界面而言,
2020-10-10 20:15:06
234
原创 vue学习自定义指令篇(五)
自定义指令减少代码冗余,简单化开发(1)全局指令三步骤使用<div id="app"> <input type="text" value="hello world" v-color="'skyblue'" /></div><script> Vue.directive("color",{ bind(el,binding){ el.style.color=binding.value
2020-10-10 13:11:45
146
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人