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
這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習知識。自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。
點選：加入