Fourth week

Looper0_0
361 阅读4分钟

jQuery

jQuery outerWidth

height()	height
innerHeight()	height + padding
outerHeight()	height + padding + border
outerHeight(true)	height+padding+border+margin
eg:console.log($('#div1').outerWidth(true));

cookie

'1.设置cookie'
 // 属性  值  过期时间  14(不传 不设置)
function setCookie(attr,value,day){
    var str = "";
    str += attr+"="+value+";";  //"age=22;"
    if(day){ //传day   "age=22;expires="+date;
        var date = new Date();
        var today = date.getDate();
        date.setDate(today+day);
        str += "expires="+date;
    }
    document.cookie = str;
}
'2.加载cookie'
function getCookie(key){
    var str = document.cookie; //"name=zs; haha=1111; nameAA=lisi" 加载所有cookie
    var arr = str.split('; '); //["name=zs","haha=1111","nameAA=lisi"] 按照分号分割cookie
    for(var i=0; i<arr.length; i++){
        var arr1 = arr[i].split('=');   //["name","zs"] 按照等号分割
        if(arr1[0] == key){
            return arr1[1];
        }
    }
    return "";
}

换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            border:1px solid #eee;
            list-style: none;
            overflow: hidden;
        }
        ul li{
            width: 15px;
            height: 15px;
            background: #ff0000;
            float: left;
            margin-left:10px;
            background: url(theme.gif) 0 0 no-repeat;
        }
        #skin_0{
            background-position: 0 0;
        }
        #skin_0.selected{
            background-position: 0 -15px;
        }
        #skin_1{
            background-position: -20px 0;
        }
        #skin_1.selected{
            background-position: -20px -15px;
        }
        #skin_2{
            background-position: -40px 0;
        }
        #skin_2.selected{
            background-position: -40px -15px;
        }
        #skin_3{
            background-position: -60px 0;
        }
        #skin_3.selected{
            background-position: -60px -15px;
        }
        #skin_4{
            background-position: -80px 0;
        }
        #skin_4.selected{
            background-position: -80px -15px;
        }
        .new_skin_0{
            background: #b1b1b1;
        }
        .new_skin_1{
            background: #b4d61e;
        }
        .new_skin_2{
            background: #faab1a;
        }
        .new_skin_3{
            background: #08bece;
        }
        .new_skin_4{
            background: #e44c79;
        }
    </style>
</head>
<body>
    <ul>
        <li id="skin_0" class="selected"></li>
        <li id="skin_1" ></li>
        <li id="skin_2"></li>
        <li id="skin_3"></li>
        <li id="skin_4"></li>
    </ul>
    <div class="new new_skin_0">时事新闻</div>
    <div class="new new_skin_0">娱乐</div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('li').on('click',function(){
            $(this).addClass('selected').siblings().removeClass('selected');
            var index = $(this).index();
            $('.new').attr('class','new new_skin_'+index);
            setCookie('skin','skin_'+index,30);
        })
        var skin=getCookie('skin');
        $('#'+skin).triggerHandler('click');
        function setCookie(attr,value,day){
            var str = "";
            str += attr+"="+value+";";  //"age=22;"
            if(day){ //传day   "age=22;expires="+date;
                var date = new Date();
                var today = date.getDate();
                date.setDate(today+day);
                str += "expires="+date;
            }
            document.cookie = str;
        }
        function getCookie(key){
            var str = document.cookie; //"name=zs; haha=1111; nameAA=lisi" 加载所有cookie
            var arr = str.split('; '); //["name=zs","haha=1111","nameAA=lisi"] 按照分号分割cookie
            for(var i=0; i<arr.length; i++){
                var arr1 = arr[i].split('=');   //["name","zs"] 按照等号分割
                if(arr1[0] == key){
                    return arr1[1];
                }
            }
            return "";
        }
    </script>

    
</body>
</html>

zepto

zepto touch

