bable 安装:

(1):npm install –g babel-cli

(2):npm install  -g  cnpm –registry=https://registry.npm.taobao.org   [国内域]

(3):npm install –save-dev babel-preset-es2015

(4):type nul>.babelrc   [创建]         文件中写入{“presets”:[‘es2015’]}

(5):babel js/es6.js -o js/es5.js   转换

(6):babel js/es6.js -o js/es5.js -w [随时更新]

gulp 安装:

(1): npm install gulp -g          [全局安装]

(2): npm install gulp –save-dev   [安装依赖]

(3): npm install gulp-sass –save-dev  [sass插件]

(4): npm install gulp-connect –save-dev  [插件搭建本地服务]

(5): npm install gulp-concat –save-dev  [合并插件]

(6): npm install gulp-uglify –save-dev  [合并js文件进行压缩]

(7): npm install gulp-rename –save-dev   [保留前后压缩两个文件]

(8): [npm install gulp-sass –save-dev]      npm install gulp-clean-css –save-dev   [压缩css]

(9): npm install gulp-imagemin –save-dev   [对图片进行压缩]

(10):npm install gulp-sourcemaps –save-dev

(11):npm install babel-cli –save-dev

npm install babel-preset-es2015 –save-dev

npm install  gulp-babel  –save-dev      [es6转换es5]

定义:

const gulp = require(‘gulp’);

const sass = require(‘gulp-sass’);

const connect = require(‘gulp-connect’);

const concat = require(‘gulp-concat’);

const uglify = require(‘gulp-uglify’);

const rename = require(‘gulp-rename’);

const cleanCss = require(‘gulp-clean-css’);

const imagemin = require(‘gulp-imagemin’);

const babel = require(‘gulp-babel’);

gulp.task(“server”,function(){

connect.server({

root:”dist”,

livereload:true

})

});

git 分支语句命令:

$ ssh-keygen -t rsa -C “youremail@example.com”   [创建密钥]

$ git config –global user.name “Your Name”

$ git config –global user.email “email@example.com”  [git 是分布式管理系统 所以需要输入名字和email]

$ mkdir learngit    [创建项目]

$ cd learngit       [文件指向]

$ pwd              [显示当前目录]

$ git init          [把目录变成可以管理的仓库]

如果使用Windows系统，为了避免遇到各种莫名其妙的问题，请确保目录名（包括父目录）不包含中文

$ git add xx        [把文件添加到仓库]

$ git commit -m “xx”    [把文件提交到仓库]

$ git reset –hard HEAD  [回退(上一个版本就是HEAD^，上上一个版本就是HEAD^^)]

$ git reset –hard commit id   []

$ git reflog   [记录了你的每一次命令]

$ git checkout — xx  [让文件回到你最后提交的状态]

$ git reset heard HEAD xx    [把暂存区的修改撤销掉]

$ git rm xx  [删除]

$ git status   [仓库的当前状态]

$ git diff xx  [查看改动 (只能在未提交之前使用)]

$ git log      [显示从最近到最远的提交  (提交历史)]   如果眼花缭乱，可以试试加上–pretty=oneline参数

git branch  [查看分支]

git branch  [创建分支]

git checkout  [切换分支]

git checkout -b [创建+切换分支]

git merge   [合并某分支到当前分支]

git branch -d  [删除分支]

git log –graph      [查看分支合并图]

git stash        [可以把当前工作现场管理起来]

git stash pop    [恢复工作现场]

手机适配

第一种

(function(doc, win){

var docE1 = doc.documentElement,

resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,

recalc = function(){

var clientWidth = docE1.clientWidth;

if(!clientWidth) return;

docE1.style.fontSize = 10 * (clientWidth / 108) + ‘px’;

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt,recalc,false);

doc.addEventListener(‘DOMContentLoaded’,recalc,false);

})(document,window);

第二种:

写移动端必须加

var bw = (document.documentElement.clientWidth/6.4)+”px”;

var htmlTag = document.getElementsByTagName(“html”)[0];

htmlTag.style.fontSize=bw;

///////////////////////////////////////////////////////////////////////////////////////////////////

ajax:创建交互式网页应用的网页开发的技术    [特点:局部刷新]

封装:    function ajax(url){

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject(“microsoft.XMLHttp”)

xhr.open(“get”,url,true);

xhr.send();

xhr.onreadysattechange = () =>{

if(xhr.readystate == 4){

if(xhr.status == 200){

var data = xhr.responseTEXT;

return data;

}

}

}

}

promise[异步编程的解决方案:解决回调嵌套的问题](回调地狱)

