学习前端进阶

第一步：使用 node 编译 js 文件 

　　1.node xxx

　　2.打开命令行终端：Ctrl + Shift + y

第二步：学习ES6

　　1.常量与变量：

　　　　1.let  变量

　　　　2.const 常量

　　　　3.var 会进行变量渗透

　　2.模板字符串:

1. var username = "张三";
2. var age = 30;
3. var str2 = `我名字叫 ${username},年龄是: ${age}`;

　　3.箭头函数：

var sum = (a,b)=>{ return a + b;};  --> var sum = (a,b) => a+b;

　　4.对象操作：

function findUsers(){
            $.get("xxxxx",function(res){
                var res = {
                    pages:11,
                    pageSize:10,
                    pageNo:1,
                    firstFlag:true,
                    lastFlag:false,
                    total:123,
                    data:[{},{},{},{}],
                };
var {data:users,...pagesjon} = res;
//等价于
//var users = res.data;
// var pagesjon = res{};

　　5.map与reduce

var newarr = arr.map(value => parseInt(value) * 2);

//reduce 计算方法 
        let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        // 箭头写法 -- 1到10相加 
        var result = arr.reduce((a, b) => a + b);

3.NPM 包管理：

　　1.npm init：（npm init -y）

　　　　1.#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml

　　2.修改npm 镜像：

　　　　1.npm config set registry https://registry.npm.taobao.org

　　3.npm install

　　4.其他操作：

#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

4.BaBel：

　　1.Babel提供babel-cli工具，用于命令行转码：

　　　　1.npm install -g babel-cli

　　　　2.babel --version

　　　　3：babel的使用

　　　　

 

　　　　4.自定义脚本

 　　　

 

 5.模块化：

　　1.运行：

　　　

 

　　2.写法：

//src/userApi2.js 
export default {
    getList() {
        console.log('获取数据列表2')
    },
    save() {
        console.log('保存数据2')
    }
}

//创建 src/userComponent2.js，导入模块
import user from "./userApi2.js"
user.getList()
user.save()

//执行命令转码
//npm run build

//node dist/userComponent2.js

 6. WebPack

　　1.全局安装：

　　　　1.npm install -g webpack webpack-cli

　　　　2.查看版本号 ： webpack -v

　   2.操作：

　//src下创建common.exports.info = function (str) {    document.write(str);

}

//src下创建utils.js
exports.add = function (a, b) {
    return a + b;
}

//src下创建main.js
const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));

//webpack目录下创建配置文件webpack.config.js
/*
const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    },
    "mode" : 'development'
}
*/
npm run dev

 

　　3.CSS 打包：

　　　　1.安装依赖：npm install --save-dev style-loader css-loader

　　　　2.修改wepack.config.js代码：

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{
        //其他配置
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

//在src文件夹创建style.css
/*
body{
    background:pink;
}
*/

//修改main.js，在第一行引入style.css
//require('./style.css');

npm run dev

 

　　

（学与b站狂神  https://www.bilibili.com/video/BV1BU4y147pS?p=1&vd_source=8669cf6ac7f7df2c20edc5d95819a9d3）

（笔记参考于 https://www.kuangstudy.com/bbs/1351463043300708353）