1.click
//去掉viewport后  click有300ms延迟  区分单机双击 
$('#div1').on('click', function() {
    console.log(111);
});
2.tap 点击事件 没有延迟
$('#div1').on('tap', function() {
    console.log('tap');
});
3.singleTap 单击
$('#div1').on('singleTap', function() {
    console.log('singleTap');
});
4.doubleTap 双击
$('#div1').on('doubleTap', function() {
    console.log('doubleTap');
});
4.swipeLeft 左滑    '要在css内添加touch-action: none;'
$('#div1').on('swipeLeft', function() {
    console.log('left');
})
5.swipeRight 右滑    '要在css内添加touch-action: none;'
$('#div1').on('swipeRight', function() {
    console.log('right');
})
6.swipeUp 上滑    '要在css内添加touch-action: none;'
$('#div1').on('swipeUp', function() {
    console.log('up');
})
7.swipeDown 下滑    '要在css内添加touch-action: none;'
$('#div1').on('swipeDown', function() {
    console.log('down');
})
8.swipe 滑动   '要在css内添加touch-action: none;'
$('#div1').on('swipe', function() {
    console.log('swipe')
})

旋转照片墙

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        
        body {
            background: #000;
        }
        
        #container {
            display: flex;
            flex-wrap: wrap;
        }
        
        #container img {
            width: 25%;
            box-sizing: border-box;
            border-bottom: 1px solid #000;
            border-right: 1px solid #000;
        }
        
        #big {
            position: absolute;
            background: #000 url(练习/img/1.jpg) center center no-repeat;
            background-size: contain;
            width: 100%;
            height: 100%;
            left: 0px;
            top: 0px;
            display: none;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div id="big"></div>
    <script src="zepto.js"></script>
    <script src="touch.js"></script>
    <script>
        var now = 0;
        for (var i = 0; i < 24; i++) {
            $('<img src="练习/img/thumbs/' + (i + 1) + '.jpg">').appendTo('#container');
        }
        $('#container img').on('click', function() {
            var index = $(this).index();
            $('#big').css('background-image', 'url(练习/img/' + (index + 1) + '.jpg)').show();
            now = $(this).index();
        })
        $('#big').on('click', function() {
            $(this).hide();
        }).on('swipeLeft', function() {
            now++;
            if (now == $('#container img').length) {
                now = 0;
            }
            $('#big').css("background-image", "url(练习/img/" + (now + 1) + ".jpg)")
        }).on('swipeRight', function() {
            now--;
            if (now == -1) {
                now = $('#container img').length - 1;
            }
            $('#big').css("background-image", "url(练习/img/" + (now + 1) + ".jpg)")
        })
    </script>
</body>

</html>

es6

let

let 和 var 区别
1.let没有变量提升
eg:
    console.log(a);  //undefined
    var a = 10;
    console.log(b);  //报错
    let b = 10;
2.let不能重复命名
eg:
    var c = 10;
    var c = 20;
    console.log(c);  //报错
    let c = 10;
    let c = 20;
    console.log(c);
3.块级作用域{  }
    var m = 5;
    if(m){
        var n = 100;
    }
    console.log(n);
       
    var m = 5;
    if(m){
        let n = 100;
    }
    console.log(n);
4.临时失效区 （暂时性死区） 当前作用域不允许同名的变量进来
    var x = 10;
    function a(){
        console.log(x); //undefined
        var x = 20;
    }
    a();

    var x = 10;
    function a(){
        console.log(x);
        let x = 20;
    }
    a();

const

const有和let相同的四点
1.let没有变量提升
2.let不能重复命名
3.块级作用域{  }
4.临时失效区 （暂时性死区） 当前作用域不允许同名的变量进来

const定义常量 不能修改 
基本数据类型不可以修改
引用数据类型 地址不能修改（地址中存的内容是可以修改的）
如果内容不想修改 可以用Object.freeze(obj)方法冻结
eg:
    const obj = {
        name: 'zs'
    }
    // 冻结
    Object.freeze(obj);
    obj.name = "lisi";
    console.log(obj);

解构

定义:从数组和对象中提取值，对变量进行赋值，这被称为解构
1.  let arr = [1, 2];
    let [a,b] = arr;
    /*相当于
    var a = arr[0];
    var b = arr[1]; 
    */
    console.log(a,b);
