大前端相关-nodejs到vue

一、前言
二、vscode安装
- 1.安装
- 2.vscode简单操作
三、Node.js
- 1.安装
- 2.测试安装成功
- 3.简单使用
- 4.前端连接数据库
四、ES6语法
- 1.ES6是什么
- 2.let和const
- 3.模板字符串
- 4.函数默认参数
- 5.箭头函数
- 6.对象初始化简写及案例分析
- 7.对象解构
- 8.对象传播操作符
- 9.数组Map
- 10.数组reduce
- 11.nodejs和<\script>
五、npm
- 1.介绍
- 2.作用
- 3.初始化项目
- 4.安装使用卸载模块介绍
- 5.package.json文件
- 6.cnpm
- 6-2安装cnpm出现错误
六、babel
- 1.介绍及作用
- 2.安装
- 3.使用
- 4.自定义脚本
七、模块化
- 1.介绍
- 2.CommonJS模块化规范
- 3.ES6模块化规范(常用)
- 4.es6的常见写法(3的改进版)
八、Webpack
- 1.介绍
- 2.安装
- 3.测试js打包步骤
- 4.测试Css打包
九、Vue-element-admin

一、前言

目前常说前后端分离，前端也有一堆神奇的技术，一些本来只有后端能做的事，前端也可以做了(如连接数据库)。面对一些小的系统，前端工程师就可以搞定整个系统。以前学的jsp啥的好像都没啥实际用了。这里以Node.js为入口，简单学习一下大前端。

二、vscode安装

1.安装

直接去官网下载vscode
vscode官网
百度百科：
Visual Studio Code（简称“VS Code”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。

2.vscode简单操作

CTRL+P      搜索(配置/...)
>Configure Display Language      切换语言配置      在搜索中输入(后面一样)
>font        字体大小等设置
或者：
文件-->首选项-->设置-->font    大概中间有关font size 直接调整
文件-->首选项-->设置-->emment 打开TAB自动补齐(默认打开)
！                ！自动生成基本html格式

三、Node.js

1.安装

安装自己的电脑需求在官网下载：官网
傻瓜式安装，自动配置环境变量，并且现在集成了npm。

2.测试安装成功

直接在cmd终端中输入：

node -v      查看版本号---测试是否安装成功
npm -v      查看包管理器版本(npm包管理器，后面说)

很多安装都可以用 -v 或者 -version 查看版本来检验安装是否成功

3.简单使用

用vscoe新建httpserver.js文件–网页响应

//导入模块是require就类似于import java.io
const http=require("http");//1.创建一个httpserver服务
http.createServer(function(request,response){//浏览器怎么认识hello server!!//下面这行告诉浏览器将以text-plain(文本)去解析hello server这段数据response.writeHead(200,{'Content-type':'text/html'});//text/html是html格式(即<strong>会翻译成标签)//给浏览器输出内容//2.监听一端口8888response.end("<strong>hello server!</strong>");
}).listen(8888)
console.log("你启动的服务是:http://localhost:8888已启动成功");//3.启动服务 终端输入node httpserver.js
//4.在浏览器访问http://localhost:8888

4.前端连接数据库

终端输入:nmp install mysql —— 安装nodejs的mysql操作模块
安装完会出现node_modules,package-lock.json,package.json 三个文件

新建db.js文件

//导入mysql依赖包，mysql属于第三方的模块就类似于java.sal
var mysql=require("mysql");//1.创建一个mysql的Connection对象
//2.配置数据连接的信息
var connection=mysql.createConnection({host:"127.0.0.1",user:"root",port:3306,password:"root",database:"testdb"//连接testdb数据库
});
//3.开辟连接
connection.connect();
//4.执行curd
connection.query("select * from _user",function(error,results,fields){//如果查询出错，直接抛出if(error)throw error;//查询成功（网页打开console查看数据）console.log("results = ",results);
});
//5.关闭连接
connection.end();//最后一步：运行node db.js查看效果

四、ES6语法

1.ES6是什么

