冼国基的博客

前端性能优化一

Sun, 18 Jun 2017 00:00:00 +0000

可以在firefox下有一个插件yslow，集成在firebug中，你可以用它很方便地来看看自己的网站的各种优化性能。

第一条、尽可能的减少 HTTP 的请求数 (Make Fewer HTTP Requests )

http请求是要开销的，想办法减少请求数自然可以提高网页速度。常用的方法，合并css，js(将一个页面中的css和js文件分别合并)以及 Image maps和css sprites等。当然或许将css，js文件拆分多个是因为css结构，共用等方面的考虑。阿里巴巴中文站当时的做法是开发时依然分开开发，然后在后台对js，css进行合并，这样对于浏览器来说依然是一个请求，但是开发时仍然能还原成多个，方便管理和重复引用。yahoo甚至建议将首页的css和js 直接写在页面文件里面，而不是外部引用。因为首页的访问量太大了，这么做也可以减少两个请求数。而事实上国内的很多门户都是这么做的。

而css sprites是指只用将页面上的背景图合并成一张，然后通过css的background-position属性定义不过的值来取他的背景。淘宝和阿里巴巴中文站目前都是这样做的。有兴趣的可以看下淘宝和阿里巴巴的背景图。

http://www.csssprites.com/ 这是个工具网站，它可以自动将你上传的图片合并并给出对应的background-position坐标。并将结果以png和gif的格式输出。

第二条、使用CDN(内容分发网络): Use a Content Delivery Network

说实话，对于CDN这一块自己并不是很了解，简单地讲，通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的 cache服务器内，通过DNS负载均衡的技术，判断用户来源就近访问cache服务器取得所需的内容，杭州的用户访问近杭州服务器上的内容，北京的访问近北京服务器上的内容。这样可以有效减少数据在网络上传输的时间，提高速度。更详细地内容大家可以参考百度百科上对于CDN的解释。Yahoo!把静态内容分布到CDN减少了用户影响时间20%或更多。

第三条、添加Expire/Cache-Control 头：Add an Expires Header

现在越来越多的图片，脚本，css，flash被嵌入到页面中，当我们访问他们的时候势必会做许多次的http请求。其实我们可以通过设置 Expires header 来缓存这些文件。Expire其实就是通过header报文来指定特定类型的文件在览器中的缓存时间。大多数的图片，flash在发布后都是不需要经常修改的，做了缓存以后这样浏览器以后就不需要再从服务器下载这些文件而是而直接从缓存中读取，这样再次访问页面的速度会大大加快。一个典型的HTTP 1.1协议返回的头信息：

HTTP/1.1 200 OK

Date: Fri, 30 Oct 1998 13:19:41 GMT

Server: Apache/1.3.3 (Unix)

Cache-Control: max-age=3600, must-revalidate

Expires: Fri, 30 Oct 1998 14:19:41 GMT

Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT

ETag: “3e86-410-3596fbbc”

Content-Length: 1040

Content-Type: text/html

其中通过服务器端脚本设置Cache-Control和Expires可以完成。

据我了解，目前阿里巴巴中文站的Expires过期时间是30天。不过期间也有过问题，特别是对于脚本过期时间的设置还是应该仔细考虑下，不然相应的脚本功能更新后客户端可能要过很长一段时间才能“感知”到这样的变化。以前做[suggest项目] 的时候就遇到过这个问题。所以，哪些应该缓存，哪些不该缓存还是应该仔细斟酌一番。

第四条、启用Gzip压缩：Gzip Components

Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。这样可以显著减少文件传输的大小。传输完毕后浏览器会重新对压缩过的内容进行解压缩，并执行。目前的浏览器都能“良好”地支持 gzip。不仅浏览器可以识别，而且各大“爬虫”也同样可以识别，各位seoer可以放下心了。而且gzip的压缩比例非常大，一般压缩率为85%，就是说服务器端100K的页面可以压缩到25K左右再发送到客户端。具体的Gzip压缩原理大家可以参考csdn上的《gzip压缩算法》这篇文章。雅虎特别强调，所有的文本内容都应该被gzip压缩: html (php), js, css, xml, txt… 这一点我们网站做得不错，是一个A。以前我们的首页也并不是A，因为首页上还有很多广告代码投放的js，这些广告代码拥有者的网站的js没有经过gzip 压缩，也会拖累我们网站。

以上三点大多属于服务器端的内容，本人也是粗浅地了解而已。说得不对的地方有待各位指正。

第五条、将css放在页面最上面 ( Put Stylesheets at the Top)

将css放在页面最上面，这是为什么?因为 ie，firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。理由诚如小马哥说得那样很简单。css，全称Cascading Style Sheets (层叠样式表单)。层叠即意味这后面的css可以覆盖前面的css，级别高的css可以覆盖级别低的css。在[css之!important] 这篇文章的最下面曾简单地提到过这层级关系，这里我们只需要知道css可以被覆盖的。既然前面的可以被覆盖，浏览器在他完全加载完毕之后再去渲染无疑也是合情合理的很多浏览器下，如IE，把样式表放在页面的底部的问题在于它禁止了网页内容的顺序显示。浏览器阻止显示以免重画页面元素，那用户只能看到空白页了。Firefox不会阻止显示，但这意味着当样式表下载后，有些页面元素可能需要重画，这导致闪烁问题。所以我们应该尽快让css加载完毕