2.  let arr1 = [1,2,[3,4],888];
    let [c,d,[e,f],g=10] = arr1;  //设置默认值
3.  let obj = {
        name: 'zs',
        age: 20,
    }
    let {x,y} = obj; //undefined undefined
    let {name:n,age:a} = obj; //zs 20
    console.log(x, y);
    console.log(n, a);

a,b值交换 (解构应用)

let a=5;
let b=6;
1.  [a,b]=[b,a];
    console.log(a,b);
2.  let c;
    c=a;
    a=b;
    b=c;
    console.log(a,b);
3.  a=a+b;
    b=a-b;
    a=a-b;
    console.log(a,b);
4.  a=[b,b=a][0];
    console.log(a,b);

扩展运算符

1. 复制数组
let arr = [1,2,3];
let arr1 = [...arr];
console.log(arr1);
2.数组合并
let arr4 = [1,2,3];
let arr5 = [4,5,6];
let arr6 = [...arr4,...arr5];
3.作为数组的一部分
let arr2 = [3,4,5,...arr];
console.log(arr2);
4.合并对象
let obj1= {
    name:'zs'
}
let obj2 = {
    name:'lisi',
    school:'weichuang'
}
let obj3 = {...obj1,...obj2};
console.log( obj3);
5.类数组转化为数组
var aLi = document.getElementsByTagName('li');
let arr2 = [...aLi];
console.log(arr2);

rest

<!-- ...rest  剩余的参数 -->
function fn(a,b,...rest){
    console.log(rest);//[3, 4]
}    
fn(1,2,3,4);

字符串扩展

1.模板字符串 ${} 支持标签 换行 数值运算
eg: let url = `url(img/${index + 1}.jpg)`;
    console.log(url);
    let a = 3;
    let b = 4;
    console.log(`${a}+${b}的结果是${a + b}`);
2.includes('c') 判断字符串内是否含有'c'
eg: let str = "abcdefg";
    console.log(str.includes('c'));
'includes与indexOf区别在于indexOf返回c在字符串中的位置 而includes返回字符串内是否含有c'
3.startsWith('c') 判断字符串是否以'c'开头
eg: let str2 = 'abcdef';
    console.log(str2.startsWith('bjhgj'));
4.endsWith('c') 判断字符串是否以'c'结尾
eg: let str2 = 'abcdef';
    console.log(str2.endsWiath('bjhgj'));
5.padStart(a, 'xyz') 由'xyz'在字符串开头补充知道字符串长度等于a
eg: let str2 = 'abcdef';
    console.log(str2.padStart(20, 'xyz'))
6.padEnd(a, 'xyz')由'xyz'在字符串结尾补充知道字符串长度等于a
eg: let str2 = 'abcdef';
    console.log(str2.padEnd(20, 'xyz'))
7.repeat(a) 字符串重复a次
eg: let str2 = 'abcdef';
    console.log(str2.repeat(5));

数值扩展

1.Number.isFinite() 判断是否为数字
eg: console.log(Number.isFinite('abs'))
2.Number.isNaN(NaN) 确定传递的值是否为 NaN
eg: Number.isNaN(NaN);        // true
    Number.isNaN(Number.NaN); // true
    Number.isNaN(0 / 0)       // true
3.Number.isInteger() 用来判断给定的参数是否为整数
eg: Number.isInteger(0);         // true
    Number.isInteger(1);         // true
    Number.isInteger(-100000);   // true
    Number.isInteger(0.1);       // false
4.Number.parseFloat() 可以把一个字符串解析成浮点数
5.Number.parseInt() 可以把一个字符串解析成整数

Math扩展

Math.trunc() 去除一个数的小数部分 返回整数部分
Math.sign() 判断一个数是正数，负数还是0
eg: console.log(Math.sign(0));

函数扩展