之前写html，jsp的var 什么什么的都是ECMAScript5语法，如果用idea写过，应该会发现idea总是想让你把var换成let或者const。ECMAScript6是大前端必须会的。这里简单介绍学习。
百度百科：
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。

2.let和const

代码只有<body>部分，使用！自动生成的模板

    <script>//传统定义变量和常量的方式 统一使用varvar name="张三";var link="https://www.baidu.com";var PI=Math.PI;console.log(name);console.log(link);console.log(PI);        //ES6定义方式let name2="李四";let link2="https://www.baidu.com";       //定义常量const PI2=Math.PI;console.log(name2);console.log(link2);console.log(PI2);</script>

    <script>//let 和const解决var的变量穿透问题，和常量修改的问题for(var i=0;i<5;i++){console.log(i);}//变量穿透,输出5，let会报错console.log(i);//var定义常量可以被修改，const定义的常量修改会报错var PI=Math.PI;PI=100;console.log(PI);//在实际开发和生产中，如果是小程序，unipp或者是一些脚手架中，可以大胆的去使用let和const//但是如果在web开发中，建议还是使用var，因为在一些低版本的浏览器还是不支持let和const        </script>

3.模板字符串

    <script>//字符串会牵涉到动态部分var person={name:"张三",address:"天津码头",target:"福记商铺"}let address="传统的--我是"+person.name+"，在"+person.address+"抬货到"+person.target;console.log(address);//ES6的模板字符串语法let address2=`ES6--我是${person.name}，在${person.address}抬货到${person.target}`;console.log(address2);</script>

4.函数默认参数

    <script>//函数默认参数function sum(a,b){return a+b;}var result=sum(100,200);    //300var result=sum(100);        //NaN  ---sum(100,undefined);console.log("result = "+result);//但是可以在定义函数给默认值解决这个问题function sum2(a=100,b=200){return a+b;}var result=sum2(400);        //600console.log("result = "+result);</script>

5.箭头函数

    <script>//箭头函数 - 重点(在未来的项目开发中：比如小程序，unipp，一些常见的脚手架大量使用)//原来函数var sum=function(a,b){return a+b;}//箭头函数改进--1var sum2 = (a,b)=>{return a+b;}//箭头函数改进--2var sum3= (a,b)=>a+b;console.log(sum(100,200));console.log(sum2(100,200));console.log(sum3(100,200));//通过上面的列子找到的规律//1：去掉function //2.在括号后面加箭头//3.如果逻辑代码中仅有return可以直接省去。(如果有逻辑体，就不能省略)//4.如果参数只有一个，括号也可以省去（自然多个参数必须加括号）var sum4 = (a,b) =>{var num=a+b;return num;//不能省略}//var sum5 = (a,b)=>a+b;//例子var arr=[1,2,3,4,5,6];var arrNew=arr.map(function(obj){return obj*2;});console.log(arrNew);//箭头函数简化var arrNew2=arr.map(obj=>obj*2);console.log("箭头函数简化数组乘二："+arrNew2);</script>

6.对象初始化简写及案例分析

    <script>//原本var info={title:"天津狗不理",goods:"包子",go:function(){console.log("卖包子");}};console.log("原本对象"+info);//es6简写//对象是key:value//如果key和变量名一致，可以只定义一次//如果value是一个函数，可以把`:function`去掉，只剩下()即可var title="天津狗不理";var goods="包子";let info2={title,goods,go(){console.log("卖包子");}};console.log("ES6简写对象:"+info2);console.log("ES6简写对象:"+info2.title);console.log("ES6简写对象:"+info2.goods);console.log("ES6简写对象:"+info2.go());//这里会先执行info2.go()，下一行返回ES6简写对象:undefined</script>

