前端npm命令大全可收藏

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 "[email protected]" [创建密钥]
$ git config --global user.name "Your Name"
$ git config --global user.email "[email protected]" [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 <name> [创建分支]
git checkout <name> [切换分支]
git checkout -b <name> [创建+切换分支]
git merge <name> [合并某分支到当前分支]
git branch -d <name> [删除分支]
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);
第二种:
写移动端必须加

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script>
var bw = (document.documentElement.clientWidth/6.4)+"px";
var htmlTag = document.getElementsByTagName("html")[0];
htmlTag.style.fontSize=bw;
</script>
///////////////////////////////////////////////////////////////////////////////////////////////////

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 [全局安装]
(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 [email protected] --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

原文地址:https://www.cnblogs.com/dreamcfl/p/9388801.html

时间: 2024-08-03 16:28:31

前端npm命令大全可收藏的相关文章

DOS命令大全(经典收藏)

DOS命令大全(经典收藏)  憶安 2011-11-18 21:46:01 #1 一: net use \\ip\ipc$ " " /user:" " 建立IPC空链接 net use \\ip\ipc$ "密码" /user:"用户名" 建立IPC非空链接 net use h: \\ip\c$ "密码" /user:"用户名" 直接登陆后映射对方C:到本地为H: net use h:

04 npm 命令大全

一.npm简介  npm(Node Package Manager)是随同node.js 一起安装的包管理工具,为了解决nodejs代码部署上的很多问题,常用以下场景: 允许用户从npm服务器下载别人编写的地方包到本地使用. 允许用户将自己编写的包或明显杭程序上传到NPM服务器供别人使用. 二.npm使用前提 必须先安装node.js,安装地址官网http://nodejs.cn/,安装完成以后通过“node -v”查看版本号 三.npm命令大全 1.  npm install 安装模块 PS

Windows CMD命令大全(值得收藏)

您的位置:首页 → 脚本专栏 → DOS/BAT → 正文内容 CMD命令大全 Windows CMD命令大全(值得收藏) 更新时间:2018年06月06日 13:04:33   投稿:mdxy-dxy   我要评论 虽然随着计算机产业的发展,Windows 操作系统的应用越来越广泛,DOS 面临着被淘汰的命运,但是因为它运行安全.稳定,有的用户还在使用,所以一般Windows 的各种版本都与其兼容,用户可以在Windows 系统下运行DOS等 命令简介 cmd是command的缩写.即命令行

nodejs安装以及npm命令大全

win系统下nodejs安装及环境配置 第一步:下载安装文件下载nodejs,官网:/download/,我这里下载的是node-v0.10.28-x86.msi: 第二步:安装nodejs下载完成之后,双击 node-v0.10.28-x86.msi ,开始安装nodejs,自定义安装在D:dev odejs下面. 在cmd控制台输入:node -v,控制台将打印出:v0.10.28,出现版本提示表示安装成功.该引导步骤会将node.exe文件安装到D:dev odejs目录下,并将该目录添加

npm命令大全

参考网站:https://docs.npmjs.com/ 有了npm,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装的包. npm 常用命令 npm install <name>安装nodejs的依赖包 例如npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本,如npm install [email protected] 安装完毕后会产生一个node_modules目录,其目录下就是安装的各个node模块.

Windows下DOS命令大全(经典收藏)

copy \\ip\admin$\svv.exe c:\ 或:copy\\ip\admin$\*.* 复制对方admini$共享下的srv.exe文件(所有文件)至本地C: xcopy 要复制的文件或目录树 目标地址\目录名 复制文件和目录树,用参数/Y将不提示覆盖相同文件 tftp -i 自己IP(用肉机作跳板时这用肉机IP) get server.exe c:\server.exe 登陆后,将"IP"的server.exe下载到目标主机c:\server.exe 参数:-i指以二进

javascript功能插件大集合,写前端的亲们记得收藏

导读:GitHub 上有一个 Awesome – XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模板引擎.数据可视化.时间轴.编辑器等等. 伯乐在线已在 GitHub 上发起「JavaScript 资源大全中文版」的整理.欢迎扩散.欢迎加入. https://github.com/jobbole/awesome-javascript-cn js包下载地址:http:

ubuntu详细教程[软件安装,命令大全,常用快捷键]

作为一个程序猿,当从windows转到Linux上的时候,还是很不习惯的,毕竟windows用起来确实蛮方便的,但是有些时候,尤其是开发,linux却有很大的优势,学习一下linux还是有必要的. 本文主要介绍了ubuntu 系统的软件安装,常用命令以及常用常用快捷键. 1.下面从最简单的软件安装开始. tar.gz文件的安装,是属于自己编译源代码的方法.tar是把文件打成一个包,并不压缩. .gz是用gzip把打成包的.tar文件压缩,所以成了一个.tar.gz的文件. 进入终端后,解压文件

注册表命令大全

注册表命令大全 1. gpedit.msc-----组策略 2. sndrec32-------录音机3. Nslookup-------IP地址侦测器4. explorer-------打开资源管理器5. logoff---------注销命令6. tsshutdn-------60秒倒计时关机命令7. lusrmgr.msc----本机用户和组8. services.msc---本地服务设置9. oobe/msoobe /a----检查XP是否激活10. notepad--------打开记