1.箭头函数 
'箭头函数内的this指向父作用域 普通函数内的this指向调用时的this'
'箭头函数内不能使用new'
'箭头函数内不能使用arguments对象，可以使用...rest代替'
eg: var a = function () {
        console.log(this);
        console.log('hahah')
    }
    a();
    // 箭头函数
    var b = (x,y) =>{
        console.log(x,y);
    }
    b(1,2);
2.解构赋值 默认值
eg: let fn = ([a,b,c,d=100]) => {
        console.log(a);
    }
    fn([1, 2, 3, 4]);
3.方法名.length 返回没有指定默认值的参数个数
eg: function f2(a,b,c,d=10){
    }
    f2(1,2,3,4);
    console.log(f2.length);
'如果实参为数组 方法名.length==数组数' 
4.方法名.name 返回方法名

箭头函数练习

<body>
    <script>

        window.val = 1;
        var obj = {
            val: 2,
            dbl: function () {
                this.val *= 2;
                val *= 2; // obj.dbl() 取到的是val变量   即 window.val = 1;
                console.log(val);
                console.log(this.val);
            }
        };
        obj.dbl();  //  obj.val = 4;  val = 2;   2 4
        var func = obj.dbl;
        // 理解为：
        // var func = function () {
        //     this.val *= 2;  //window.val = 4;
        //     val *= 2;    // 8
        //     console.log(val);   //8
        //     console.log(this.val); //8
        // }
        func(); //

    </script>
</body>

数组扩展

1.Array.from 类数组转化成数组
eg: var aLi = document.getElementsByTagName('li');
    var arr1 = Array.from(aLi);
    console.log(arr1);
    //方法二
    var arr = [...aLi];
2.arr.find(function (val, index, arr) {} )用与找出'第一个'符合条件的数组成员
eg: var arr3 = [1, 2, 3, 4, 5];
    // 找到第一个符合条件的成员
    var x = arr3.find(function (val, index, arr) {
        // console.log(val,key,arr);
        return val > 1;
    })
    console.log(x);
3.arr.findIndex(function (val, index, arr) {} )用与找出'第一个'符合条件的数组成员的索引
4.arr.filter(function ( ) { } ) 用与找出所有符合条件的元素
eg: var arr4 = [{
        name: 'zs',
        age: 20
    }, {
        name: 'lisi',
        age: 18
    }, {
        name: 'wangnwu',
        age: 30
    },{
        name: 'xxx',
        age: 18
    }];
    var arr5 = arr4.filter(function(obj){
        return obj.age == 18;
    })
    console.log(arr5);
5.arr.map(function(val,index){}) 映射出新数组 返回新数组
eg: var arr6 = [1,2,3,4,5];
    var arr7 = arr6.map(function(val,index){
        return val*2;
    });
    console.log(arr7);  //=>[2,4,6,8,10]
6.arr.forEach(function(val,index){})  //循环
eg: var arr6 = [1,2,3,4,5];
    arr6.forEach(function(val,index){
        console.log(val,index);
    })
7.arr.includes(c) 判断数组内是否含有'c' //与字符串中includes类似
8.for...of 循环
eg: var arr8 = ['a','b','c','d','e'];
    for(val of arr8){  //循环数组中的元素
        console.log(val);
    }
9.arr.keys() 循环索引
eg: var arr8 = ['a','b','c','d','e'];
    for(index of arr8.keys()){ //循环索引
        console.log(index);
    }
10.arr.values() 循环数组中元素
eg: var arr8 = ['a','b','c','d','e'];
    for(index of arr8.values()){ //循环索引
        console.log(val);
    }
10.arr.entries()  循环索引 数组中的元素
eg: var arr8 = ['a','b','c','d','e'];
    for([index,val] of arr8.entries()){ //循环索引 数组中的元素
        console.log(index,val);
    }

对象扩展

1.简写
'属性名和变量同名时可以简写'
eg: let name = "zs";
    let age = 20;
    var obj = {
        name:name,
        age:age,
        say:function(){
            console.log('haha');
        }
    }
    var obj1 = {
        name,
        age,
        say(){
            console.log('hahah')
        }
    }
    console.log(obj);
    obj1.say();