例子：

    <form action=""><p>账号：<input type="text" id="account"></p><p>密码：<input type="text" id="password"></p><p><input type="button" value="登录" id="loginbtn"></p></form><script>$("#loginbtn").onclick(function(){var account=$("#account").val();var password=$("#password").val();//执行异步请求// $.ajax({//     type:"post",//     url:"xxx",//     data:{account:account,password:password},//     success:function(){//     }// });//简写var params={account,password};$.ajax({type:"post",url:"xxx",data:params,success(){}});});</script>

7.对象解构

    <script>//对象key:value存在,获取对象属性和方法的方式有两种//1.通过.//2.通过[]var title="天津狗不理";var goods="包子";let info2={title,goods,go(){console.log("卖包子");}};console.log("通过.方式--------------------");//通过.console.log(info2.title);console.log(info2.goods);info2.go();console.log("通过[]方式-----------------");//通过[]的方式console.log(info2["title"]);console.log(info2["goods"]);info2["go"]();console.log("ES6获取属性和方法的方式-----------------");//ES6获取属性和方法的方式(es6对象解构--其实就是快速获取属性和方法的一种形式)var {title,goods,go}=info2;//还原代码// var title=info2.title;// var goods=info2.goods;console.log(title,goods);go();</script>

8.对象传播操作符

    <script>//对象传播操作符...var person={name:"张三",address:"天津码头",evetnt:"抬杠",nickname:"钢三",go(){console.log("抬杠抬到力能扛鼎");}};//解构var {name,address,...person2}=person;console.log(name);console.log(address);console.log(person2);</script>

    <script>//java----后台//数据格式: var userPage={pages:10,user:[{},{}],pageNo:1,pageSize:100,total:100};//异步请求//$.post("/user/search",funtion(res){var userPage={pages:10,user:[{},{}],pageNo:1,pageSize:100,total:100};var {users,...userPage2}=userPage;// })</script>

9.数组Map

    <script>//要对arr数组每个数组*2let arr=[1,2,3,4,5,6,7];//传统方式let newarr=[];for(let i=0;i<arr.length;i++){newarr.push(arr[i]*2);}console.log(newarr);  //maplet newArr2=arr.map(ele=>ele*2);console.log("map实现数组*2:"+newArr2);//map处理对象的数据var user=[{age:10,name:"珂赛特"},{age:10,name:"洛丽塔"},{age:18,name:"吉普赛"}];let newUser=user.map(function(ele){ele.age +=1;return ele;});// let newUser=user.map(ele=>ele.age += 1);//这个只返回年龄console.log(newUser);</script>

10.数组reduce

    <script>let arr=[1,2,3,4,5,6,7,8,9,10];let result=arr.reduce((a,b)=>a+b);console.log("result:"+result);//原理：a=1 b=2 result=3//a=3 b=3 result=6//....//a=45 b=10 result=55</script>

11.nodejs和<\script>

新建01.js文件，随便拿上面一个代码放入

//字符串会牵涉到动态部分
var person={name:"张三",address:"天津码头",target:"福记商铺"
}
let address="传统的--我是"+person.name+"，在"+person.address+"抬货到"+person.target;
console.log(address);//ES6的模板字符串语法
let address2=`ES6--我是${person.name}，在${person.address}抬货到${person.target}`;
console.log(address2);

在终端运行:
node .\01.js
结果一致
html中<script>中的语法函数可以直接用在nodejs中

五、npm

1.介绍

npm相当于后端的Maven
NPM:Node Package Manager
所以也有对应的仓库：在官网直接搜索就行
https://www.npmjs.com/

2.作用

1、快速构建nodejs工程
2、快速安装和依赖第三方模块。比如：npm install mysql redis等

3.初始化项目

终端运行：>npm init 初始化
名称默认回车
版本：可以自己指定eg:1.0.1
描述：我是一个node工程
入口函数：默认index.js回车就行
测试命名---不需要回车就行
仓库地址(git repository)---如果不需要回车就行
关键词  自定义node
作者    自定义person
回车确认

得到package.json文件，这个文件内容如下：

{"name": "3npmpro",            //工程名"version": "1.0.1",           //版本"description": "我是一个node工程",   //描述"main": "index.js",           //入口js"scripts": {                  //运行脚本"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["node"],"author": "person",           //开发者"license": "ISC"              //授权协议
}

类似于pom.xml文件作用管理依赖
我们测试时也可以直接在终端输入npm init -y来默认初始化

4.安装使用卸载模块介绍

快速安装和依赖第三方模块
终端:

npm init -y     全部默认参数完成初始化(生成package.json)
npm install mysql   (node_modules和package-lock.json)(mysql在node_modules下的mysql)
npm i redis         (redis也在在node_modules下)

快速安装依赖第三方模块？

npm install xxx 或者 npm i xxx 模块名
安装模块放在项目的node_moudules文件夹中

使用模块:

- require
//导入模块redis
const redis = require("redis");
//导入mysql
const mysql=require("mysql");

xx.js文件：

//导入模块redis
const redis = require("redis");
//导入mysql
const mysql=require("mysql");const client =redis.createClient();
client.on("error",function(error){console.error(error);
});client.set("key","value",redis.print);
client.get("key",redis.print);

卸载模块：

npm uninstall vue jquery

5.package.json文件

package.json文件：

"dependencies": {
"mysql": "^2.18.1",
"redis": "^3.1.2"
}

通过npm install xxx下载的依赖会记录在package.json这个文件中，就类似于maven中pom.xml
记录的作用：复用
如果创建新的工程，可以将package.json这个文件复制到新的目录下，然后打开当前目录的cmd，输入 " npm install "即可下载package.json记录的所有配置

6.cnpm

和Maven一样，仓库在国外，国内下载慢。
可以使用国内淘宝镜像cnpm:
安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v 查看cnmp版本信息

6-2安装cnpm出现错误

如果出现以下错误：
C:\Users\Lenovo\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。
解决方案：

 1.在win10 系统中搜索框 输入 Windows PowerShell，选择 管理员身份运行2.使用，win+R打开了powershell命令行之后,输入set-ExecutionPolicy RemoteSigned，
然后更改权限为A，最后通过 get-ExecutionPolicy 查看当前的状态
总结:powershell打开后输入：set-ExecutionPolicy RemoteSigned 回车;A 回车;get-ExecutionPolicy 回车。

六、babel

1.介绍及作用

作用：用来改换es配置(很多浏览器配置不够高，可以用来把es6转码成es5)

2.安装

cmd终端输入：

cnpm install -g babel-cli       安装(-cli默认安装到c盘)
babel --version             查看版本

3.使用

新建文件夹，终端输入：
npm init -y 初始化
新建文件 /src/example.js(待转码文件)

//es6
let name = "张三";
const address = "西安";
let arr=[1,2,3,4,5];
let newArr=arr.map(a=>a*2);
console.log(name);
console.log(address);
console.log(newArr);

在根目录下创建.babelrc文件(babel配置–要转化成什么版本——这里时es2015)

{"presets":["es2015"],"plugins": []
}

终端执行：

babel src -d dist

这里一般会出现错误:

Couldn’t find preset “es2015” relative to directory “E:\XXX\XXX\5babel”
是因为没有安装es2015

终端执行：

cnpm install babel-preset-es2015 --save-dev
出现node_modules 文件

再次执行转化：
babel src -d dist
(出现dist/example.js(es2015版))(把src下的文件转码到dist文件下)
转码后js文件：

"use strict";//使用严格模式，严格模式下你不能使用未声明的变量。//es6
var name = "张三";
var address = "西安";
var arr = [1, 2, 3, 4, 5];
var newArr = arr.map(function (a) {return a * 2;
});
console.log(name);
console.log(address);
console.log(newArr);

ps:新项目安装也是把package.json复制到新文件夹执行：npm install

4.自定义脚本

这里简单提一下自定义脚本，我们之后从网上下项目，一般都是终端输入npm run dev运行项目，就是因为自定义脚本。
在package.json文件中添加脚本:
源文件：

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},

修改后：

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"babel src -d dist"
},

