<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[sun_chen_93的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/sun_chen_93</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; sun_chen_93]]></copyright><item><title><![CDATA[vuecli4中关闭Eslint]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/119204394</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/119204394</guid><author>sun_chen_93</author><pubDate>Thu, 29 Jul 2021 09:58:03 +0800</pubDate><description><![CDATA[元气满满，直接干！

如果在创建项目时选择了eslint，而你又无法驾驭它，噩梦就开始。各种报错，让你非常难受！

这时我们就要关闭eslint，过程非常简单。

1. 在项目根目录下创建 `vue.config.js` 作为配置文件

2. 添加以下配置：


modelu.exports = {
    lintOnSave: false,
    devServer: {
        overlay: {
            warning: false,
            errors]]></description><category></category></item><item><title><![CDATA[vuecli4中配置请求代理解决跨域]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/119204269</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/119204269</guid><author>sun_chen_93</author><pubDate>Thu, 29 Jul 2021 09:50:49 +0800</pubDate><description><![CDATA[元气满满，直接干！

开发项目时，给的测试接口需要跨域，这就非常难受！

在vuecli中，可以通过配置请求代理，解决接口跨域问题。配置过程很简单。

1. 在根目录下添加 `vue.config.js` 作为配置文件

2. 添加以下配置：


module.exports = {
	//配置 运行和打包时的文件路径
	publicPath:process.env.NODE_ENV==='production'?'./':'/',
	devServer:{
		// 设置服务器路由（app为express]]></description><category></category></item><item><title><![CDATA[vuecli4中配置服务器]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/119204118</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/119204118</guid><author>sun_chen_93</author><pubDate>Thu, 29 Jul 2021 09:46:58 +0800</pubDate><description><![CDATA[元气满满，直接干！

在使用vuecli4开发项目时，如果需要自己开发服务器测试项目，单独编写一个服务器，非常难受！

这时，我们可以在vuecli4中直接进行服务器 开发。过程极其简单。

1. 在根目录下添加 `vue.config.js` 作为配置文件

2. 添加以下配置


module.exports = {
	//配置 运行和打包时的文件路径
	publicPath:process.env.NODE_ENV==='production'?'./':'/',
	devServer:{
		// ]]></description><category></category></item><item><title><![CDATA[vuecli4中配置打包使用相对路径]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/119203846</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/119203846</guid><author>sun_chen_93</author><pubDate>Thu, 29 Jul 2021 09:39:04 +0800</pubDate><description><![CDATA[元气满满，直接干！

使用vuecli4进行项目打包时，默认使用的是根目录的方式，这样打包直接项目直接运行就是一个大白屏，非常难受！

这时我们就需要在设置打包使用相对目录的方式，设置过程非常简单。

1. 在vuecli跟目录下添加 `vue.config.js`作为配置文件

2. 添加以下配置：


module.exports = {
	//配置 运行和打包时的文件路径
	publicPath:process.env.NODE_ENV==='production'?'./':'/',
	devSer]]></description><category></category></item><item><title><![CDATA[vuecli4中手动配置less或者scss]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/119203678</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/119203678</guid><author>sun_chen_93</author><pubDate>Thu, 29 Jul 2021 09:30:43 +0800</pubDate><description><![CDATA[元气满满，直接干~~

假设我们创建项目时选择的是scss，但是项目中我们突然想要使用less,直接使用的话就会报错，非常难受。

这时我们需要做的非常简单，只需要在项目中安装`less`和`less-loader`两个包即可。

`npm i less -D`

`npm i less-loader@5.0.0 -D`

注意less-loader要使用第版本，直接默认安装高版本依然报错。

-----

同理，当我们想要手动添加scss时，只需要安装 `sass`和`sass-loader@8.0.2`]]></description><category></category></item><item><title><![CDATA[vuecli4中配置px自动转换vw]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/119203114</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/119203114</guid><author>sun_chen_93</author><pubDate>Thu, 29 Jul 2021 09:10:21 +0800</pubDate><description><![CDATA[元气满满，直接干~~~

移动端使用vw实现响应式布局时，需要自己计算vm的数值，非常难用！

什么是vw：默认将屏幕宽度分为100份，1vw = 一份。

在vuecli4中使用一个插件，让我们在开发时照常写px，而插件可以将px自动转换vw。非常好用！

1. 下载 ` npm i postcss-px-to-viewport -D `

2. 在项目根目录下创建 `.postcssrc.js ` 作为配置文件

3. 添加以下配置：


const path = require('path');

.]]></description><category></category></item><item><title><![CDATA[swiper基本轮播演示]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/103242569</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/103242569</guid><author>sun_chen_93</author><pubDate>Mon, 25 Nov 2019 17:50:04 +0800</pubDate><description><![CDATA[基于swiper及基本轮播效果

自动轮播+无缝轮播
	左右按钮控制效果
	指示器（分页器）
代码示例：


&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="UTF-8"&gt;
		&lt;title&gt;swiper轮播&lt;/title&gt;
		&lt;!-- 引入swiper css 及 js...]]></description><category></category></item><item><title><![CDATA[jquery手写简单轮播效果]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/103242450</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/103242450</guid><author>sun_chen_93</author><pubDate>Mon, 25 Nov 2019 17:45:08 +0800</pubDate><description><![CDATA[基于jquery的简单轮播效果

无缝轮播、前进后退、指示器（分页器）
	使用时注意设置组外层宽高
html代码




&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="UTF-8"&gt;
		&lt;title&gt;&lt;/title&gt;
		&lt;link rel="stylesheet" ...]]></description><category></category></item><item><title><![CDATA[javascript-数组的遍历新方法]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/82251001</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/82251001</guid><author>sun_chen_93</author><pubDate>Fri, 31 Aug 2018 10:36:58 +0800</pubDate><description><![CDATA[最近一段时间对于数组的操作的很频繁，这里对数据及各特殊方法进行下整理：sort、some、forEach、filter、findIndex、every


every（）方法用来测试，数组的所有元素是否全部通过指定的函数测试


var arr  = [1,2,3,4,5];
arr.every(function(ele,index,arr){
    return ele&amp;lt;10;
})
/...]]></description><category></category></item><item><title><![CDATA[javascript--键盘事件对应的键码]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/82225784</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/82225784</guid><author>sun_chen_93</author><pubDate>Thu, 30 Aug 2018 18:12:35 +0800</pubDate><description><![CDATA[js 里面的键盘事件经常用到，所以收集了键盘事件对应的键码来分享下：
keyCode 8 = BackSpace BackSpace
keyCode 9 = Tab Tab
keyCode 12 = Clear
keyCode 13 = Enter
keyCode 16 = Shift_L
keyCode 17 = Control_L
keyCode 18 = Alt_L
keyCode 19 =...]]></description><category></category></item><item><title><![CDATA[javascript--window方法详解]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/81906728</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/81906728</guid><author>sun_chen_93</author><pubDate>Tue, 21 Aug 2018 14:19:30 +0800</pubDate><description><![CDATA[
/*计时器*/
window.setInterval(function(){},1000);
window.setTimeout(function(){},1000);
/*弹出框*/
	//window.alert();
	//window.confirm();
	//window.prompt();
/*移动、滚动、缩放*/
	//滚动条操作:有滚动条是才会有效
	window.scroll...]]></description><category></category></item><item><title><![CDATA[javascript--window对象及宽高、位置、滚动条]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/81904081</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/81904081</guid><author>sun_chen_93</author><pubDate>Tue, 21 Aug 2018 11:07:22 +0800</pubDate><description><![CDATA[//window的属性，大部分都是只读的，不支持设置，这里也就不一一分析。使用的时候window全部作为只读看待，不要设置。
//为了简便，除非特殊说明，此文档中的document.body代表元素（标签）
//一些需要兼容地方，也都有体现，没有过多解释。

/*获取常用对象：这里的每个对象都是一个完整的体系，都要掌握*/
window.location
window.history
windo...]]></description><category></category></item><item><title><![CDATA[jquery对象的创建、插入、删除、clone]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/81508089</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/81508089</guid><author>sun_chen_93</author><pubDate>Wed, 08 Aug 2018 15:00:56 +0800</pubDate><description><![CDATA[jq对于元素的创建与插入的方式，更加简洁，操作更加简单。

jq对象的创建


var div = $(&lt;div&gt;&lt;div/&gt;);

jq对象插入的方式，分为在内部插入与在外部插入。简单来说，是作为儿子还是作为兄弟。


/*创建两个jq对象 div p*/
var div = $(&lt;div&gt;&lt;/div&gt;);
var p = $(&lt;p&gt;&...]]></description><category></category></item><item><title><![CDATA[jQuery对象与js对象的区别以及index()/get()/eq()]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/81501886</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/81501886</guid><author>sun_chen_93</author><pubDate>Wed, 08 Aug 2018 09:24:58 +0800</pubDate><description><![CDATA[我们首先要分清楚，用$()的方式，获取的DOM对象是被封装过的jq对象，可以使用jq提供的封装过的方法。用js获取的DOM对象就是jsDOM对象，不能使用jq封装的方法。

想把jsDOM对象变成JqDOM对象，将jsDOM对象，放在$()中即可。


var div = document.getelementById("dv");//jsDOM对象
    div = $(div)//jqDOM...]]></description><category></category></item><item><title><![CDATA[JavaScript---函数的属性和方法]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/81429322</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/81429322</guid><author>sun_chen_93</author><pubDate>Sun, 05 Aug 2018 11:26:30 +0800</pubDate><description><![CDATA[一个方法既是函数，又是对象。是由系统构造方法Function构造而来，Function的原型上有这么几个属性或者是方法：

name：函数的名字-字符串
	arguments：函数的实参列表--数组
	length：函数形参的长度---数字
	caller：调用函数的作用域（是个函数）
	call（）
	apply（）
	bing（）
...]]></description><category></category></item><item><title><![CDATA[JavaScript--this的指向及call、apply的区别]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/81427542</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/81427542</guid><author>sun_chen_93</author><pubDate>Sun, 05 Aug 2018 07:49:00 +0800</pubDate><description><![CDATA[判断函数中this的指向

我们在使用函数时，常常用到this，判断不同场景下this的指向是非常重要的。在此做一个总结，方便大家学习。

函数的使用场景，基本包含如下几种场景。

普通函数中的this-------window
	对象，方法中this------当前实例对象
	定时器函数中的this----window
	构造函数中的this------实例对象
	原型对象方法中的this---...]]></description><category></category></item><item><title><![CDATA[javascript---对象继承方式]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/81413845</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/81413845</guid><author>sun_chen_93</author><pubDate>Sat, 04 Aug 2018 19:01:14 +0800</pubDate><description><![CDATA[对于初学这来说，掌握对象的继承方式是必修课，今天就在这里给大家总结下对象的几种继承方式。
	在学习对象的继承方式之前，需要了解什么是原型及原型链的概念，不知道的话先去恶补下吧。
	js并不是一门面向对象的语言，没有类class的概念，在js中使用构造方法代替类class，实现模拟面向的对象编程方式。
第一种方式-----原型链继承

原型链继承：子构造方法的原型指向父构造方法的实例。


    ...]]></description><category></category></item><item><title><![CDATA[Jquery中$(this)与this的区别]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/75339316</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/75339316</guid><author>sun_chen_93</author><pubDate>Wed, 19 Jul 2017 10:15:35 +0800</pubDate><description><![CDATA[相信很多刚接触JQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？

　　首先来看看JQuery中的  $()  这个符号，实际上这个符号在JQuery中相当于JQuery（）,即$(this)=jquery();也就是说，这样可以返回一个jquery对象。那么，当你在网页中alert($('#id'));时，会弹出一个[object Object ]，这个...]]></description><category></category></item><item><title><![CDATA[HTML标签嵌套规则简单整理]]></title><link>https://blog.youkuaiyun.com/sun_chen_93/article/details/75335506</link><guid>https://blog.youkuaiyun.com/sun_chen_93/article/details/75335506</guid><author>sun_chen_93</author><pubDate>Wed, 19 Jul 2017 09:52:28 +0800</pubDate><description><![CDATA[虽然HTML标签有很多并且我们在制作页面的时候可以无限的嵌套，但是嵌套也有规则，不能随意的嵌套。有些标签是固定的嵌套规则，比如ul包含li、ol包含li、dl包含dt和dd等等。还有很多是独立的标签，我们如何来使用它编写更优秀的页面，下面就说说

块级元素与块级元素平级、内嵌元素与内嵌元素平级
	
	&amp;lt;div&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;&amp;lt;p&amp;gt;&amp;lt;...]]></description><category></category></item></channel></rss>