顺着这层意思，如果我们再细究的话，其实还有可以优化的地方。比如本站上面包含的两个css文件，<linkrel=“stylesheet” rev=“stylesheet”href=“http://www.space007.com/themes/google/style/google.css” type=“text/css” media=“screen”/> 和<link rel=“stylesheet” rev=“stylesheet” href=“http://www.space007.com/css/print.css”type=“text/css” media=“print” />。从media就可以看出第一个css是针对浏览器的，第二个css文件是针对打印样式的。从用户的行为习惯上来将，要打印页面的动作一定是发生在页面页面显示出来之后的。所以比较好的方法应该是在页面加载完毕之后再动态地为这张页面加上针对打印设备的css，这样又可以提高一点速度。(哈哈)

第六条、将script放在页面最下面 (Put Scripts at the Bottom )

将脚本放在页面最下面的目的有那么两点： 1、因为防止script脚本的执行阻塞页面的下载。在页面loading的过程中，当浏览器读到js执行语句的时候一定会把它全部解释完毕后在会接下来读下面的内容。不信你可以写一个js死循环看看页面下面的东西还会不会出来。(setTimeout 和 setInterval的执行有点类似于多线程，在相应的响应时间之前也会继续下面的内容渲染。)浏览器这么做的逻辑是因为js随时可能执行 location.href或是其他可能完全中断此页面过程的函数，即如此，当然得等他执行完毕之后再加载咯。所以放在页面最后，可以有效减少页面可视元素的加载时间。 2、脚本引起的第二个问题是它阻塞并行下载数量。HTTP/1.1规范建议浏览器每个主机的并行下载数不超过2个(IE只能为2个，其他浏览器如ff等都是默认设置为2个，不过新出的ie8可以达6个)。因此如果您把图像文件分布到多台机器的话，您可以达到超过2个的并行下载。但是当脚本文件下载时，浏览器不会启动其他的并行下载。

当然对各个网站来说，把脚本都放到页面底部加载的可行性还是值得商榷的。就比如阿里巴巴中文站的页面。很多地方有内联的js，页面的显示严重依赖于此，我承认这和无侵入脚本的理念相差甚远，但是很多“历史遗留问题”却不是那么容易解决的。

第七条、避免在CSS中使用Expressions (Avoid CSS Expressions )

不过这样就多了两层无意义的嵌套，肯定不好。还需要一个更好的办法。

第八条、把javascript和css都放到外部文件中 (Make JavaScript and CSS External )

这点我想还是很容易理解的。不仅从性能优化上会这么做，用代码易于维护的角度看也应该这么做。把css和js写在页面内容可以减少2次请求，但也增大了页面的大小。如果已经对css和js做了缓存，那也就没有2次多余的http请求了。当然，我在前面中也说过，有些特殊的页面开发人员还是会选择内联的css和js文件。

第九条、减少DNS查询 (Reduce DNS Lookups)

在 Internet上域名与IP地址之间是一一对应的，域名(kuqin.com)很好记，但计算机不认识，计算机之间的“相认”还要转成ip地址。在网络上每台计算机都对应有一个独立的ip地址。在域名和ip地址之间的转换工作称为域名解析，也称DNS查询。一次DNS的解析过程会消耗20-120毫秒的时间,在dns查询结束之前，浏览器不会下载该域名下的任何东西。所以减少dns查询的时间可以加快页面的加载速度。yahoo的建议一个页面所包含的域名数尽量控制在2-4个。这就需要对页面整体有一个很好的规划。目前我们这点做的不好，很多打点的广告投放系统拖累了我们。

第十条、压缩 JavaScript 和 CSS (Minify JavaScript )

压缩js和css的左右很显然，减少页面字节数。容量小页面加载速度自然也就快。而且压缩除了减少体积以外还可以起到一定的保护左右。这点我们做得不错。常用的压缩工具有JsMin、YUI compressor等。另外像http://dean.edwards.name/packer/还给我们提供了一个非常方便的在线压缩工具。你可以在 jQuery的网页看到压缩过的js文件和没有压缩过的js文件的容量差别：

性能优化2

当然，压缩带来的一个弊端就是代码的可读性没了。相信很多做前端的朋友都遇到过这个问题：看Google的效果很酷，可是去看他的源代码却是一大堆挤在一起的字符，连函数名都是替换过的，汗死!自己的代码也这样岂不是对维护非常不方便。所有阿里巴巴中文站目前采用的做法是在js和css发布的时候在服务器端进行压缩。这样在我们很方便地维护自己的代码。

第十一条、避免重定向 (Avoid Redirects )

不久前在ieblog上看到过《Internet Explorer and Connection Limits》这篇文章，比如当你输入http://www.kuqin.com/ 的时候服务器会自动产生一个301服务器转向 http://www.kuqin.com/ ，你看浏览器的地址栏就能看出来。这种重定向自然也是需要消耗时间的。当然这只是一个例子，发生重定向的原因还有很多，但是不变的是每增加一次重定向就会增加一次web请求，所以因该尽量减少。

