- 博客(23)
- 收藏
- 关注
RSS订阅原创 nginx配置参考，本地文件夹+远端转发
#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_connections 1024;}http { include mime.types; defau.
2021-09-18 10:32:16
400
原创 SharedConfig 配置说明
declareinterfaceSharedConfig{/** 直接在异步请求后面包含提供的和回退模块。这也允许在初始加载时使用这个共享模块。所有可能的共享模块也需要渴望。*/eager?:boolean;/*** 提供的模块应该被提供以共享范围。如果在共享范围中找不到共享模块或版本无效，则还充当回退模块。默认为属性名称。*/import?:string|false;/*** 从描述文件中确定所需版本的包名。仅当无法从请求中自动确定包...
2021-07-09 14:01:39
1871
原创 react之 hook 相关知识点
useStateconst [state, setState] = useState(initialState);返回一个 state，以及更新 state 的函数。在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。import React, { useState } from 'react';function Example()..
2020-10-19 19:20:49
179
原创 ES6语法学习笔记
箭头函数// ES5input.map(item => item + 1);// ES6input.map(function (item) { return item + 1;});定义常量/变量: const/letlet声明的变量仅在作用域有效，不会提升解构赋值:数组结构：let [x, y] = [1, 2, 3];let [head, ...tail] = [1, 2, 3, 4];head // 1tail // [2, 3, 4]对象解构.
2020-10-08 13:17:56
222
2
原创 react 、redux学习总结
1、生命周期流程图2、关于this自定义事件需要在constructor里面绑定this，或使用箭头函数或则使用ES6箭头函数export default class myComponent extends React.Component { constructor(props) { super(props); this.handerClick = this.handerClick.bind(this); } handerClick (){ //xxx
2020-09-19 13:40:43
113
原创 使用nrm管理npm的国内镜像
开发过程中，经常遇到npm install 下载安装模块和包特别慢，或则切换私有仓库的时候，步骤麻烦，下面介绍一个镜像的管理工具包首先，命令行利用npm 全局下载安装 nrmnpm install -g nrm 下载好后输入nrm ls有一个 * 号表示当前使用的npm源 这里面的内容就是一些国内的镜像，我用的是taobao的镜像，所以接下来输入nrm use taobao再利用此命令进行检查是否切换到nrm ls切换成功，此时再用npm install 下载安装就是国内的t
2020-09-08 21:21:16
218
原创 nrm的安装与配置
1.nrmnrm(npm registry manager )是npm的镜像源管理工具，有时候国外资源太慢，使用这个就可以快速地在 npm 源间切换2.安装nrm在命令行执行命令，npm install -g nrm，全局安装nrm。3.使用执行命令nrm ls查看可选的源。nrm ls
2020-09-03 18:27:41
163
原创 Yarn 常用的命令
初始化一个新项目yarn init添加依赖包yarn add [package]yarn add [package]@[version]yarn add [package]@[tag]将依赖项添加到不同依赖项类别中分别添加到 devDependencies、peerDependencies 和 optionalDependencies 类别中：yarn add [package] --devyarn add [package] --peeryarn add [package] -
2020-09-03 17:13:27
124
原创 webpack优化环境配置 -- 进阶篇知识要点汇总
1、HMRcss样式只需要在devServer 里面 hot 配置为true即可js文件需要在js文件里面加配置才可以实现，要不然是整个页面刷新注意： 只适用于非入口文件js if (module.hot) { // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效 module.hot.accept('./print.js', function() { // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会
2020-07-31 22:49:15
298
原创 webpack配置详解【六】 -- optimization详解
minimizer内配置的压缩 需要安装terser-webpack-pluginnpm i -D terser-webpack-plugin1、文中注释内容是默认，可不写，除非需要修改里面的配置。2、runtimeChunk可解决修改a文件导致b文件的contenthash变化的问题。其他更多参数详解见代码注释。const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin'
2020-07-28 18:08:23
1419
原创 webpack配置详解【五】 -- devServer详解
参数都很简单，详见下面代码块。需注意一点就是：开启HMR功能后会和contenthash冲突，报错。另外proxy很实用，代码里列举了基本配置，更多使用方法参加官方文档。const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/js/index.js', output: { filenam
2020-07-28 16:34:46
703
原创 webpack配置详解【四】 -- resolve详解
resolve: 解析模块的规则resolve.aliasresolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。例如使用以下配置：resolve: { alias: { $css: resolve(__dirname, 'src/css') } }这样在js文件里面引用的时候可以简写文件路径import '$css/index.css'extensions配置省略文件路径的后缀名 resolve: { // 配置省略文件路
2020-07-28 15:34:38
2594
原创 webpack配置详解【三】 -- module详解
知识点：1、loader加载顺序是 从右到左，从下到上2、多个loader用useuse: [‘style-loader’, ‘css-loader’]3、exclude和include的搭配使用可以缩小匹配的范围4、如果觉得loader自带顺序导致格式混乱的话，或者觉得不方便可以指定 enforce的值来指定loader的顺序参数说明pre优先处理normal正常处理（默认）inline其次处理post最后处理5、使用oneOf提升效率，
2020-07-28 14:37:54
590
原创 webpack配置详解【二】 -- output详解
const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/index.js', output: { // 文件名称（指定名称+目录） filename: 'js/[name].js', // 输出文件目录（将来所有资源输出的公共目录） path: resolve(__di
2020-07-28 14:14:26
458
原创 webpack配置详解【一】 -- entry详解
entry: 入口起点1. string --> ‘./src/index.js’ 单入口 打包形成一个chunk。 输出一个bundle文件。 此时chunk的名称默认是 main2. array --> [’./src/index.js’, ‘./src/add.js’] 多入口 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。 --> 只有在HMR功能中让html热更新生效~3、 object 多入口 有几个
2020-07-28 11:11:31
891
原创 webpack常见Loader包、Plugin包，以及相关配置的注意事项
首先初始化package.json输入指令:npm init一路按回测即可，后续可在package.json里面修改输入指令:npm install webpack webpack-cli -g 全局安装npm install webpack webpack-cli -D 局部安装 <— 推荐
2020-07-17 15:35:22
207
原创 webpack环境的入门和环境搭建
安装webpack到本项目/** 安装最新的稳定版 **/# npm i -D webpack/** 安装指定版本 **/# npm i -D webpack@<version>/** 安装最新的体验版本 **/# npm i -D webpack@beta推荐上述命令（安装到本项目），当然也可以安装到全局( npm i -g webpack )，多个项目公用一个Webpack。使用Loader引入非js文件需要安装Loader# npm i -D style-loa
2020-07-15 21:30:06
94
转载 webpack4之 ReferenceError: document is not defined
错误信息如下：目录结构Webpack版本号HTML文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>.
2020-07-15 21:28:31
8003
原创 React 事件传参和this绑定
在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面，例如:class Popper extends React.Component{ constructor(){ super(); this.state = {name:'Hello world!'}; } preventPop(name, e){ //事件对象e要放在最后 e.preventDefault(); alert(name);
2020-07-03 17:05:31
182
转载 jsx中使用判断语句
在react中用jsx渲染dom的时候经常会遇到if条件判断，然而在jsx中竟是不允许if条件判断的。以下有几种判断方式，可以根据自己的应用场景，挑选适合的。方案一：class HelloMessage extends React.Component { render (){ let userMessage; if (this.props.loggedIn) { userMessage = ( <span> <h2&g
2020-07-02 17:15:19
2832
原创 Vue模板语法
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：&lt;span&gt;Message: {{ msg }}&lt;/span&gt;无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。&lt;span v-once&gt;这个将不会改变: {{ msg }}&lt;/span&gt;一次性地插值，当数据改变
2018-09-10 17:54:52
103
原创 Vue 实例及生命周期
// 我们的数据对象 var data = { a: 1 }// 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: data })// 获得这个实例上的属性 // 返回源数据中对应的字段 vm.a == data.a // =&gt; true// 设置属性也会影响到原始数据 vm.a = 2 data.a // =&gt; 2...
2018-09-10 16:13:04
99
原创 v-model 指令
v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。 v-bind:title = “message” 将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致” v-if 控制切换一个元素是否显示 v-for 指令可以绑定数组的数据来渲染一个项目列表 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法 ...
2018-09-10 16:12:01
962
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人