前端命令 yarn 前端命令大全

转载

AI独步天下 2023-08-24 22:19:12

文章标签 前端命令 yarn git gulp mongodb 文章分类 Yarn 大数据

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 <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 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

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。