第十二条、移除重复的脚本 (Remove Duplicate Scripts )

这点我想不说也知道，不仅是从性能上考虑，代码规范上看也是这样。但是不得不承认，很多时候我们会因为图一时之快而加上一些或许是重复的代码。或许一个统一的css框架和js框架可以比较好的解决我们的问题。小猪的观点很对，不仅是要做到不重复，更是要做到可重用。

第十三条、配置实体标签(ETags) (Configure ETags )

这点我也不懂，呵呵。在inforQ上找到一篇解释得比较详细的说明《使用ETags减少Web应用带宽和负载》，有兴趣的同学可以去看看。

第十四条、使 AJAX 缓存 (Make Ajax Cacheable )

ajax还要去缓存?做ajax请求的时候往往还要增加一个时间戳去避免他缓存。It’s important to remember that “asynchronous” does not imply “instantaneous”.(记住“异步”不是“瞬间”这一点很重要)。记住，即使AJAX是动态产生的而且只对一个用户起作用，他们依然可以被缓存。

1.减少HTTP请求次数

合并图片、CSS、JS，改进首次访问用户等待时间。

2.使用CDN

就近缓存==>智能路由==>负载均衡==>WSA全站动态加速

3.避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。测试

4.为文件头指定Expires

使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。

5.使用gzip压缩内容

压缩任何一个文本类型的响应，包括XML和JSON，都是值得的。

6.把CSS放到顶部

7.把JS放到底部

防止js加载对之后资源造成阻塞。

8.避免使用CSS表达式

9.将CSS和JS放到外部文件中

目的是缓存，但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。

10.权衡DNS查找次数

减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。

11.精简CSS和JS

12.避免跳转

同域：注意避免反斜杠 “/” 的跳转；

跨域：使用Alias或者mod_rewirte建立CNAME（保存域名与域名之间关系的DNS记录）

13.删除重复的JS和CSS

重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。

14.配置ETags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和 Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载

15.可缓存的AJAX

“异步”并不意味着“即时”：Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。

16.使用GET来完成AJAX请求

当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。

17.减少DOM元素数量

是否存在一个是更贴切的标签可以使用？标签语义化，避免滥用无意义标签

18.避免404

有些站点把404错误响应页面改为“你是不是要找***”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。

19.减少Cookie的大小

20.使用无cookie的域

比如图片 CSS 等，Yahoo! 的静态文件都在 yimg.com 上，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名 (yahoo.com) 的影响。

21.不要使用滤镜

png24的在IE6半透明那种东西，别乱使，淡定的切成PNG8+jpg

22.不要在HTML中缩放图片

23.缩小favicon.ico并缓存

<link href="/favicon.ico" rel="Shortcut Icon" type="image/x-icon">

转载请注明原地址，冼国基的博客：https://xianguoji.github.io 谢谢！

调用百度地图插件-更新

Mon, 15 May 2017 00:00:00 +0000

调用百度地图插件,常用技术

创建地图： var map = new BMap.Map("divid");

创建坐标点：var point = new BMap.Point("经度","纬度");

设置视图中心点：map.centerAndZoom(point,size);

激活滚轮调整大小功能：map.enableScrollWheelZoom();

添加控件：map.addControl(new BMap.Xxx());

添加覆盖物：map.addOverlay();

控件介绍

NavigationControl：缩放地图的控件，默认在左上角；

OverviewMapControl：地图的缩略图的控件，默认在右下方；

ScaleControl：地图显示比例的控件，默认在左下方；

MapTypeControl：地图类型控件，默认在右上方；

代码示例：

```
<html>
	<head>
		<!--引用百度地图-->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
		</script>
		<title>
			控件使用
		</title>
				<!--
		设计样式
			container容器：占50%大小
		-->
		<style type="text/css">
		#container{
			width:50%;
			height:50%;
		}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript">
			var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性;
			var point = new BMap.Point(500,500);//定位
			map.centerAndZoom(point,15);				//将point移到浏览器中心，并且地图大小调整为15;
			map.addControl(new BMap.NavigationControl());
			map.addControl(new BMap.MapTypeControl());
			map.addControl(new BMap.ScaleControl());
			map.addControl(new BMap.OverviewMapControl());
		</script>
	</body>
</html>
```

标注：Marker

 百度地图API学习总结

(1)在point处添加标注：var marker = new BMap.Marker(point);

(2)添加覆盖物：map.addOverlay(marker);

(3)激活标注的拖拽功能：marker.enableDragging();

(4)为标注添加事件：marker.addEventListener("名称",function(){

    //点击标注后的事件

});

(5)删除覆盖物：map.removeOverlay(marker);

(6)销毁标注：marker.dispose();

信息窗口：InfoWindow

(1)在某个特定的位置创建一个信息窗口：var infowindow = new BMap.InfoWindow(“内容”,{width:250,height:100,title:”hello”});

(2)在地图中央打开信息窗口：map.openInfoWindow(infoWindow,map.getCenter());

