<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Tempta的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Tempta36</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Tempta36]]></copyright><item><title><![CDATA[webpack搭建本地服务及自动刷新浏览器]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/104806750</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/104806750</guid><author>Tempta36</author><pubDate>Wed, 11 Mar 2020 22:30:44 +0800</pubDate><description><![CDATA[搭建本地服务
首先，在项目中安装webpack-dev-server
npm install webpack-dev-server -D
在package.json文件中添加如下：
{
	"scripts":{
		"dev":"webpack-dev-server --hot"
	}
}

（–hot指启动模块热替换，会自动添加webpack.HotModulePeplacementPlugin...]]></description><category></category></item><item><title><![CDATA[webpack常用配置整理（Loaders&Plugins）]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/104685314</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/104685314</guid><author>Tempta36</author><pubDate>Thu, 05 Mar 2020 22:40:35 +0800</pubDate><description><![CDATA[图片处理
url-loader
将图片转换为base64 URI
fallback
指定当目标文件的大小超过limit选项中设置的限制时要使用的替代加载程序。
options:{
	fallback: 'file-loader'
}

limit
最大文件大小，单位bytes
file-loader
处理使用import('url')、require('url')引入的文件，将引入的文件输出至ou...]]></description><category></category></item><item><title><![CDATA[npm install webpack报错if you are behind a proxy,please make sure that the proxy cinfig is setproperly]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/104676312</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/104676312</guid><author>Tempta36</author><pubDate>Thu, 05 Mar 2020 15:48:19 +0800</pubDate><description><![CDATA[npm install webpack -g报错if you are behind a proxy,please make sure that the 'proxy' cinfig is set properly.

错误信息提示：若配置了代理，请确认代理被合理配置。因此去设置npm代理
执行npm config set proxy http://proxy.example.com:8080
参考...]]></description><category></category></item><item><title><![CDATA[给Echarts地图的tooltip添加按钮]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/104591652</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/104591652</guid><author>Tempta36</author><pubDate>Sun, 01 Mar 2020 14:46:10 +0800</pubDate><description><![CDATA[tootip配置自定义内容并提供按钮可点击查看详细信息
效果如下图所示：

思路：

tooltip的formatter支持自定义提示框浮层内容，可在此处自定义显示内容及按钮
给按钮绑定事件，触发时调用method中的方法。该方法中去做地图容器的事件监听，在回调函数中处理路由跳转显示详细信息。

&lt;template&gt;
	&lt;div id="map"&gt;&lt;/div&gt;
...]]></description><category></category></item><item><title><![CDATA[echarts4+bmap+vue2地图显示不出来]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/104579283</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/104579283</guid><author>Tempta36</author><pubDate>Sat, 29 Feb 2020 18:41:24 +0800</pubDate><description><![CDATA[在vue单页应用中，ak认证的获取需放在index.html的head里，否则地图将显示不出来。
index.html
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&amp;ak=S4KKfPTez9LK...]]></description><category></category></item><item><title><![CDATA[四种gulp增量编译方式]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/102454951</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/102454951</guid><author>Tempta36</author><pubDate>Wed, 09 Oct 2019 16:30:52 +0800</pubDate><description><![CDATA[在编译过程中，可能会出现不必要的编译，我们希望只对修改过的文件进行编译，即 增量编译。
目前，用于增量编译的插件有gulp-changed,gulp-newer,gulp-cached+gulp-remember。
接下来，就来试试上述插件。
首先，笔者测试使用的文件目录如下：

接着，在gulpfile.js文件中进行如下定义
const {task, src, watch, series, p...]]></description><category></category></item><item><title><![CDATA[使用gulp构建项目]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/95061429</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/95061429</guid><author>Tempta36</author><pubDate>Mon, 08 Jul 2019 15:11:17 +0800</pubDate><description><![CDATA[常用的npm包

glob通配符匹配文件名
gulp-clean删除文件
gulp-uglify压缩js文件
gulp-babel编译es6
gulp-concat合并文件
gulp-lessless预处理
gulp-autoprefixercss兼容性处理
gulp-clean-css压缩css
gulp-if条件判断
gulp-connect搭建前端服务，支持热更新
yargs命令行参数解析工...]]></description><category></category></item><item><title><![CDATA[滚动条的浏览器兼容问题]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/90647993</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/90647993</guid><author>Tempta36</author><pubDate>Tue, 28 May 2019 21:55:56 +0800</pubDate><description><![CDATA[谷歌浏览器
谷歌可设置大部分滚动条样式，但是无法设置内嵌式滚动条，如下图：

/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）
width指竖向滚动条宽度  height指横向滚动条高度
*/
::-webkit-scrollbar{
	width:10px;
	height:10px;
}
/*滚动条两端的按钮，可以...]]></description><category></category></item><item><title><![CDATA[css奇淫巧计]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/89640545</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/89640545</guid><author>Tempta36</author><pubDate>Sun, 28 Apr 2019 16:21:24 +0800</pubDate><description><![CDATA[纯css实现半圆

	width:100px;
	height:200px;
	background-color:red;
	border-radius:100px;
	border-top-left-radius:100px;
	border-bottom-left-radius:100px;

纯css实现文字渐变色动画效果
&lt;div class="list"&gt;
	&lt;span...]]></description><category></category></item><item><title><![CDATA[vue登录时点击登录之后显示cannot post/]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/83150636</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/83150636</guid><author>Tempta36</author><pubDate>Thu, 18 Oct 2018 17:59:27 +0800</pubDate><description><![CDATA[框架：vue
请求插件:axios
场景：
实现登录功能
错误场景：
点击登录按钮之后，页面跳转并显示cannot post/，请求后台的接口未被调用。
源码如下：
&amp;lt;form method=&quot;post&quot; action=&quot;&quot; class=&quot;layui-form&quot; &amp;gt;
      &amp;lt;input name=&quot;username&quot; placeholder=&quot;用户名&quot; type]]></description><category></category></item><item><title><![CDATA[vue实现二级菜单的显示或隐藏]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/83016062</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/83016062</guid><author>Tempta36</author><pubDate>Thu, 11 Oct 2018 17:35:50 +0800</pubDate><description><![CDATA[场景：二级菜单用html写死的，而不是以通过data和v-for动态生成的
今天在实现的过程中，出现了问题。实现思路如下：
data中设置menuIsShow为一个数组，数组的元素为boolean值，表示一级菜单是否显示或隐藏。
在html中对应的二级菜单元素上绑定menuIsShow的值，如:class=&quot;{showItem:menuIsShow[0]}&quot;，然后在对应的一级菜单元素上绑定事件改变...]]></description><category></category></item><item><title><![CDATA[基于vue-cli+vue2+vuex+vue-router的仿简书官网项目]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/82982333</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/82982333</guid><author>Tempta36</author><pubDate>Tue, 09 Oct 2018 14:52:30 +0800</pubDate><description><![CDATA[
由于guthub库搜索vue2项目大部分都是移动端，因此本人仿照简书官网做了pc端的实操项目。
本项目为纯前端实现，所有数据均为前端自造。且仅实现了部分功能。
github源码地址 https://github.com/Tempta36/fangjianshu/

项目成果




环境搭建
npm install --gloabal vue-cli //全局安装vue-cli
vue init...]]></description><category></category></item><item><title><![CDATA[axios攻略]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/82771778</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/82771778</guid><author>Tempta36</author><pubDate>Wed, 19 Sep 2018 14:36:44 +0800</pubDate><description><![CDATA[Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Features

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

axios有两种用法。
// 为给定 ID 的 user ...]]></description><category></category></item><item><title><![CDATA[设置div高度为浏览器可视窗口的高度]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/82768342</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/82768342</guid><author>Tempta36</author><pubDate>Wed, 19 Sep 2018 10:27:35 +0800</pubDate><description><![CDATA[div {
	position:absolute;
	top:0;
	left:0;
	height:100%;
}


]]></description><category></category></item><item><title><![CDATA[设置checkbox与文字对齐]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/82768322</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/82768322</guid><author>Tempta36</author><pubDate>Wed, 19 Sep 2018 10:26:18 +0800</pubDate><description><![CDATA[checkbox {
	vertival-align:text-bottom;
	margin-bottom:0;
}


]]></description><category></category></item><item><title><![CDATA[vue-cli配置反向代理解决跨域及过程理解]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/82768204</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/82768204</guid><author>Tempta36</author><pubDate>Wed, 19 Sep 2018 10:21:16 +0800</pubDate><description><![CDATA[vue-cli提供了配置反向代理的接口，即设置config/index.js中的proxyTable。配置如下:
dev: {
	......
	
	proxyTable: {
      '/api':{     //将www.exaple.com印射为/apis
        target:'https://www.exaple.com',     //跨域地址
        change...]]></description><category></category></item><item><title><![CDATA[Vue2进阶知识点]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/82560743</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/82560743</guid><author>Tempta36</author><pubDate>Sun, 09 Sep 2018 18:10:48 +0800</pubDate><description><![CDATA[数据与方法

当一个Vue 实例被创建时，它向Vue的响应式系统中加入了其 data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。



// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返...]]></description><category></category></item><item><title><![CDATA[提交mutations之后，state的值没有发生变化]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/82118432</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/82118432</guid><author>Tempta36</author><pubDate>Mon, 27 Aug 2018 20:13:41 +0800</pubDate><description><![CDATA[vuex相关代码（user.js）

let users = [
  {&quot;username&quot;:&quot;Lucy&quot;,&quot;password&quot;:&quot;123456&quot;,&quot;login&quot;:false},
  {&quot;username&quot;:&quot;qweasd&quot;,&quot;password&quot;:&quot;123456&quot;,&quot;login&quot;:false},
  {&quo]]></description><category></category></item><item><title><![CDATA[vue2学习小计]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/81907399</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/81907399</guid><author>Tempta36</author><pubDate>Tue, 21 Aug 2018 16:21:46 +0800</pubDate><description><![CDATA[双向数据绑定

原理：通过数据劫持结合发布者-订阅者模式的方式实现 
具体：首先对数据进行劫持监听（使用Object.defineProperty），设置一个监听器Observer，用来监听所有属性。当属性发生变化，订阅者Watcher收到属性的变化通知并执行相应的函数，从而更新视图。解析器Compile扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。 
直通车

指令及...]]></description><category></category></item><item><title><![CDATA[单点登陆]]></title><link>https://blog.youkuaiyun.com/Tempta36/article/details/81902782</link><guid>https://blog.youkuaiyun.com/Tempta36/article/details/81902782</guid><author>Tempta36</author><pubDate>Tue, 21 Aug 2018 10:17:55 +0800</pubDate><description><![CDATA[原文地址



登陆：

相比于单系统登录，sso（单点登录Single Sign On）需要一个独立的认证中心，只有认证中心能接受用户的用户名密码等安全信息，其他系统不提供登录入口，只接受认证中心的间接授权。间接授权通过令牌实现，sso认证中心验证用户的用户名密码没问题，创建授权令牌，在接下来的跳转过程中，授权令牌作为参数发送给各个子系统，子系统拿到令牌，即得到了授权，可以借此创建局部会话，局部...]]></description><category></category></item></channel></rss>