2.Object.assign() 合并对象
egL: var obj1 = {
        name:'zs'
    }
    var obj2 = {
        name:'lisi',
        age:20
    }
    var obj3 = {...obj1,...obj2};
    Object.assign(obj1,obj2);
    console.log(obj1);
3.Object.is('a','a') 比较两个值是否严格相等(与===基本一致)
'+0===-0 true
Object.is('+0','-0') false'
'NaN===NaN false
Object.is('NaN','NaN') true'
4.Object.keys() 同数组扩展
5.Object.values() 同数组扩展
6.Object.entries() 同数组扩展
7.循环 key属性
eg: for(key in obj4){
        // 输出对象中属性值
        // console.log(key,obj4);
        // 属性名是动态的 obj4[key];
        console.log(obj4[key]);
        obj4[key] = "haha";
    }
    console.log(obj4);
8.'name' in obj 是否包含name属性
eg: var obj4 = {
        name:'xx',
        age:10,
        school:'1111'
    }
    console.log('name' in obj4);

类

构造函数
属性写在构造函数中 方法写在原型下
构造函数有一个prototype属性 ，指向原型对象，添加在原型对象下的属性和方法可以被实例化对象共享
eg: function Person(name,age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.say = function(){
        console.log('我是'+this.name);
    }
    var p1 = new Person('zs',20);
    console.log(p1);
    p1.say();

继承

1.在构造函数中 通过父类Person.call(this) 继承属性
2.继承父类的方法 子类的 prototype = new 父类的实例化对象 继承方法 
3.Coder的原型对象下 本来constructor指回Coder构造函数  需要手动添加 constructor属性 = Coder
eg: function Person(name,age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.say = function(){
        console.log('我是'+this.name);
    }
    function Coder(name,age){
        Person.call(this,name,age);  
    }
    Coder.prototype = new Person();
    Coder.prototype.constructor = Coder;
    var c1 = new Coder('lisi',18);
    var c2 = new Coder('zhangwu',20);
    c2.say();
    console.log(c1,c2);

class

'constructor:定义属性'
'类下方法直接类名(){}'
'继承用extends'
'从父类继承属性用super()'
'静态方法 方法名前加static'
class Person{
    constructor(name,age){
        this.name=name;
        this.age=age; 
    }
    say(){
        console.log('I am a man');
    }
}
class Coder extends Person{
    constructor(name,age,num){
        super(name,age);
        this.hair=num;
    }
    coding(){
        console.log('996 ICU');
    }
    static codingnow(){
        console.log('hello world!');
    }
}
let c1=new Coder('石宇',20,666);
console.log(c1);
Coder.codingnow();
c1.coding();

symbol

symbol是js的基本数据类型 不会出现重复
eg: let x=Symbol('x');
    let y =Symbol('y');
    let obj={
        name:'shiyu',
        [x]:'xxxx',
        [y]:'xxxx'
    }
    console.log(x);
    console.log(y);
    console.log(x===y);

Set

1.Set是类数组，但成员的值都是唯一的，没有重复的值
2.add(value) 添加value
3.delete(value) 删除value
4.clear() 清除所有成员
5.遍历 keys() values() entires() forEach() for...of
6.size 长度 //没有length 只有size

Set应用:数组去重

1.  function fn(arr){
        return [...new Set(arr)]
    }
2.  function fn(arr){
        let result = []
        arr.forEach(function(val,index){
            if(!result.includes(val)){
                result.push(val);
            }
        });
        return  result;
    }
3.  function fn(arr){
        var obj = {
        }
        var result = [];
        arr.forEach(function(val){
            if(val in obj){ //如果obj这个对象有val属性  
                obj[val] += 1;
            }else{ //如果obj对象没有这个属性  obj[val]属性 = 1  reuslt数组中添加
                obj[val] = 1;
                result.push(val);
            }
        });
        console.log(obj);
        return result;
    }
    console.log( fn([1,2,3,4,5,7,3,4,2,1]) );

Map

1.Map类似于对象 键值对集合
2.Map的属性可以是其他类型的
3.map.set(key,value) 添加属性
4.其他同Set

Ajax

1.创建 XMLHttpRequest 对象
2.AJAX - 向服务器发送请求 (get post)
3.服务器响应
eg: var oBtn = document.getElementById('btn');
    oBtn.onclick = function () {
        // 1.创建 XMLHttpRequest 对象
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 2.AJAX - 向服务器发送请求 get post
        '1 请求方式  2 请求地址（后台） 3是否异步（true 异步 false 同步'
        xmlhttp.open("GET", "test.json", true);
        // 发送请求
        xmlhttp.send();
        // 3 服务器响应
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            '存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                        0: 请求未初始化 1: 服务器连接已建立
                        2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪'
            'status状态码 
                        200 成功 404 地址找不到 500 服务器错误 304缓存'
                // 服务端返回的数据  xmlhttp.responseText
                var oDiv = document.getElementById('div1');
                //  服务端返回的是json格式 JSON.parse将json格式转成对象
                var obj = JSON.parse(xmlhttp.responseText);
                oDiv.innerHTML = obj.msg;
            }
        }
    }