完整代码

  <!DOCTYPE html>
  <html>

  <head>
      <meta charset="UTF-8">
      <title></title>
      <!--地图 -->
          <script src="https://api.map.baidu.com/api?v=2.0&ak=GW0UPwBKw1aCl983mr4WFLCcBn8u18Az&s=1" type="text/javascript" charset="utf-8"></script>
       <!--地图 -->
      <style type="text/css">
          * {
              margin: 0;
              padding: 0;
          }

          html,
          body {
              width: 100%;
              height: 100%;
              position: relative;
          }

          h3 {
              display: block;
              width: 100%;
              height: 60px;
              line-height: 60px;
              text-align: center;
              background: aquamarine;
              color: #fff;
              font-size: 40px;
          }

      </style>
  </head>

  <body>
  <h3>我的地图</h3>
  <div id="baiduMap" style="width:100%;margin-top: 51px;"></div>
  <script>
      var map = new BMap.Map("baiduMap");
      map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
      map.addControl(new BMap.NavigationControl());   //添加左上地图缩放控件
  //        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      var point = new BMap.Point(113.305679,23.104074);//定位
      map.centerAndZoom(point,15);//将point移到浏览器中心，并且地图大小调整为15;
      var marker = new BMap.Marker(point);// 创建标注
      map.addOverlay(marker);// 将标注添加到地图中

      var opts = {
          width : 200,     // 信息窗口宽度
          height: 50,     // 信息窗口高度
          title : "Hello"  // 信息窗口标题
      }
      var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象
      marker.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
      marker.addEventListener("click",function(){
          //点击标注后的事件
          marker.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
      });

  </script>
  </body>

  </html>

转载请注明原地址，冼国基的博客：https://xianguoji.github.io 谢谢！

vue搭建项目

Sun, 23 Apr 2017 00:00:00 +0000

Vue推荐开发环境

Node.js 6.2.0、npm 3.8.9、webpack 1.13、vue-cli 2.5.1、webstrom2016

现在开始安装环境

安装nodejs

可以在终端里下载，但是不推荐，npm的版本会报错

去nodejs官网下载即可，地址：http://nodejs.cn/中文网

安装vue淘宝镜像

npm install -g vue –registry=https://registry.npm.taobao.org

安装webpack

npm install webpack -g

安装vue脚手架

npm install vue-cli -g

—————-如果第二次编写新的vue项目，就可以在这里开始了—————–

根据模板创建项目

vue init webpack 项目名字<项目名字不能用中文>

会有一些初始化的设置，如下输入:

Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)

Project name (vue-test) 直接回车默认

Project description (A Vue.js project) 直接回车默认

Author 直接回车默认

? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific
HTML) are ONLY allowed in .vue files - render functions are required elsewhere  直接回车默认

? Install vue-router? (Y/n)  是否安装vue-router y 安装 （可新建好项目后手动安装）

Use ESLint to lint your code? n  是否启动语法报错（建议不启动）

pick an eslint preset. 默认Standard

setup unit tests with karma + mocha?No(单元测试不需要)

setup e2e tests with Nightwatch?No(单元测试不需要)

进入项目

cd 项目名字

安装项目依赖

npm install

安装 vue 路由模块vue-router和网络请求模块vue-resource –save-dev 是你开发时候依赖的东西，–save 是你发布之后还依赖的东西（如果在初始化设置已经安装了可省略）

npm install vue-router vue-resource –save

启动项目

npm run dev

发布项目（打包项目，会在目录多出一个build目录为项目打包好的项目，直接放到服务器就可以）

npm run build

转载请注明原地址，冼国基的博客：https://xianguoji.github.io 谢谢！

调用百度地图插件

Fri, 21 Apr 2017 00:00:00 +0000

　　# 调用百度地图插件

### 引入百度地图插件 <script src="http://api.map.baidu.com/api?v=2.0&ak=W1a6ywZFkybedSCHadpRbkz4w5HYfG4R" type="text/javascript" charset="utf-8"></script>

### 完整代码

  <!DOCTYPE html>
  <html>

  <head>
      <meta charset="UTF-8">
      <title></title>
      <script src="http://api.map.baidu.com/api?v=2.0&ak=W1a6ywZFkybedSCHadpRbkz4w5HYfG4R" type="text/javascript" charset="utf-8"></script>
      <style type="text/css">
          * {
              margin: 0;
              padding: 0;
          }

          html,
          body {
              width: 100%;
              height: 100%;
              position: relative;
          }

          h3 {
              display: block;
              width: 100%;
              height: 60px;
              line-height: 60px;
              text-align: center;
              background: aquamarine;
              color: #fff;
              font-size: 40px;
          }

          #allmap {
              width: 100%;
              height: 700px;
          }
          #r-result{
              position: absolute;
              left: 0;
              top: 100px;
              background: #000;
              color: #fff;
          }
      </style>
  </head>

  <body>
  <h3>我的地图</h3>
  <div id="allmap"></div>
  <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
  <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
  <script type="text/javascript">
      var map = new BMap.Map("allmap");
      map.centerAndZoom("广州", 15); // 初始化地图,设置中心点坐标和地图级别
      map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
      map.setCurrentCity("广州"); // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      function G(id) {
          return document.getElementById(id);
      }
      var ac = new BMap.Autocomplete( //建立一个自动完成的对象
              {
                  "input": "suggestId",
                  "location": map
              });

      ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
          var str = "";
          var _value = e.fromitem.value;
          var value = "";
          if(e.fromitem.index > -1) {
              value = _value.province + _value.city + _value.district + _value.street + _value.business;
          }
          str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

          value = "";
          if(e.toitem.index > -1) {
              _value = e.toitem.value;
              value = _value.province + _value.city + _value.district + _value.street + _value.business;
          }
          str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
          G("searchResultPanel").innerHTML = str;
      });

      var myValue;
      ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
          var _value = e.item.value;
          myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
          G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

          setPlace();
      });

      function setPlace() {
          map.clearOverlays(); //清除地图上所有覆盖物
          function myFun() {
              var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
              map.centerAndZoom(pp, 18);
              map.addOverlay(new BMap.Marker(pp)); //添加标注
          }
          var local = new BMap.LocalSearch(map, { //智能搜索
              onSearchComplete: myFun
          });
          local.search(myValue);
      }
  </script>

  </body>

  </html>