function foo(INTERVAL){

return new Promise(function(resolve,reject){

setTimeout(resolve,INTERVAL);

})

}

webpack 优点:

1:模块化:让我们把复杂的程序细化为小的文件

命令:

(1):npm install -g webpack   [全局安装]

npm install webpack-cli -g

npm install -g webpack-dev-server

(2):npm install –save-dev webpack

(3):npm init                  [创建package.json文件]标准的npm说明文件，

里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等

(4):npm install –save-dev webpack       [安装到项目目录下]

(5):npm install webpack-cli –save-dev

(6):npm install –save-dev webpack-dev-server   [构建本地服务器]

配置:   [文件从哪输入]   [文件从哪输出]

module.exports = {

entry:  __dirname + “/app/main.js”,//已多次提及的唯一入口文件

output: {

path: __dirname + “/public”,//打包后的文件存放的地方

filename: “bundle.js”//打包后输出文件的文件名

}

}

/////////////////////////////////////////////////////////////////////////////////////

node.js:

[搭建服务器];

const http = require(“http”);

http.createServer((req,res)=>{

res.writeHeader(200,{“content-type”:”text/html;charset=utf-8″});

res.write(“aaa”);

res.end();

}).listen(8000);

执行此条命令  服务器不会自动刷新 需要自己去 手动运行node

安装 　npm install supervisor -g

启动     supervisor xxxx.js

可以不用执行node，自动更新（supervisor）

/////////////////////////////////////////////////////////////////////////////////////////////

Mongodb

npm install mongodb@2.2.33 –save-dev

npm list mongodb –save-dev

var MongoClient = require(“mongodb”).MongoClient;

var url = “mongodb://localhost:27017/mydb”;

MongoClient.connect(url,function(err,db){};

express

npm init [初始化项目]

1/全局安装环境 npm install express –g

2/测试安装成功与否 express –h

3/安装npm install express-generator –g

4/脚手架创建项目 express  -e  project_name（项目名字）

5/安装package.json中的依赖，进入目录cd express，安装依赖npm install

6/启动npm start  浏览器输入localhost:3000 查看

npm install express-session –save-dev  [暂时存储可在其他页面请求到]

npm install async –save-dev     [异步编程]   串行无关联:async.series([],()=>{})   并行无关联:同上

npm install body-parser –save-dev  [req.body]

ejs的特点:

(1)快速编译和渲染

(2)简单的模板标签

(3)自定义标记分隔符

(4) 支持文本包含

(5)支持浏览器端和服务器端

(6) 模板静态缓存

(7)支持express视图系统

ejs常用标签:

(1)<% %>流程控制标签

(2)<%= %>输出内容标签（原文输出HTML标签）

(3)<%- %>输出标签（HTML会被浏览器解析）

(4)<%# %>注释标签 % 对标记进行转义

(5)<%- include(path) %> 引入  path 代表你引入其他模板的路径 e.g:<%- include(“xxx.ejs”)%>

mocha 测试

全局安装:    npm install mocha -g

需要测试创建测试文件夹:

引入:chai模块:

var chai = require(“chai”);

var expect = chai.expect;

describe(“测试性质”,function(){

it(“测试条件”,function(){expect(函数).to.be.equal()})

})

<–项目需要多余安装的插件  及各种

var express = require(‘express’);

var router = express.Router();

var qs = require(“querystring”);

var ObjectId=require(‘mongodb’).ObjectId;

var  async = require(“async”);

var mongoClient = require(“mongodb”).MongoClient;

var url = “mongodb://localhost:27017/mydb”;–>

vue 使用命令行创建项目:

1:npm install vue-cli -g

2:npm install webpack -g

3:vue init webpack  myapp[项目名称]

4:cd myapp

5:npm install [安装依赖]

6:npm run dev  启动

7：npm run build   打包

1、插件安装    axios

npm install axios —-save-dev

使用    哪个文件需要使用，就在该文件的js中 导入

import axios from ‘axios’

2、路由  vuerouter    （tips：路由规则配置均在main.js中）

依赖安装   nam install vue-router —-save-dev

使用 在main.js引入  import VueRouter from ‘vue-router’

声明使用  在main.js  中   Vue.use(VueRouter)

//juqery

npm install jquery –save-dev

感谢阅读

喜欢小编文章的，可以点个订阅，小编都会不停更新文章，分享前端学习知识，以及程序员的趣事！

这里推荐一下我的前端学习交流群：731771211，里面都是学习前端的，群里会不定期更新最新的教程和学习方法，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的web前端党欢迎加入。