终端执行:
npm run dev
自动执行

七、模块化

1.介绍

前端越来越复杂，所以也产生了类似java包(import)的机制，及模块化规范。这里提一下CommonJS模块化规范和ES6模块化规范

2.CommonJS模块化规范

导出文件：

//工具类
const sum = ((a,b)=>a+b);
const sub = ((a,b)=>a-b);
const mul = ((a,b)=>a*b);
const di = ((a,b)=>a/b);
//如何导出给别人使用
module.exports={sum,sub,mul,di
}

导入测试(类似java的import类，导入后就可直接使用):

//require
const m=require('./四则运算.js');
console.log(m.sum(4,2));
console.log(m.sub(4,2));
console.log(m.mul(4,2));
console.log(m.di(4,2));

3.ES6模块化规范(常用)

新建文件 src/userApi.js(导出文件):

export function getList(){//在真实业务中，异步获取数据console.log("获取数据列表");
}export function save(){//在真实业务中，异步获取数据console.log("保存数据");
}

新建文件 src/userTest.js(导入测试文件):

import {getList,save} from './userApi.js'getList();
save();
//默认不支持es6语法

如果执行userTest报错

<!-- import {getList,save} from './userApi.js'
^^^^^^
SyntaxError: Cannot use import statement outside a module -->
//默认不支持es6语法