### 转载请注明原地址，冼国基的博客：https://xianguoji.github.io 谢谢！

vue环境配置及创建vue项目

Fri, 21 Apr 2017 00:00:00 +0000

　　# vue环境配置及创建vue项目

安装 node.js

首先需要安装node环境，可以直接到中文官网:http://nodejs.cn/ 下载安装包。

只是这样安装的 node 是固定版本的，如果需要多版本的 node，可以使用 nvm 安装:http://blog.csdn.net/s8460049/article/details/52396399

安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。

安装 vue-cli

安装好了 node，我们可以直接全局安装 vue-cli

npm install -g vue-cli

但是这种安装方式比较慢，推荐使用国内镜像来安装，所以我们先设置 cnpm

npm install -g cnpm –registry=https://registry.npm.taobao.org

如果安装失败，可以使用

npm cache clean

清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存

同样可以使用 cnpm -v 查看是否安装成功

然后使用 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack

安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

如果提示“无法识别 ‘vue’ ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本

创建vue项目

vue init webpack 项目名称

然后会出现一些简单的配置

? Project name (zlejvue)

? Project name zlejvue

? Project description (A Vue.js project)

? Project description A Vue.js project

? Author

? Vue build (Use arrow keys)

? Vue build standalone

? Install vue-router? (Y/n)

? Install vue-router? Yes

? Use ESLint to lint your code? (Y/n) n

? Use ESLint to lint your code? No

? Setup unit tests with Karma + Mocha? (Y/n) n

? Setup unit tests with Karma + Mocha? No

? Setup e2e tests with Nightwatch? (Y/n) n

? Setup e2e tests with Nightwatch? No 配置完之后就可以按照他的步骤打开项目

cd zlejvue

npm install

npm run dev

### 转载请注明原地址，冼国基的博客：https://xianguoji.github.io 谢谢！

锤子科技官网banner3D效果

Thu, 20 Apr 2017 00:00:00 +0000

　　# 锤子科技官网banner3D效果

前段时间看到锤子官网的banner3D效果觉得好酷炫，然后就在网上搜了一下实现方法，发现还真有。我就借鉴了他的demo来自己写了一个简单背景变换的demo，因为没有做过渡效果，没官网好看，还算凑合，可以看效果

这是锤子官网效果，可以自行去看看：http://www.smartisan.com/#/home

附上代码：

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8"/>
      <style>


          section {
              margin: auto;
              width: 1000px;
              height: 500px;
              margin-top: 100px;
          }

          .cover {
              width: 100%;
              height: 100%;
              border-radius: 10px;
              background-color: #5e5e5e;
          }

          /*transform*/
          section {
              position: relative;
              perspective: 2000px;
          }

          .cover {
              transform-origin: 50% 50% 0;
          }

      </style>
  </head>
  <body>
  <section>
      <div class="cover">
      </div>
  </section>
  <script>
      var origin = {
          X: document.body.clientWidth / 2,
          Y: document.body.clientHeight / 2
      };
      var o = document.querySelector('.cover');
      document.querySelector('section').onmouseover=function(){
          document.querySelector('section').addEventListener('mousemove', function (e) {
              var rotate = {x: 1 - e.pageY / origin.Y, y: e.pageX / origin.X - 1};
              var transform = "rotateX(" + rotate.x *10 + "deg) rotateY(" + rotate.y * 10 + "deg)";  //变换效果
              o.style.transform = transform;
              o.style.boxShadow = -parseInt(rotate.y * 30) + 'px '+ parseInt(rotate.x * 20+20)+ 'px ' + '50px #333';  //边框阴影效果
          });
      };
      document.querySelector('section').onmouseout=function(){
              o.style.transform ="rotateX(0deg) rotateY(0deg)";
          o.style.boxShadow ='0px 0px';
      }

  </script>
  </body>
  </html>

### 转载请注明原地址，冼国基的博客：https://xianguoji.github.io 谢谢！

Linux平台安装图像化桌面CentOS 7

Thu, 20 Apr 2017 00:00:00 +0000

Linux平台安装图像化桌面CentOS 7

