一、查看系统语言设置
输入 locale 查看当前语言环境
例如我的 LANG=”en_US.UTF-8 就没有问题如果不是 UTF-8 可能会有问题
二、更改 nginx 设置
在 nginx 配置文件中,找到 sever,在里面添加 charset utf-8;
例如server{ charset utf-8; root /data/www; }
同时需要将 FTP 和 shell 工具的字符集设置为 UTF-8
以上就是解决 url 中文 404 的方案=,=
前端Copy师
闲来无事想着腾讯云服务器买着吃灰好久了。。于是便诞生了这篇文章
服务器是 Centos 系统然后服务器选择的 nginx
主要是几个步骤
nginx
这时候可以访问 IP 看到测试页了
更改静态文件存储位置
|
|
对啦 vim 我也是现学的编辑 保存退出=。=
把 root 更改为/data/www 后还有一个事情要处理 就是处理默认配置的一条注释掉
nginx.conf 配置文件中有一行是 include /etc/nginx/conf.d/*.conf,把这行代码注释掉,保存退出,因为这行代码会使文件执行默认配置。
检查配置文件是否正确 nginx -t
在 data 目录下创建 www 文件夹 mkdir -p /data/www
Create React App(以下简称 CRA)是创建 React 应用的一个脚手架,它与其他脚手架不同的一个地方就是将一些复杂工具(比如 webpack)的配置封装了起来,让使用者不用关心这些工具的具体配置,从而降低了工具的使用难度。
但是对于一些熟悉 webpack 的开发者来说,他们可能想对 webpack 配置做一些修改,这个时候应该怎么办呢?
其实我们可以通过以下几种方式来修改 webpack 的配置:
使用 CRA 创建完项目以后,项目在 package.json 里面提供了这样一个命令:
|
|
执行完这个命令——yarn run eject(或者 npm run eject)后会将封装在 CRA 中的配置全部反编译到当前项目,这样用户就可以完全取得 webpack 文件的控制权,想怎么修改就怎么修改了。
|
|
CRA 与其他脚手架不同的另一个地方,就是可以通过升级其中的 react-scripts 包来升级 CRA 的特性。比如用老版本 CRA 创建了一个项目,这个项目不具备 PWA 功能,但只要项目升级了 react-scripts 包的版本就可以具备 PWA 的功能,项目本身的代码不需要做任何修改。
但如果我们使用了 eject 命令,就再也享受不到 CRA 升级带来的好处了,因为 react-scripts 已经是以文件的形式存在于你的项目,而不是以包的形式,所以无法对其升级。
react-scripts 是 CRA 的一个核心包,一些脚本和工具的默认配置都集成在里面,使用 CRA 创建项目默认就是使用这个包,但是 CRA 还提供了另外一种方式来创建 CRA 项目,即使用自定义 scripts 包的方式。
|
|
自定义包可以是下面几种形式:
自定义 scripts 包的结构可以参照 react-scripts 包的结构,只要修改对应的 webpack 配置文件,并安装上所需的 webpack loader 或 plugin 包就可以了。
虽然有这两种方式可以扩展 webpack 配置,但是很多开发者还是觉得太麻烦,有没有一种方式可以既不用 eject 项目又不用创建自己的 scripts 包呢?答案是肯定的,react-app-rewired 是 react 社区开源的一个修改 CRA 配置的工具。
在 CRA 创建的项目中安装了 react-app-rewired 后,可以通过创建一个 config-overrides.js 文件来对 webpack 配置进行扩展。
|
|
override 方法的第一个参数 config 就是 webpack 的配置,在这个方法里面,我们可以对 config 进行扩展,比如安装其他 loader 或者 plugins,最后再将这个 config 对象返回回去。
最后再修改 package.json 中的脚本命令,修改内容请见这里。
虽然 react-app-rewired 的方式已经可以很方便地修改 webpack 的配置了,但其实我们也可以在自定义的 script 包中实现类似的功能。
在 react-app-rewired 的源码中可以看到它核心的包也叫 react-app-rewired,里面重新覆盖了 react-scripts 中的几个脚本文件,包括 build.js、start.js 和 test.js。
具体过程是怎样的呢?以 build.js 为例:
|
|
知道了原理之后,我们也可以修改自定义 scripts 包的脚本文件,还是以 build.js 为例,在获取基本 webpack 配置对象和使用 webpack 对象之间加入以下代码:
|
|
overrideConfig 就是修改后的 webpack 对象,最后修改调用了 webpack 对象的代码,将原来的 webpack 对象替换成修改后的 webpack 对象。
CRA 是一个非常棒的 React 脚手架工具,但你如果不满足于它的 webpack 默认配置,你可以通过上述几种方式来扩展自己项目的 webpack 配置,这几种方式各有优缺点,可以结合具体的使用场景来选择合适自己的方式。
本文章转自此处
在使用vue的时候使用element-ui的el-input组件的时候监听不了keyup.enter回车事件,查了一下原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的:
|
|
在@keyup.enter后加.native即可解决 如下所示
|
|
实验了之后发现不仅仅是keyup.enter回车事件,其他事件也被隐藏,需要在其后加.native
看到apply()和call()的时候感觉两者很像,所以整理一下用法顺便记录两者的区别
Function.apply(obj,args)
obj
在 Function 函数运行时指定的 this 值。需要注意的是,指定的 this 值并不一定是该函数执行时真正的 this 值,如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的 this 会指向该原始值的自动包装对象。
args
一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 Function 函数。如果该参数的值为null 或 undefined,则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。
Function.call(obj[, arg1[, arg2[, …]]])
obj
在fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。
arg1, arg2, …
指定的参数列表。
|
|
在一个子构造函数中,你可以通过调用父构造函数的apply/call方法来实现继承,Product.apply(this,arguments); Product.call(this,name,price); 实际他们的作用就是将Product函数中的name,price属性继承到了自身函数中。
两者的区别很明显一个参数的形式是数组,一个指定的参数列表。
可以将一个数组默认的转换为一个参数列表[param1,param2,param3] 转换为 param1,param2,param3
Math.max() 方法可返回指定的数中带有较大的值的那个数。
Math.max([param1,param2])是不支持的
|
|
同理的还有Math.min()
ESLint 主要有以下特点:
默认规则包含所有 JSLint、JSHint 中存在的规则,易迁移;
规则可配置性高:可设置「警告」、「错误」两个 error 等级,或者直接禁用;
包含代码风格检测的规则(可以丢掉 JSCS 了);
支持插件扩展、自定义规则。
配置
可以通过以下三种方式配置 ESLint:
使用 .eslintrc 文件(支持 JSON 和 YAML 两种语法);
在 package.json 中添加 eslintConfig 配置块;
直接在代码文件中定义。
以下是.eslintrc 文件示例和解释:
|
|
Object.defineProperty(obj, prop, descriptor)
obj
需要被操作的目标对象
prop
目标对象需要定义或修改的属性的名称。
descriptor
将被定义或修改的属性的描述符。
其中descriptor包括数据描述符和存取描述符
数据描述符和存取描述符均具有以下可选键值:
configurable
当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false。
enumerable
当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。默认为 false。
数据描述符同时具有以下可选键值:
value
该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。
writable
当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。默认为 false。
存取描述符同时具有以下可选键值:
get
一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。
set
一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。
以上摘自MDN
如果对象中不存在指定的属性,Object.defineProperty()就创建这个属性。当描述符中省略某些字段时,这些字段将使用它们的默认值。拥有布尔值的字段的默认值都是false。value,get和set字段的默认值为undefined。定义属性时如果没有get/set/value/writable,那它被归类为数据描述符。
|
|
|
|
摘自imooc
Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
一个转换类数组对象到数组的一个示例:
|
|
上面代码中,querySelectorAll方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach方法。
任何有length属性的对象,都可以通过Array.from方法转为数组。
|
|
Array.from()还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理。
|
|
Array.of方法用于将一组值,转换为数组。
|
|
这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。
|
|
上面代码说明,只有当参数个数不少于2个,Array()才会返回由参数组成的新数组。
数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
|
|
上面代码找出数组中第一个小于0的成员。
|
|
上面代码中,find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
数组实例的findIndex方法,用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
|
|
这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。
另外,这两个方法都可以发现NaN,弥补了数组的IndexOf方法的不足。
|
|
上面代码中,indexOf方法无法识别数组的NaN成员,但是findIndex方法可以借助Object.is方法做到。
fill()使用给定值,填充一个数组。
|
|
上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。
fill()还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
|
|
ES6提供三个新的方法:
·entries()
·keys()
·values()
用于遍历数组。它们都返回一个遍历器,可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
|
|
String()与 .toString()都是可以转换为字符串类型,但是两者还是有区别的
二进制:.toString(2);
八进制:.toString(8);
十进制:.toString(10);
十六进制:.toString(16);
|
|
|
|