Promise

1.Promise对象代表一个异步操作 管理异步请求
2.Promise有三种状态 pending(进行中) fulfilled(已成功) rejected(已失败)
eg: new Promise(function(resolve,reject){
        $.get('url1',function(data){
            // 成功调用resolve
            if(data){
               resolve(data.id) //pending -> fulfilled
            }else{
            //失败调用reject
                reject();  //pending -> rejected
            }
        });
    }).then(function(){
        //成功
        $.get('url2',function(){
        })
    }).catch(function(){
        //失败
        console.log('shibai');
    })
3.Promise.all() 所有请求都完成  进行下一步
eg:let p1 = new Promise(function (resolve,reject) {
        setTimeout(function () {
            var data = 1;
            console.log(data)
            resolve();
        }, 1000);
    });
    let p2 = new Promise(function (resolve,reject) {
        setTimeout(function () {
            var data = 2;
            console.log(data);
            reject();
        }, 500);
    });
    let p3 = new Promise(function (resolve,reject) {
        setTimeout(function () {
            var data = 3;
            console.log(data)
            reject();
        }, 200);
    });
    //all 等待所有请求都完成 接着向下执行 所有都成功then  有一个失败走到catch
    Promise.all([p1,p2,p3]).then(function(){
        console.log('ok');
    }).catch(function(){
        console.log('失败');
    });
4.Promise.race() 返回最快的 最快的成功进行后执行then在执行其他的 最快的失败直接执行catch
eg: Promise.race([p1,p2,p3]).then(function(){
        console.log('ok');
    }).catch(function(){
        console.log('失败');
    })

Proxy

Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）
eg: var obj = {
        name:'zs',
        age:20
    }
    let p1 = new Proxy(obj,{
        //get是获得值之前做的事
        get(target,key,val){
            console.log('拦截获取');
            return target[key];
        },
        //set是改变值时做的事
        set(target,key,val){
            console.log('拦截set'+key);
            target[key] = val;
        }
    });

es6转换成es5

1.安装nodejs
2.安装好后在vscode 项目文件夹下打开终端 输入npm init -y 初始化
3.初始化完成后再输入npm install -g babel-cli下载
4.下载好后再输入npm install --save-dev babel-preset-es2015 babel-cli进行下载
5.在该文件夹下创建.babelrc文件
文件内输入
{
    "presets": ["es2015"],
    "plugins": []
}
6.文件转化
(1)文件转化
babel 文件夹/文件名.js –o 转化文件夹/转化后文件名.js
或babel 文件名.js –o 转化后文件名.js(终端与文件所在文件夹相同)
(2)文件夹转化
babel 文件夹名 –d 转化后文件夹名
(3)实时转化
babel 文件夹/文件名.js -w –o 转化文件夹/转化后文件名.js
babel 文件夹名 -w –d 转化后文件夹名
7.重新下载
终端下输入npm install
avatar
文章
阅读
粉丝