###安装操作系统本项目需要部署在Linux平台下。建议使用CentOS 7。如果事前已经安装了操作系统，请跳过此章节。本文假定读者具备Linux图形界面的使用能力。

启动服务器，插入系统安装光盘或U盘，并在BIOS中设置以光盘或U盘启动（视具体场合下的安装介质而定）。
启动后，进入如同下图的画面，利用键盘的方向键选择第一项“Install CentOS 7”，等待片刻后进入安装画面。

进入CentOS7安装程序。第一个画面是选择要安装的系统的语言。接下来的截图选择的是简体中文（中国）。选择后，按【继续】进入下一步的安装概况画面。
点击【日期与时间】，进入系统时间设置。

确认系统时区、日期与时间是否正确。完成确认或修改后，点击【完成】按钮返回安装概况。

回到安装概况画面后，点击【安装位置】，选择安装目的地。

设置硬盘分区。一般而言，选择第一个本地磁盘，然后分区选项选择【自动配置分区】即可。如果有需要，也可以自定义分区大小等数据。完成配置后点击“完成”按钮即可。
完成分区选择与配置后，回到安装概况画面，点击【软件选择】。
在软件选择画面中，从左边栏找到【带GUI的服务器】，然后在右边栏找到【KDE】、【MariaDB数据库服务器】、【开发工具】，勾选这三个工具，然后点击“完成”。
回到安装概况画面，点击右下角的【开始安装】按钮进入下一个环节。
安装程序正在把文件复制到磁盘上。此时，用户可以配置root账号密码，以及添加更多用户账号。先点击【ROOT 密码】设置root密码。
在ROOT密码画面中，设置root账户密码，然后点击“完成”。
为了确保安全，一般建议系统管理员再设置另一个管理专用的账号，而不是直接使用root账号进行操作。点击【创建用户】可创建新的账户。记得勾选【将此用户做为管理员】选项。

当系统文件复制、解压完毕后，安装程序会自动重启电脑，进入命令行界面。此时系统已安装完毕。
启动系统后进入登录界面，系统默认登录界面是新创建的管理员账户，输入密码登录。

如需用root账户登录，点击“未列出？”，输入root账户用户名、密码进行登录。

登录后，系统界面。

###配置软件环境在配置网络环境之前，请先通过ping命令，确认当前服务器是否可以访问互联网。 ping www.baidu.com

如果互联网已经接通，就可以执行下一步操作了。否则，请向网络管理相关人员寻求协助。

2.1安装JDK 在终端下运行以下命令安装或升级JDK 1.7.0： sudo yum install java-1.7.0-openjdk

此时输入“y”，系统将自动完成安装。以下其他软件的安装方式也是类似，不再重复。

2.2安装Tomcat 在终端下按顺序运行以下命令，安装或升级Tomcat sudo yum install tomcat sudo yum install tomcat-webapps tomcat-admin-webapps

完成软件安装后，到以下路径，设置tomcat管理页面的账号密码： /etc/tomcat/tomcat-users.xml

jsonp跨域请求

Sun, 12 Mar 2017 00:00:00 +0000

跨域一词从字面意思看，就是跨域名嘛，但实际上跨域的范围绝对不止那么狭隘。具体概念如下：只要协议、域名、端口有任何一个不同，都被当作是不同的域。之所以会产生跨域这个问题呢，其实也很容易想明白，要是随便引用外部文件，不同标签下的页面引用类似的彼此的文件，浏览器很容易懵逼的，安全也得不到保障了就。什么事，都是安全第一嘛。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。所以我们要通过一些方法使本域的js能够操作其他域的页面对象或者使其他域的js能操作本域的页面对象（iframe之间）。下面是具体的跨域情况详解：

URL 说明是否允许通信

http://www.a.com/a.js

http://www.a.com/b.js 同一域名下允许

http://www.a.com/lab/a.js

http://www.a.com/script/b.js 同一域名下不同文件夹允许

http://www.a.com:8000/a.js

http://www.a.com/b.js 同一域名，不同端口不允许

http://www.a.com/a.js

https://www.a.com/b.js 同一域名，不同协议不允许

http://www.a.com/a.js

http://70.32.92.74/b.js 域名和域名对应ip 不允许

http://www.a.com/a.js

http://script.a.com/b.js 主域相同，子域不同不允许（cookie这种情况下也不允许访问）

http://www.a.com/a.js

http://a.com/b.js 同一域名，不同二级域名（同上）不允许（cookie这种情况下也不允许访问）

http://www.cnblogs.com/a.js

http://www.a.com/b.js 不同域名不允许

跨域请求有6种

1.通过document.domain跨域

2.通过location.hash跨域

3.通过HTML5的postMessage方法跨域

4.通过jsonp跨域

5.通过CORS跨域

6.通过window.name跨域

我们详细说第4，5种，jsonp跨域和CORS跨域。

通过jsonp跨域

这几种都是双向通信的，即两个iframe，页面与iframe或是页面与页面之间的，下面说几种单项跨域的（一般用来获取数据），因为通过script标签引入的js是不受同源策略的限制的。所以我们可以通过script标签引入一个js或者是一个其他后缀形式（如php，jsp等）的文件，此文件返回一个js函数的调用。

