- 博客(28)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 webpack4 plugin 的原理和实现部分plugin
webpack4 plugin 的原理和实现部分plugin1.Pluginplugin 本质上就是一个类,有一个 apply 方法,接受一个 complier 的对象, 我们会在 complier 对象上钩子挂载一些监听函数,当 complier 对象上这些钩子触发的时候,就会调用这些函数插件向第三方开发者提供了 webpack 引擎中完整的能力,使用阶段式的构建回调,开发者可以引入它们...
2020-03-05 19:19:27
1180
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 学习webpack4的总结笔记
webpack4webpack 核心概念Entry: 入口:Webpack 执行架构的第一步将从 Entry 开始,可以抽象成输入(入口)。Module: 模块:在 Webpack 里一切都是模块,一个模块对应着一个文件,Webpack 会从配置的 Entry 开始递归找出所有的依赖模块。Chunk: 代码块:一个 Chunk 由多个模块组合而成,用于代码合并与分割。Loader: 模...
2020-02-27 16:23:57
525
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 vscode前端工程师,使用插件(个人总结)
vscode前端工程师,使用插件1. vscode-iconsvscode文件/文件夹图标插件,设置好看的icon2. vscode wxmlvscode编辑微信小程序wxml文件的插件3. Visual Studio IntelliCodevscode代码只能提示,例如一些对象有什么属性会提示出来等的插件4. vetur这个就不用说了,vue.js框架专用插件5. vueHelperv...
2020-02-23 21:09:00
1058
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 nodejs企业级开发框架nest学习总结 - 7.NestJS入门swagger,快速搭建restfulApi文档
swaggerswagger:一个功能强大的高清格式来描述RESTful API。Nest提供了专用的模块来使用它1. 安装swaggeryarn add @nestjs/swagger swagger-ui-express --save如果使用fastify,则必须安装fastify-swagger而不是swagger-ui-express:yarn add @nestjs/swag...
2019-10-25 19:48:43
5408
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 nodejs企业级开发框架nest学习总结 - 6.NestJS入门一些快速创建controller、module和test三个文件的命令、使用websocket
1.初始化项目nest new webscoket-demo2.安装webscoket相关依赖yarn add @nestjs/websockets @nestjs/platform-socket.io @types/socket.io3.创建网关// events.gateway.tsimport { Client } from 'socket.io';import { Web...
2019-10-23 16:50:25
2071
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 nodejs企业级开发框架nest学习总结 - 5.NestJS入门使用mongoose、multer、验证、缓存、安全等
mongoose、multer、验证、缓存、安全等官方nestjsAPI地址1.nestjs结合mongoose1.1 安装mongoose和nest相关cnpm i @nestjs/mongoose mongoose --save1.2 配置连接数据库方式1,直接配置// mongo.module.tsimport { Module } from '@nestjs/commo...
2019-09-15 15:16:43
2434
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 nodejs企业级开发框架nest学习总结 - 4.NestJS入门Authentication认证,TypeORM数据库连接
NestJS入门Authentication认证,TypeORM数据库连接官网API点击这里跳转1.Authentication依赖包安装(passport-jwt)yarn add @nestjs/passport passport passport-local @types/passport-local @nestjs/jwt passport-jwt @types/passport-j...
2019-09-05 13:45:08
3233
3
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 Nest恶补Typeorm - Typeorm快速入门学习(结合typescript)
Typeorm快速入门学习简单粗暴,主要和mongoose差不多的使用功能,快速学习官方githubAPI(点击跳转)官方API(点击跳转)1.安装(和官方一样使用mysql,其它数据库请安装其它的依赖包)npm install typeorm reflect-metadata @types/node mysql --save2.TypeScript编译器版本3.3或更高版本,并且您...
2019-09-04 22:09:08
11255
5
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 nodejs企业级开发框架nest学习总结 - 3.NestJS入门guard、interceptor、customDecorator、循环引用、注入作用域、生命钩子等
NestJS入门guard、interceptor、customDecorator、循环引用、注入作用域、生命钩子等官方API地址(点击跳转)点击跳转到个人的博客(前面两节)1.guard-守卫(每个中间件之后执行,但在任何拦截器或管道之前执行。)1.1简单例子,守卫需要实现CanActivate接口// guard/auth.guard.ts@Injectable() // 守卫必须...
2019-09-03 16:48:58
2430
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 nodejs企业级开发框架nest学习总结 - 2.NestJS入门middleware、exceptionFilter、Pipe。
NestJS入门middleware、exceptionFilter、pipe。前面一节介绍了NestJS的controller、DTO、providers、module等的学习1.middleware中间件是在路由处理程序之前调用的函数。中间件函数可以访问请求和响应对象,以及next()应用程序请求 - 响应周期中的中间件功能。中间件例子:core跨域中间件、bodyparser中间件、...
2019-09-01 23:00:36
3055
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 nodejs企业级开发框架nest学习总结 - 1.NestJS入门controller、DTO、providers、module
NestJS入门controller、DTO、providers、module。官方API地址https://docs.nestjs.com/Nest(或NestJS)是一个用于构建高效,可扩展的Node.js服务器端应用程序的框架。也可以在Nest中使用express框架的扩展安装(官方也有推荐) npm i -g @nestjs/cli //全局安装脚手架 nest new proj...
2019-09-01 17:35:21
2975
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 在react vue中使用graphql接口/type-graphql接口
在react vue中使用graphql接口/type-graphql接口后台代码实现:Type-GraphQL结合装饰器写法的node框架的学习笔记提示:1为vue中使用graphql的操作,2为react中使用graphql的操作1.在vue中使用graphql安装脚手架 vue create test =>选中typescript支持1.1 安装依赖,依赖有点多,有七个ya...
2019-08-24 13:06:32
1050
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 nuxt+typescript+elementUI+vuex的搭建过程和nuxt的基本使用
nuxt+typescript+elementUI+vuex的搭建过程和nuxt的基本使用
2019-08-23 23:15:55
1960
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 Type-GraphQL结合装饰器写法的node框架的学习笔记
Type-GraphQL结合装饰器写法的node框架Type-GraphQL用装饰器的写法和一些改进的做法,让graphql的写法更加的清晰的在TypeScript中实现 Type-GraphQL官网地址(点击跳转)还不怎么知道什么是graphql的可以先查看这个博客了解一下GraphQL的一些curd操作在express和koa的使用笔记(点击跳转)1.graphQL依赖安装yarn ...
2019-08-23 19:49:05
1620
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 GraphQL的一些curd操作在express和koa的使用笔记总结
GraphQL的一些curd操作在express和koa的使用笔记(typescript版本,可以自行转换成js版本)GraphQL,特点是减少http请求过程中太多无用字段造成的请求量过多,需要什么字段就接受什么字段,加快了http请求过程的速度,减少冗余,同时也有一些它的缺点1.安装graphql、express-graphql ( Koa的话安装koa-graphql、koa-mount...
2019-08-23 15:53:53
472
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 routing-controllers、class-validator、typedi的使用总结
routing-controllers、class-validator,typedi的使用总结由于typescript的版本书写的nodejs的接口用之前的方式书写有些不够清晰,也不能提现出typescript的特色,所以就使用了如上几个库书写typescript的接口,类似于后端框架的写法如果需要深入学习,请前往github官方API深入学习,以下是个人学习后的一些总结。 官方API地址(h...
2019-08-23 14:50:14
4317
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 React进阶用法和hooks - 5.useRef,useImperativeHandle和forwardRef的结合使用以及useLayoutEffect、useDebugValue的简单使用
5.useRef,useImperativeHandle和forwardRef的结合使用以及useLayoutEffect、useDebugValue的简单使用
2019-08-18 21:27:09
11575
2
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 TypeScript结合React全家桶(antd、axios、Nextjs)的一些类型总结
TypeScript结合React、Vue、express的一些类型总结(一些常用自带的类型)1.React类型总览(包括React本身、router、antd的类型)1.1 React本身常用类型
2019-08-18 18:50:16
8101
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 React进阶用法和hooks的个人使用见解(Typescript版本) - 4.useReducer+useContext+createContext的使用、模拟redux合并reducer
4.useReducer+useContext+createContext的使用、模拟redux合并reducercreateContext:一个创建上下文函数,执行产生一个上下文对象,包含两个属性,Provider组件和Consumer组件Provider:用来包裹整合组件,传递一个value属性,把context上下文注入到整个组件当中Consumer组件,在里面使用函数调用Provid...
2019-08-17 12:18:30
4369
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 React进阶用法和hooks的个人使用见解(Typescript版本) - 3.useCallback+useMemo+memo性能优化
3.useCallback+useMemo+memo性能优化场景使用当父组件引入子组件的情况下,往往会造成组件之间的一些不必要的浪费,下面我们通过例子来了解一下场景3.1创建一个test.tsx文件,我们拷贝上篇博客的useState的案例import React, { useState } from 'react';function Test() { const [count, ...
2019-08-17 11:18:30
6648
3
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 React进阶用法和hooks的个人使用见解(Typescript版本) - 2.hooks的useState、useEffect、自定义钩子的实际使用
2.hooks的useState、useEffect的实际使用(Typescript)从React16.8版本的hooks正式发布,hooks的使用是越来越火,从而出现了许多使用无状态组件(函数)+hooks替代有状态组件(类)来书写React组件的热潮,但是由于一些实际运用还有些缺乏,接下来介绍一下useState、useEffect两个hooks的一些简单使用吧2.1 useState:官...
2019-08-17 10:28:27
11886
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 React进阶用法和hooks的个人使用见解(Typescript版本) - 1.lazy+Suspense懒加载的使用
React高级用法和hooks的个人使用见解(如有侵权,请联系我)1.lazy+Suspense懒加载组合,替换loadable懒加载依赖库lazy+Suspense的简单实例1.创建routeConstants.ts路由常量模块,暴露出常量/** * 登录页面的url */export const LOGIN_PATH = '/login';/** * 错误页面url / ...
2019-08-17 09:36:52
2634
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 vue/cli3+typescript+vuex的一些简单使用
vue/cli3+typescript+vuex的一些简单使用(如有侵权,请联系我)安装的过程就不用说了,相信到这里的大佬都是有一些水平的人(脚手架自带选项可以选择typescript支持)1.vue-property-decorator的一些装饰器的使用App.vue简单示例vue-property-decorator提供如下七个装饰器和一个Mixins混合以及Vue类(来自官方)@C...
2019-08-16 19:21:57
3622
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 react-typescript的一些简单使用,引入antd、redux,按需加载
react脚手架typescript版本整合redux、antd按需加载的简单使用(如有侵权,请联系我)1.下载create-react-appcnpm i create-react-app -g //全局下载react脚手架,mac用户加上sudo2.创建react项目(注意:进入启动测试一下项目是否能正常运行)create-react-app ts-react-study --typ...
2019-08-16 17:29:20
3445
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 redux、scss/less、antd按需加载、typescript整合nextjs
nextjs整合redux、typescript、antd按需加载案例步骤:(如有侵权,可以留言,
2019-08-16 16:14:20
1969
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 模拟redux的combineReducers函数合并reducer,使用createContext, useContext, useReducer整合多个reducer案例
一个整合多个reducer的useRedcuer的案例1.redux-custom.tsximport React, { Context, createContext, useContext, useReducer } from 'react';/** * @createContext ProviderContext 一个创建完毕的context*/const ProviderCon...
2019-08-15 18:44:29
1789
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 使用useReducer替代redux,简单的整合多个reducer小案例,半成品
由于最近hooks越来越火,出现了useReducer替代redux的热潮。模拟redux的combineReducers来整合多个reducer成一个reducers的案例1.定义两个reducerexport const initialReucer1 = { count: 1}export const initialReucer2 = { user: {}}exp...
2019-08-15 16:00:58
4578
8
原创 webpack4 - loader 的执行过程和部分常用loader原理实现
webpack4 - loader 的执行过程和部分常用loader原理实现1.loader 运行的总体流程 1.Compiler.js中会将用户配置与默认配置合并,其中就包括了loader部分 2.webpack就会根据配置创建两个关键的对象 ———— NormalModuleFactory 和 ContextModuleFactory , 他们相当于是两个类工厂,通过其可以创...
2020-02-29 20:08:38
1332
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人