解决方法：

npm init -y     先初始化
新建.babelrc文件      转码配置
cnpm install babel-preset-es2015 --save-dev    安装es2015依赖
在package.json文件新建脚本
"build":"babel src -d dist"
终端:npm run build
node .\dist\userTest.js 成功运行

4.es6的常见写法(3的改进版)

新建文件 src/userApi.js(导出文件):

export default{getList(){//在真实业务中，异步获取数据console.log("获取数据列表");},save(){//在真实业务中，异步获取数据console.log("保存数据");}
}

新建文件 src/userTest.js(导入测试文件):

import user from './userApi.js'user.getList();
user.save();

八、Webpack

1.介绍

Webpack 是一个模块打包器，可以将多种静态资源js,css,less转换成一个静态文件，用于展示你的内容。

2.安装

cnpm install -g webpack webpack-cli
webpack -v      查看版本

3.测试js打包步骤

测试：在src/文件夹下- main.js导入util.js和common.js文件
1》创建一个nodejs项目 npm init -y
2》创建一个src目录
3》在src存放两个需要合并的util.js和common.js
util.js文件：

//相加函数
exports.add=(a,b)=> a+b;
//动态增加的相减函数
exports.minus=(a,b)=> a-b;

common.js文件:

//输出例子
exports.info=function(str){console.log(str);document.write(str);
}

4》准备一个入口文件main.js,其实就是模块集中进行引入
main.js文件：

//导入util和common
const util =require("./util");
const common =require("./common");common.info("Hello World ,"+util.add(100,100));
document.write("<br />")
common.info("Hello World ,"+util.minus(100,50));

5》在根目录下定义个webpack.config.js文件配置打包的规则

//导入path模块"path"是nodejs的内置模块
const { dirname } = require("path");
const path=require("path");//定义JS打包的规则
module.exports={//入口函数：从哪里开始进行编译打包entry:"./src/main.js",//编译成功以后把内容输出到哪里去output:{//定义输出指定目录      __dirname当前目录根目录，产生一个dist文件path:path.resolve(__dirname,"./dist"),//定义合并的文件名filename:"bundle.js"}
}

6》执行webpack查看效果
终端输入:

webpack         打包开始
webpack -w      动态监视打包

4.测试Css打包

老版本Webpack本身默认只能处理JavaScript模块，如果要处理其它类型的文件，就需要使用loader进行转化
PS：********现在版本好像已经可以直接打包css了
和main.js同级目录新建任意style.css文件

body{background: yellow;
}

1》先安装相关loader插件

cnpm install --save-dev style-loader css-loader

2》在webpack.config.js中进行配置

//导入path模块"path"是nodejs的内置模块
const { dirname } = require("path");
const path=require("path");//定义JS打包的规则
module.exports={//入口函数：从哪里开始进行编译打包entry:"./src/main.js",//编译成功以后把内容输出到哪里去output:{//定义输出指定目录      __dirname当前目录根目录，产生一个dist文件path:path.resolve(__dirname,"./dist"),//定义合并的文件名filename:"bundle.js"},module:{rules:[{test:/\.css$/,      //把项目中所有的.css结尾的文件打包use:["style-loader","css-loader"]}]}
}

3》main中导入css

require("./style.css");

4》执行webpack

九、Vue-element-admin

简介(官方)：
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
下载源码：源码地址
预览：预览地址

简单看看就行，后面会单独写一篇关于vue的。

大前端相关-nodejs到vue相关推荐

狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用
参考资料文章目录 01 大前端基础知识概述 02 概述和前端工具VSCode安装 03 Nodejs的安装 04 Nodejs了解和快速入门 05 Nodejs实现htppserver服务 06 N ...
当我们在谈大前端的时候，我们谈的是什么
在今天,大前端并不是一个陌生的词汇,我们偶尔会听人谈起它,前些天还看到卓同学写了一篇<大前端时代下App开发者的生存之道>,说明这个词开始成为某种共识了. \\ 但是大前端到底指的是什么? ...
大前端进阶！NodeJS、Npm、Es6、Babel、Webpack、模块化开发
文章目录大前端进阶一.Node.js 1.1.Nodejs介绍和安装 1.2 .Nodejs入门 1.2.1.快速入门-Hello World 1.2.2.Node - 实现请求响应 1.2.3. ...
大前端–Vue前端体系、前后端分离
大前端–Vue前端体系.前后端分离前言 Soc:关注点分离原则 HTML+CSS+JS(视图):给用户看,刷新后台给的数据网络通信:axios 页面跳转:vue-router 状态管理:vuex ...
nodejs基于Vue旅游网站的设计与开发express前端源码
在经济高速发展的现在,人们的工作越来越繁重,生活节奏越来越快,生活工作压力也越来越大.反而留给自己休息,享受旅游生活的时间越来越少,缺少对周边旅游信息的了解,无法与兴趣一致的户外旅友进行交流.这则会导 ...
大前端-Vue源码分析
Vue源码解析-响应式原理以下内容来自拉勾教育大前端训练营笔者在学习过程中对笔记进行的一个整理心得体会嘿嘿嘿~~~ 首先说说拉勾教育大前端训练营的课程视频吧,课程的质量是真的很好哦,并且已经 ...
vue前端服务器端口_解密智联招聘的大前端架构 Ada
作者 | 智联大前端 Ada 是智联招聘自主研发的演进式大前端架构.于 2017 年正式投入使用后,又经过三年持续演进,全面覆盖了从研发到运维的各个方面,具备跨技术栈工程化体系.交互式图形界面开发工具 ...
2021 大前端技术回顾及未来展望
作者:腾讯 IMWeb 前端团队 2021 年大前端领域没有出现革命性的明星项目,但在各个细分的技术领域都有一定的拓展与深耕,有很多新技术或者新特性有望在 2022 年迎来爆发.在互联网 " ...
【华为云技术分享】一统江湖大前端DOClever—你的Postman有点Low
Mock服务器 + Excel怎么了如果你的开发进度还在被后端开发人员牵着鼻子走,请优化自己的开发工作流,有了Mock服务器和Excel的文档说明后,相信大家的沟通效率会比以前提升很多,但仍然被沟通 ...

大前端相关-nodejs到vue

大前端相关-nodejs到vue

一、前言

二、vscode安装

1.安装

2.vscode简单操作

三、Node.js

1.安装

2.测试安装成功

3.简单使用

4.前端连接数据库

四、ES6语法

1.ES6是什么

2.let和const

3.模板字符串

4.函数默认参数

5.箭头函数

6.对象初始化简写及案例分析

7.对象解构

8.对象传播操作符

9.数组Map

10.数组reduce

11.nodejs和<\script>

五、npm

1.介绍

2.作用

3.初始化项目

4.安装使用卸载模块介绍

5.package.json文件

6.cnpm

6-2安装cnpm出现错误

六、babel

1.介绍及作用

2.安装

3.使用

4.自定义脚本

七、模块化

1.介绍

2.CommonJS模块化规范

3.ES6模块化规范(常用)

4.es6的常见写法(3的改进版)

八、Webpack

1.介绍

2.安装

3.测试js打包步骤

4.测试Css打包

九、Vue-element-admin

大前端相关-nodejs到vue相关推荐

最新文章

热门文章