比如，有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是http://damonare.cn/data.php,那么a.html中的代码就可以这样：

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

我们看到获取数据的地址后面还有一个callback参数，按惯例是用这个参数名，但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的，就得按照提供数据的那一方的规定格式来操作了。

因为是当做一个js文件来引入的，所以http://damonare.cn/data.php返回的必须是一个能执行的js文件，所以这个页面的php代码可能是这样的(一定要和后端约定好哦):

<?php
$callback = $_GET['callback'];//得到回调函数名
$data = array('a','b','c');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>

最终，输出结果为：

dosomething([‘a’,’b’,’c’]);

如果你的页面使用jquery，那么通过它封装的方法就能很方便的来进行jsonp操作了。

jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

JSONP的优缺点

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

CORS跨域

CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

平时的ajax请求可能是这样的:

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/damonare",true);
    xhr.send();
</script>

以上damonare部分是相对路径，如果我们要使用CORS，相关Ajax代码可能如下所示：

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("￼GET", "http://segmentfault.com/u/trigkit4/",true);
    xhr.send();
</script>

代码与之前的区别就在于相对路径换成了其他域的绝对路径，也就是你要跨域访问的接口地址。

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。关于CORS更多了解可以看下阮一峰老师的这一篇文章：跨域资源共享 CORS 详解

CORS和JSONP对比

JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS）。

CORS与JSONP相比，无疑更为先进、方便和可靠。

转载请注明原地址，冼国基的博客：https://xianguoji.github.io 谢谢！

Rem自适应js 优化flexible.js

Sun, 12 Mar 2017 00:00:00 +0000

基于阿里的一个库：lib-flexible.js，里面有一些东西方法和自定义不需要用到的，所以做了一个精简版的，另外还修复了UC浏览器竖屏与横屏转换的BUG。

js代码

