为什么使用 HtmlWebpackPlugin
使用webpack命令打包，默认是不能生成html文件的，我以前的解决方法，就是在webpack output的目录中，添加一个index.html文件，index.html文件的内容如下：
!DOCTYPE html
html lang="zh-cn"
head
title 首页 /title
meta charset="utf-8"
meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"
2020年开始，本模块貌似要停止维护了 https://github.com/request/request，node.js 的http模块就已经很好了。这篇就先介绍一个Node.js的模块——request。有了这个模块，http请求变的超简单。var request = require('request');
request('http://www.google.com', function (error, response, body) {
if (!error && response.statusCode == 200) {
console.log(b
编写爬虫时，需要HTMLParser解析HTML，HTML本质上是XML的子集，但是HTML的语法没有XML那么严格，所以不能用标准的DOM或SAX来解析HTML。现在流行很多解析器，综合一下比较看好 cheerio 和 jsdom。 cheerio简单好用速度快，JSDOM的目标是提供一个我们在浏览器里面看到的相同的 DOM 环境。支持最新的javascript选择器。 安装npm install cheerio HTML示例 ul id=“fruits”
li class=“apple” Apple /li
li class=“orange” Orange /li
// 加载http模块
var http = require('http');
// Cheerio 是一个Node.js的库， 它可以从html的片断中构建DOM结构，然后提供像jquery一样的css选择器查询
var cheerio = require('cheerio');
// 定义爬虫的目标地址
var url = 'http://www.imooc.com/learn/348';
http.get(url, function (res) {
var html = '';
// 获取页面数据
res.on('data', function (d
CSS Reset 是革命党，CSS Reset 里最激进那一派提倡不管你小子有用没用，通通给我脱了那身衣服，凭什么你 body 出生就穿一圈 margin，凭什么你姓 h 的比别人吃得胖，凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动，把人家全拍扁了。看似是众生平等了，实则是浪费了资源又占不到便宜，有求于人家的时候还得贱贱地给加回去，实在需要人家的默认样式了怎么办？人家锅都扔炉子里烧了，自己看着办吧。
Normalize.css 是改良派。他们提倡，各个元素都有其存在的道理，简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间，那就改掉。士农工商，
将图片文件转换为base64编码并载入浏览器能够减少http请求数，但是增大了js或html文件的体积，如果图片在项目中的重用度较高，那么每处引用都会生成base64编码，造成了代码的冗余。通过http请求载入到浏览器的文件可以缓存到本地，当图片在项目中的重用度较高时，会为图片的访问增加缓存的便利性，下次访问更快。因此要平衡考虑。
Install
npm install --save-dev url-loader
Usage
url loader与file loader的工作方式相似，但如果文件的体积比byte limit小，就能返回Data Url。
需要用一个查询参数（qu
一，删除Node.js的方法卸载node 依次在终端执行下面的脚本sudo npm uninstall npm -g
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
sudo rm -rf /usr/local/include/node /Users/$USER/.npm
sudo rm /usr/local/bin/node
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/
前两种方法需要设置路由history模式，后两种方法貌似更合适。
方法一：
1.在router.js里面（即路由文件中），此时模式为 history
const router = new VueRouter({
mode: 'history',
routes,
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
if (from.meta.keepAlive) {
实现难点
如何判断切换路由时是前进还是后退
每次向左向右切换动画如何实现
解决方案
我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画.
router/index.js
import VueRouter from 'vue-router'
import Home from '../components/home/home'
import User from '../components/user/user'
var router = new VueRouter({
routes
CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。
实现方法：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
效果如图：
但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。
接下来重点说一说多行文本溢出显示省略号，如下。
实现方法：
display: -webkit-box;
-webkit
Audio对象的属性
属性
描述
audio.volume
(读/写) 音量
audio.src
(读/写) 歌曲地址
audio.currentTime
(读/写) 歌曲当前已播放时长
audio.duration
(读) 歌曲的总长度
audio.paused
(读) 布尔类型 是否处于暂停状态
audio.ended
(读) 布尔类型 歌曲是否已经播放完毕
Audio对象的方法
方法
描述
audio.play()
让歌曲开
在Vue组件中，使用.foo img{max-width:100%}不会生效，解决方法如下：
template
div class="foo"
div v-html="myHtml" /div
/div
/template
style scoped
.foo { height: 300px; }
/style
而如果在组件中使用了v-html，要为myHtml中的标签添加CSS样式，我们需要在写样式的时候添加 ：
.foo img { max-width: 100%; }
这样，编译
大多数情况下，我们都是判断页面滚动到底部，如下：
window.addEventListener('scroll', this.handleScroll);
// 处理滚动到底部的事件
handleScroll(arg) {
var clientHeight = document.documentElement.clientHeight; // 客户区大小
var scrollHeight = document.documentElement.scrollHeight; // 没用滚动条的情况下，元素内容的总高度
var scrollTop
// 时间转换 几分钟 几小时 几天
tools.formatTime = function (timespan) {
var dateTime = new Date(timespan);
var year = dateTime.getFullYear();
var month = dateTime.getMonth() + 1;
var day = dateTime.getDate();
var hour = dateTime.getHours();
var minute = dateTime.getMinutes();
var second
当一个api是GET请求， 地址是http://javascript.net.cn/user/comments
正常的GET请求是没有问题的，但是有时候该GET请求会变成非简单请求。比如：
this.$http({
method: 'GET',
url: '/user/comments',
params: {page:1, object_id:that.article.id, table_name:"portal_post"},
headers: {
'XX-Token': tools.getCookie('token'),
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
本文详细介绍CORS的内部机制。
一、简介
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出
解决方案一，检查Vuex中的数据，没有的话，重新从服务器获取，该方案可以满足存储的简单信息。该方法的好处是比较干净。
mounted: function(){
var that = this;
//如果登录后，刷新了，vuex里的登录数据会清空，这里重新从服务器获取数据
if(tools.getCookie('token') && !this.$store.state.user.user_type){
// 判断不需要重新获取信息的页面
var noNeed = ['/login','/register','/reset'];
在写vue或者react中，有时候目录过深。使用相对路径引入模块，有点容易出错。比如下面这样：
import {tools} from "../../../../../tools";
在webpack.config.js 中，配置如下：
resolve: {
alias: {
'@': require('path').resolve(__dirname, 'src')
}
},
然后就可以在项目中使用绝对路径了。
import {tools} from "@/tools";
那么CSS中的1px是什么？浏览器是怎么渲染它的？网页在一个叫viewport的东西里渲染，可以理解为画布，画布被分成 N x M 个小方格，1个CSS像素，就是其中的一个小方格。一，viewport又是什么？网页在viewport上渲染，可以想像在PS上画东西时，上面也有个画布，这个画布分割了 N x M 个方格，N是它的宽度，M是它的高度。宽高都可以任意设置，所以说viewport是虚拟的。假设设置宽度是400，那么浏览器显示区域的横向将被分为400份，CSS的1px占的宽度就是显示区域的 1/400。viewport值不一样时，对页面元素宽度的影响，比如一个头像宽度是50px。 当vie
物体与观察者的距离远近在静态时通过物体的大小来体现。当物体运动时，通过远近物体不同的运动速度来体现，从而形成层次感。近处的物体运动快，远处的物体运动慢。
手机演示地址：//javascript.net.cn/test/446/#/
代码：
template
div class="viewport"
div class="sence"
div class="sprite sprite-free-right" /div
/div
div class="front-background" /div