//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth, maxWidth) {
	var doc = document,
	win = window,
	docEl = doc.documentElement,
	remStyle = document.createElement("style"),
	tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		maxWidth = maxWidth || 540;
		width>maxWidth && (width=maxWidth);
		var rem = width * 100 / designWidth;
		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
	}

	if (docEl.firstElementChild) {
		docEl.firstElementChild.appendChild(remStyle);
	} else {
		var wrap = doc.createElement("div");
		wrap.appendChild(remStyle);
		doc.write(wrap.innerHTML);
		wrap = null;
	}
	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
	refreshRem();

	win.addEventListener("resize", function() {
		clearTimeout(tid); //防止执行两次
		tid = setTimeout(refreshRem, 300);
	}, false);

	win.addEventListener("pageshow", function(e) {
		if (e.persisted) { // 浏览器后退的时候重新计算
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);

	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded", function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(750, 750);

使用方法：

1.复制上面这段代码到你的页面的头部的script标签的最前面。

2.根据设计稿大小，调整里面的最后两个参数值。

3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px300px,换算成rem则为1rem3rem。

该代码版本区别于手淘的rem换算方法。使用的是1rem=100px的换算。

假如你有一个块是.box{width:120px;height:80px;} 转为rem则为.box{width:1.2rem; height:.8rem;}

基本的HTML模板

你也可以直接复制下面这个基础的HTML模板。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="description" content="不超过150个字符"/>
<meta name="keywords" content=""/>
<meta content="caibaojian" name="author"/>
<title>前端开发博客</title>
<link rel="stylesheet" href="base.css">
<script type="text/javascript">
//引入该flexible.min.js
!function(e,t){function n(){var n=l.getBoundingClientRect().width;t=t||540,n>t&&(n=t);var i=100*n/e;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}(750,750);
</script>
</head>

<body>
	<!-- 正文 -->
</body>
</html>

base.css

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
body{line-height:1.5; font-size:14px;}
body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;}
b,strong{font-weight:bold;}
i,em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
table th,table td{border:1px solid #ddd;padding:5px;}
table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
img{border:0 none;width:auto\9;max-width:100%;vertical-align:top; height:auto;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
input:focus{outline:none;}
select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video,progress{display:inline-block;}
body{background:#fff;}
input::-webkit-input-speech-button {display: none}
button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

再次强调一下：

需要根据你的设计稿的大小来调整脚本最后的两个参数。

})(750, 750);

第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整

第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。

文章转自-链接:http://caibaojian.com/simple-flexible.html

转载请注明原地址，冼国基的博客：https://xianguoji.github.io 谢谢！

网站上实现qq聊天，网站绑定微信登录

Thu, 23 Feb 2017 00:00:00 +0000

QQ在线聊天的功能是怎么实现的？

网站的微信扫码登录和qq在线聊天是需要我们这边去申请和认证的，初来乍到经理就让我弄这些着实吓着我了，宝宝啥都不知道啊。但是要强的宝宝没有告诉经理我不会，只有硬着头皮去求度娘（度娘有时候也会任性一下让你找好久才能找到你想要的–其实是我太笨）

其实很简单,打开下面这个链接，登录公司的QQ号，点击“推广工具”，把里面的代码复制给程序员，加到网站上就好了。

http://shang.qq.com/v3/widget.html

是不是很简单，是也不要笑话我，毕竟我当时完全不知道这是什么情况，一直纠结“为什么QQ在线聊天和QQ推广有关系，嗯纠结太久，后来发现就是这个”

网站绑定微信登录是怎么实现的

这个功能其实也很简单，关键也是当时完全不知道入口是哪里，其实就是以公司名义注册一个“微信开放平台”，我是用公司QQ登录的，在“管理中心”把“AppID和

AppSecret”给开发者就好，当然技术上的就没办法给大家分享了，我也不会啊emoticon（装逼失败）

https://open.weixin.qq.com/cgi-bin/index?t=home/index&lang=zh_CN&token=55068190a341700ecf6725cdef50786b4b7b9737&appid=wxb3f9e53518e3011e

这些工作在去年11月份做的，网站上线后我做的更多的工作是APP功能规划，和寻找更好的外包方合作（可以想到坏人都让我给做了，后面公司选择哪个剩下的我都觉得好抱歉，沟通那么久，哎……）其实工作中我学会更多是沟通技巧，和工作方式，以及工作总结，以前和外包方对接工作时，这边在大声的骂娘，那边还要好声好气的和她们沟通，我的暴脾气……后来休假时出去走走，想想这么做也不是个办法，自己生气问题还很难解决，所以回去后彻底改变态度，真的是心平气和的和他们对接工作，也发现自己后时候的表达方式有问题，别人可能不理解我的意思，果然现在的工作对接的都很顺畅。不过我的各种修改需求也让他们很崩溃吧，虽然能理解，但是我更多的还是要为公司利益着想，不能太个人感情化。

tillbest.com这是我们公司的官网，不是很好看（我们选图有点问题可能），但是比刚刚上线那会要在功能上要好很多，大家有意愿的可以去看看。

嗯还是很怀念以前前端网陪我学习的日子，小伙伴们加油。

转载请注明原地址，冼国基的博客：https://xianguoji.github.io 谢谢！

冼国基的博客

前端性能优化一

可以在firefox下有一个插件yslow，集成在firebug中，你可以用它很方便地来看看自己的网站的各种优化性能。

第一条、尽可能的减少 HTTP 的请求数 (Make Fewer HTTP Requests )

第二条、使用CDN(内容分发网络): Use a Content Delivery Network

第三条、 添加Expire/Cache-Control 头：Add an Expires Header

第四条、启用Gzip压缩：Gzip Components

第五条、将css放在页面最上面 ( Put Stylesheets at the Top)

第六条、将script放在页面最下面 (Put Scripts at the Bottom )

第七条、避免在CSS中使用Expressions (Avoid CSS Expressions )

第八条、把javascript和css都放到外部文件中 (Make JavaScript and CSS External )

第九条、减少DNS查询 (Reduce DNS Lookups)

第十条、压缩 JavaScript 和 CSS (Minify JavaScript )

第十一条、避免重定向 (Avoid Redirects )

第十二条、移除重复的脚本 (Remove Duplicate Scripts )

第十三条、配置实体标签(ETags) (Configure ETags )

第十四条、使 AJAX 缓存 (Make Ajax Cacheable )

1.减少HTTP请求次数

2.使用CDN

3.避免空的src和href

4.为文件头指定Expires

5.使用gzip压缩内容

6.把CSS放到顶部

7.把JS放到底部

8.避免使用CSS表达式

9.将CSS和JS放到外部文件中

10.权衡DNS查找次数

11.精简CSS和JS

12.避免跳转

13.删除重复的JS和CSS

14.配置ETags

15.可缓存的AJAX

16.使用GET来完成AJAX请求

17.减少DOM元素数量

18.避免404

19.减少Cookie的大小

20.使用无cookie的域

21.不要使用滤镜

22.不要在HTML中缩放图片

23.缩小favicon.ico并缓存

调用百度地图插件-更新

调用百度地图插件,常用技术

控件介绍

代码示例：

标注：Marker

信息窗口：InfoWindow

完整代码

vue搭建项目

Vue推荐开发环境

安装nodejs

安装vue淘宝镜像

安装webpack

安装vue脚手架

根据模板创建项目

会有一些初始化的设置，如下输入:

进入项目

安装项目依赖

安装 vue 路由模块vue-router和网络请求模块vue-resource –save-dev 是你开发时候依赖的东西，–save 是你发布之后还依赖的东西（如果在初始化设置已经安装了可省略）

启动项目

发布项目（打包项目，会在目录多出一个build目录为项目打包好的项目，直接放到服务器就可以）

调用百度地图插件

vue环境配置及创建vue项目

安装 node.js

安装 vue-cli

创建vue项目

锤子科技官网banner3D效果

Linux平台安装图像化桌面CentOS 7

Linux平台安装图像化桌面CentOS 7

jsonp跨域请求

跨域请求有6种

我们详细说第4，5种，jsonp跨域和CORS跨域。

通过jsonp跨域

JSONP的优缺点

CORS跨域

CORS和JSONP对比

Rem自适应js 优化flexible.js

js代码

使用方法：

1.复制上面这段代码到你的页面的头部的script标签的最前面。

2.根据设计稿大小，调整里面的最后两个参数值。

第三条、添加Expire/Cache-Control 头：Add an Expires Header