Inhaltsverzeichnis
- 01. Übersicht und Installation des Front-End-Tools vscode
- 02、Nodejs
- 03、ES6
-
- 3.1. ES6-Übersicht
- 3.2. ES6-Syntax: let- und const-Befehle
- 3.3. ES6-Syntax: Vorlagenzeichenfolge
- 3.4. ES6-Syntax: Funktionsstandardparameter und Pfeilfunktionen
- 3.5. ES6-Syntax: Abkürzung für Objektinitialisierung
- 3.6. ES6-Syntax: Objektdestrukturierung
- 3.7. ES6-Syntax: Ausbreitungsoperator
- 3.8. ES6-Syntax: Verwendung von Array-Map- und Reduce-Methoden
- 04. NPM-Paketmanager
- 05、Babel
- 06. Modularisierung
- 07、Webpack
- 08、vue-element-admin
Quellartikel: KuangStudy
01. Übersicht und Installation des Front-End-Tools vscode
-
Laden Sie VSCode herunter und installieren Sie es
Download-Adresse: VSCode
02、Nodejs
2.1. NodeJs installieren
Installationsadresse: NodeJs
Überprüfen Sie die erfolgreiche Installation
Einführung
- Node ist eine Entwicklungsplattform, die die Ausführung von JavaScript auf der Serverseite ermöglicht. Dadurch wird JavaScript zu einer Skriptsprache, die serverseitigen Sprachen wie PHP, Python, Perl und Ruby ebenbürtig ist. Es wurde im Mai 2009 veröffentlicht und von Ryan Dahl entwickelt und beinhaltet im Wesentlichen den Chrome V8-Motor.
- Einfach ausgedrückt ist Node.js JavaScript, das auf dem Server ausgeführt wird. Node.js ist eine Plattform, die auf der Chrome JavaScript-Laufzeitumgebung basiert. Die zugrunde liegende Architektur ist: Javascript. Dateisuffix: .js
- Node.js ist eine ereignisgesteuerte serverseitige JavaScript-Umgebung mit E/A, die auf der V8-Engine von Google basiert. Die V8-Engine führt Javascript sehr schnell aus und weist eine sehr gute Leistung auf.
Chinesische API-Dokumentation: http://nodejs.cn/api/
Tutorial zum Einstieg: http://nodejs.cn/learn
2.2. Erste Schritte mit NodeJs
2.2.1. Schnellstart – Hallo Welt
-
Erstellen Sie den Ordner NodeJs
-
Erstellen Sie eine neue Datei helloword.js
//相当于java的 System.out.print("hello word!") console.log("hello word!"); -
Öffnen Sie ein Befehlszeilenterminal: Strg + Umschalt + Y
Führen Sie Folgendes aus: Knoten .\helloword.js
Ergebnis: Hallo Wort!
Der Kernel des Browsers besteht aus zwei Kernteilen:
- DOM-Rendering-Engine
- Javascript-Parser (JS-Engine)
- js wird innerhalb der js-Engine im Browserkernel ausgeführt
Zusammenfassung
Node.js ist ein JavaScript-Programm, das unabhängig von der Browserumgebung läuft und auf der v8-Engine basiert.
2.2.2. Antwort auf die Knotenimplementierungsanfrage
-
Erstellen Sie eine neue helloserver.js
//导入模块是require 就类似java 的 import const http = require('http'); //1. 创建一个httpserver服务 http.createServer( function(require, response) { //浏览器怎么认识 hello server! //这句话的含义就是：告诉浏览器将以text/plain的形式去解析 response.writeHead(200,{ 'Content-Type':'text/html'}); //response.writeHead(200,{'Content-Type':'text/plain'}); //给浏览器输出内容 response.end("<strong>hello server!</strong>") } ).listen(8888); //2. 监听端口8888 //3. 启动运行服务 //4. 在浏览器访问http://localhost:8888 console.log("你启动的服务是http://localhost:8888")
2.2.3. Knotengesteuerte MySQL-Datenbank
Referenz: https://www.npmjs.com/package/mysql
-
Installieren Sie MySQL-Abhängigkeiten
-
Erstellen Sie eine neue Datenbank nodejsdb und eine Tabelle kss_user
/* Navicat MySQL Data Transfer Source Server : localhost Source Server Type : MySQL Source Server Version : 60011 Source Host : localhost:3306 Source Schema : testdb Target Server Type : MySQL Target Server Version : 60011 File Encoding : 65001 Date: 20/01/2021 21:38:55 */ SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------------- -- Table structure for kss_user -- ---------------------------- DROP TABLE IF EXISTS `kss_user`; CREATE TABLE `kss_user` ( `id` int(11) NOT NULL, `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, PRIMARY KEY (`id`) USING BTREE ) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact; -- ---------------------------- -- Records of kss_user -- ---------------------------- INSERT INTO `kss_user` VALUES (1, '学相伴'); INSERT INTO `kss_user` VALUES (2, '广东'); SET FOREIGN_KEY_CHECKS = 1; -
Definieren Sie db.js für den Betrieb
//导入mysql依赖包，mysql属于第三方的模块，就类似于java.sql var mysql = require("mysql"); //1. 创建一个mysql连接对象 //2. 配置数据连接的信息 var connection = mysql.createConnection({ host:"127.0.0.1", port:3306, user:"root", password:"123456", database:"nodejsdb" }); //3. 开辟连接 connection.connect(); //4. 执行CRUD connection.query("select * from kss_user", function(error, results, fields) { //如果查询异常，直接抛出 if(error)throw error; //查询成功，控制台打印 console.log("results=", results); }); //5. 关闭连接 connection.end();
03、ES6
3.1. ES6-Übersicht
ECMAScript ist eine Skript-Programmiersprache, die von Ecma International (ehemals European Computer Manufacturers Association) durch ECMA-262 standardisiert wurde. Diese Sprache ist im World Wide Web weit verbreitet und wird oft als JavaScript oder JScript bezeichnet, sodass sie als Standard für JavaScript verstanden werden kann. Tatsächlich handelt es sich bei den beiden letztgenannten um Implementierungen und Erweiterungen des ECMA-262-Standards.
Schnelle Leseentwicklung von ECMAScript:
Die Programmiersprache JavaScript ist eine Implementierung und Erweiterung von ECMAScript. ECMAScript ist eine von ECMA (einer W3C-ähnlichen Standardisierungsorganisation) standardisierte Syntaxspezifikation. ECMAScript definiert:
[Sprachgrammatik] – Grammatikanalyseregeln, Schlüsselwörter, Anweisungen, Deklarationen, Operatoren usw.
[Typ] – Boolescher Wert, Zahl, Zeichenfolge, Objekt usw.
[Prototyp und Vererbung]
Eingebaute Objekte und Funktionen
[Standardbibliothek] – [JSON], [Math], [Array-Methode], [Object Introspection Method] usw.
Der ECMAScript-Standard definiert weder verwandte Funktionen von HTML oder CSS noch [Web-API] wie DOM (Document Object Model), die alle in unabhängigen Standards definiert sind. ECMAScript deckt JS-Nutzungsszenarien in verschiedenen Umgebungen ab, unabhängig davon, ob es sich um eine Browserumgebung oder eine Nicht-Browser-Umgebung wie [node.js] handelt.
Die historischen Versionen des ECMAScript-Standards sind 1, 2, 3 und 5.
Warum gibt es also keine 4. Auflage? Tatsächlich gab es in der Vergangenheit tatsächlich den Plan, Version 4 zu veröffentlichen, die eine große Anzahl neuer Funktionen vorsah, aber am Ende wurde er verworfen, weil die Idee zu radikal war (diese Version des Standards war einst äußerst komplex aufgebaut). -in static, das Generika und Typinferenz unterstützt. Typsystem).
ES4 war umstritten, und als das Standardkomitee schließlich die Entwicklung von ES4 einstellte, stimmten seine Mitglieder der Veröffentlichung einer relativ bescheidenen Version von ES5 zu und arbeiteten dann an einigen substanzielleren neuen Funktionen. Dieses explizite Verhandlungsprotokoll wurde schließlich „Harmony“ genannt, daher enthält die ES5-Spezifikation diese beiden Sätze
ECMAScript ist eine dynamische Sprache, die sich ständig weiterentwickelt.
In zukünftigen Versionen der Spezifikation werden weiterhin wichtige technische Verbesserungen vorgenommen
Die 2009 veröffentlichte verbesserte Version ES5 führte [Object.create()], [Object.defineProperty()], [Getter] und [Setter], [Strikter Modus] und [JSON]-Objekte ein.
ES6: Es handelt sich um den Standard der JavaScript-Sprache der nächsten Generation, der im Juni 2015 offiziell veröffentlicht wurde. Ziel ist es, die Verwendung der JavaScript-Sprache zum Schreiben komplexer Großanwendungen zu ermöglichen und sie zu einer Entwicklungssprache auf Unternehmensebene zu machen.
Zusammenfassung:
ECMAScript ist die Syntaxspezifikation für Front-End-JS; sie kann in verschiedenen JS-Umgebungen angewendet werden. Zum Beispiel: Browser oder node.js-Umgebung.
Es gibt viele Versionen: es1/2/3/5/6 mit vielen neuen Funktionen, die in der js-Umgebung verwendet werden können.
3.2. ES6-Syntax: let- und const-Befehle
Definition von let und const
Neues HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//传统定义变量和常量的方式
var name = "Genius Sue";
var link = "https://blog.csdn.net/Daears";
var PI = Math.PI;
console.log(name);
console.log(link);
console.log(PI);
//ES6定义的方式
let name1 = "Genius Sue";
let link1 = "https://blog.csdn.net/Daears";
//定义常量
const PI1 = Math.PI;
console.log(name1);
console.log(link1);
console.log(PI1);
</script>
</body>
</html>
Der Unterschied zwischen let, const und var
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//let 和 const解决
//1.var的变量穿透问题
//2.常量修改的问题
for(var i=0;i<5;i++) {
console.log(i);
}
//这里造成变量穿透
console.log(i);
var PI = Math.PI;
//这里的常量可以被修改
PI = 100;
console.log(PI);
</script>
</body>
</html>
Optimiert
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
for(let i=0;i<5;i++) {
console.log(i);
}
//这里会报错： i is not defined
// console.log(i);
const PI = Math.PI;
//这里会报错： Assignment to constant variable.
PI = 100;
console.log(PI);
</script>
</body>
</html>
Wenn es sich in der tatsächlichen Entwicklung und Produktion um ein kleines Programm, eine Uniapp oder ein Gerüst handelt, können Sie mutig let und const verwenden
Wenn Sie jedoch ein Web entwickeln, wird empfohlen, weiterhin var zu verwenden. Weil einige Browser niedrigerer Versionen let und const immer noch nicht unterstützen
Zusammenfassung:
- let: veränderliche Variable
- const: ist eine Konstante
- var: das originellste
3.3. ES6-Syntax: Vorlagenzeichenfolge
Vorher: Wir haben immer „“ oder „“ zum Umbrechen von Zeichenfolgen verwendet
Jetzt: „[Backtick]“
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//字符串会牵涉到动态部分
var person = {
"name": "Genius Sue",
"address": "福州"
}
let str = "传统==>我是" + person.name + "，我在" + person.address + "上班";
console.log(str);
//ES6的语法模板字符串
let str2 = `ES6==>我是${
person.name}，我在${
person.address}上班`;
console.log(str2);
</script>
</body>
</html>
3.4. ES6-Syntax: Funktionsstandardparameter und Pfeilfunktionen
Standardparameter der Funktion
Fügen Sie einfach nach den Methodenparametern einen Standardwert hinzu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*函数默认参数
如果某个形参有了默认参数，则位于这个形参之后的所有形参都要有默认参数。
有了默认参数，仍然可以传递实参，这样形参的值按照传递的实参优先。
*/
function sum(a=100, b=100) {
return a + b;
}
//若函数参数没有默认值，为undefine，所以结果为NaN -> Not a Number
var result = sum(100);
console.log(result);
</script>
</body>
</html>
Pfeilfunktion
Pfeilfunktionen vereinfachen die Definition von Funktionen und ermöglichen es uns, die Verwendung des Funktionsschlüsselworts zu vermeiden
Sie können auf den Blog verweisen: (1 Nachricht) Anonyme Funktion (Lambda-Ausdruck) und Pfeilfunktion_maomaolaoshis Blog-CSDN blog_arrow-Funktion und Lambda-Ausdruck
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//箭头函数 -- 重点 类似于java lambda表达式
//（在未来的项目开发中，比如小程序，uniapp 一些常见的脚手架大量使用）
//--------------情况1-----------
var sum = function(a, b) {
return a + b;
}
//改进1
var sum = (a, b) => {
return a + b;
}
//改进2
var sum = (a, b) => a + b
/*通过上面可以找到规律
1.去掉function
2.在括号后面加箭头
3.如果逻辑代码只有一行可以不用{},如果是return 可以连return一起省略
4.如果函数参数只有一个，括号也可以省去，若有多个或者没有参数则不能省去
*/
var array = [1, 2, 3, 4, 5];
// var newarray = array.map(function(item) {
// return item*2;
// });
//改进
var newarray = array.map(item=>item*2);
console.log(newarray);
//--------------情况2-----------
var sum2 = function (a, b, c) {
let num = a + b + c;
return num;
}
//改进
var sum2 = (a, b, c) => {
let num = a + b + c;
return num;
}
//--------------情况3-----------
var sum3 = function (a) {
return a * 2;
}
//改进
var sum3 = a => a * 2;
</script>
</body>
</html>
3.5. ES6-Syntax: Abkürzung für Objektinitialisierung
Das bedeutet: Wenn Schlüssel und Wert in einem Objekt denselben Namen haben, können sie als eins definiert werden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let info = {
titile: "ES6",
link: "https://blog.csdn.net/Daears",
do: function () {
console.info("带薪学习");
}
}
//es6对象简写
//因为对象是key:value存在
//1. 如果key和变量名字一致，可以只定义一次即可
//2. 如果value是一个函数，可以把function去掉
let titile = "大前端";
let link = "https://blog.csdn.net/Daears";
var info2 = {
// titile:titile,
titile,
// link:link,
link,
do() {
console.info("带薪学习");
}
}
console.log(info2);
console.log(info2.titile);
info2.do();
var info3 = {
titile,
link,
sum(a=0,b=0) {
return a + b;
}
}
info3.titile="标题";
info3.link="链接地址";
console.log(info3);
console.log(info3.sum(100,200));
</script>
</body>
</html>
Fall:
<!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>对象简写</title>
</head>
<body>
<from action="#">
<p>
用户名：<input type="text" id="username">
</p>
<p>
密码：<input type="text" id="password">
</p>
<p>
<input type="button" value="登录" onclick="login()">
</p>
</from>
<script>
function login() {
var username = $("#username").val();
var password = $("#password").val();
// 发送ajax
$.ajax({
type: "post",
// 对象简写
data: {
username, password },
// 原始写分
//data:{username:username,password:password},
success() {
}
});
}
</script>
</body>
</html>
3.6. ES6-Syntax: Objektdestrukturierung
Kerncode
Objektdestrukturierung – es6 bietet einige schnelle Möglichkeiten, Objekteigenschaften und -verhalten zu erhalten
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//对象是key:value 存在，获取对象属性和方法的方式有两种
//1. 通过.
//2. 通过[]
var info2 = {
titile: "大前端",
link: "https://www.baidu.com",
go() {
console.info("做地铁上班");
}
}
// console.log(info2);
// 通过.的方式
console.log(info2.titile);
info2.go();
// 通过[]的方式
console.log(info2["titile"]);
info2["go"]();
//es6对象结构--其实就是快读获取属性和方法的方式 前提：默认情况titile必须是jsonkey.
var {
titile, go } = info2;
//还原代码
// var titile = info2.titile;
// var go = info2.go
console.log(titile);
// console.log(link); //报错:link is not defined
go();
var {
titile2, go } = info2;
console.log(titile2);//undefined
//可以用冒号取小名
var {
titile: title } = info2;
console.log(title);
</script>
</body>
</html>
3.7. ES6-Syntax: Ausbreitungsoperator
Eigenschaften eines Objekts an ein anderes Objekt weitergeben
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1： 定义一个对象
var person = {
name: '卢本伟',
age: 3,
address:"上海",
say:function(){
console.log("请阿姨喝一杯卡布奇诺");
}
};
// 2： 对象解构
var {
name, age,...person2 } = person;
console.log("======对象解构======");
console.log(name);
console.log(age);
console.log(person2);
// =========================== ... 对象融合=====================
var person2 = {
...person,
gender: 1,
tel: 11012012580
};
console.log("======对象融合======");
console.log(person2);
// =========================== ... 对象取值=====================
// ... 对象取值
var person3 = {
name: "厂长",
gender: 1,
tel: "4396",
};
console.log("创建一个对象", person3);
// ...person4 把剩下没取走给person4。
var {
name, gender, ...person4 } = person3;
console.log("======把剩下没取走给我======");
console.log(name);
console.log(age);
console.log(person4);
// =================场景分析 -----伪代码========================
// 模拟后台：异步查询返回用户数据 如下：
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 = {
pages:11,
pageSize:10,
pageNo:1,
firstFlag:true,
lastFlag:false,
total:123,
}; */
})
}
</script>
</body>
</html>
3.8. ES6-Syntax: Verwendung von Array-Map- und Reduce-Methoden
Anwendungsszenarien der Map-Methode in Arrays
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//对arr数组中每个元素*2
let arr = [1, 2, 3, 4, 5, 6, 7];
console.log("原数组", arr);
//传统方式
let newarr = [];
for (let i = 0; i < arr.length; i++) {
newarr.push(arr[i] * 2);
}
console.log("操作后数据(传统)", newarr);
/*
map方式 -- 自带循环功能，
可以将原数组中的所有元素通过一个函数进行处理，
并放入到一个新数组中并返回该新数组。
*/
// let newarr2 = arr.map(function (item) {
// return item * 2;
// });
// 简写
let newarr2 = arr.map(item => item * 2);
console.log("操作后数据(map)", newarr2);
//=========================
var users = [{
name: "Genius Sue", age: 18 }, {
name: "GCD", age: 18 }];
//如果不使用return会改变原来的数组
users.map(ele => {
ele.age = ele.age + 1;
ele.address = "福州";
});
console.log("操作后数据", users);
</script>
</body>
</html>
reduzieren
Reduce(Funktion(), Anfangswert (optional)):
Empfängt eine Funktion (erforderlich) und einen Anfangswert (optional). Die Funktion empfängt zwei Parameter:
- Der erste Parameter ist das Ergebnis des letzten Reduzierungsprozesses
- Der zweite Parameter ist das nächste zu verarbeitende Element im Array.
Reduce() reduziert die Elemente im Array von links nach rechts und verwendet das Verarbeitungsergebnis als ersten Parameter der nächsten Reduzierung. Beim ersten Mal werden die ersten beiden Elemente als Berechnungsparameter oder der vom Benutzer angegebene Anfangswert als Startparameter verwendet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
//a = 1,b = 2 sum = 3;
//a = 3,b = 3 sum = 6;
// let sum = arr.reduce(function (a, b) {
// return a + b;
// });
//简写
let sum = arr.reduce((a, b) => a + b);
console.log(sum);//55
</script>
</body>
</html>
04. NPM-Paketmanager
4.1. Einführung
Offizielle Website: https://www.npmjs.com/
NPM, der Full-Node-Paketmanager, ist ein Paketverwaltungstool von node.js. Es handelt sich um das weltweit größte Modul-Ökosystem. Alle darin enthaltenen Module sind Open Source und kostenlos. Es handelt sich auch um ein Paketverwaltungstool von node.js, ähnlich der Rolle von Maven.
#在命令提示符输入 npm -v 可查看当前npm版本
npm -v
4.2. Verwenden Sie npm, um Projekte zu verwalten
-
Erstellen Sie den Ordner npm
-
Projektinitialisierung
#建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化 npm init #按照提示输入相关信息，如果是用默认值则直接回车即可。 #name: 项目名称 #version: 项目版本号 #description: 项目描述 #keywords: {Array}关键词，便于用户搜索到我们的项目 #最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml #我们之后也可以根据需要进行修改#如果想直接生成 package.json 文件，那么可以使用命令 npm init -y
4.3. NPM-Image ändern
-
Ändern Sie das NPM-Image
Die von NPM verwalteten offiziellen Pakete werden alle von https://www.npmjs.com/ heruntergeladen, aber diese Website ist in China sehr langsam.
Es wird empfohlen, den Taobao NPM-Spiegel https://npmmirror.com/ zu verwenden.
Das Taobao NPM-Image ist ein vollständiges npmjs.com-Image. Die Synchronisierungsfrequenz beträgt derzeit alle 10 Minuten, um sicherzustellen, dass es so weit wie möglich mit dem offiziellen Dienst synchronisiert ist.
npm install -g cnpm --registry=https://registry.npmmirror.com
-
Spiegeladresse festlegen
#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载 npm config set registry https://registry.npm.taobao.org #查看npm配置信息 npm config list
4.4, NPM-Installation
#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
npm install jquery
#如果安装时想指定特定的版本
npm install [email protected]
#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或
npm install -D eslint
#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install -g webpack
#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install #根据package.json中的配置下载依赖，初始化项目
4.5. Andere Befehle
#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名
05、Babel
5.1. Einführung in Babel
babel ist ein weit verbreiteter Transcoder, der ES6-Code in ES5-Code konvertieren kann, sodass er in der vorhandenen Umgebung ausgeführt werden kann.
5.2. Installation von Babel
Installieren Sie das Befehlszeilen-Transkodierungstool
Babel stellt das Tool babel-cli für die Befehlszeilentranskodierung bereit. Der Installationsbefehl lautet wie folgt:
npm install -g babel-cli
#查看是否安装成功
babel --version
5.3. Verwendung von Babel
-
Ordner babel erstellen
-
Projekt initialisieren
npm init -y -
Erstellen Sie die Datei src/example.js. Hier ist ein Teil des ES6-Codes:
//ES6 let name = "Genius Sue"; const title = "福州"; let arr = [1,2,3,4,5,6,7,8,9,10]; let newarr = arr.map(a=>a*2); console.log(newarr); -
config.babelrc
Die Konfigurationsdatei von Babel ist .babelrc und wird im Stammverzeichnis des Projekts gespeichert. Diese Datei wird zum Festlegen von Transkodierungsregeln und Plug-Ins verwendet. Das Grundformat ist wie folgt:
{ "presets": [], "plugins": [] }Legen Sie die Transkodierungsregeln im Feld „Voreinstellungen“ fest und fügen Sie die es2015-Regeln zu .babelrc hinzu
{ "presets": ["es2015"], "plugins": [] } -
Installieren Sie den Transcoder und installieren Sie ihn im Projekt
npm install --save-dev babel-preset-es2015 #或者 cnpm install --save-dev babel-preset-es2015 -
Transkodieren
babel src -d distAutomatisch generiert
Vergleich vor und nach der Konvertierung
expandieren:
# npm install --save-dev csv-loader xml-loader
# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js
# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2
Die endgültige Projektverzeichnisstruktur
5.4. Benutzerdefiniertes Skript
-
Schreiben Sie package.json neu
{ "name": "babel", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"babel src -d dist" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-preset-es2015": "^6.24.1" } }Hauptsächlich hinzugefügt
"dev": "babel src -d dist2" -
Führen Sie beim Transkodieren den folgenden Befehl aus
npm run devbabel src -d distEs hat auch den gleichen Effekt wie die direkte Eingabe des obigen Befehls.
06. Modularisierung
6.1. Einführung
Der Hintergrund der Modularisierung
Da Websites nach und nach zu „Internetanwendungen“ werden, wird der in Webseiten eingebettete Javascript-Code größer und komplexer.
Die modulare Javascript-Programmierung ist zu einem dringenden Bedarf geworden. Im Idealfall müssen Entwickler nur die Kerngeschäftslogik implementieren und andere Module können von anderen geladen werden. Allerdings ist Javascript keine modulare Programmiersprache und unterstützt keine Konzepte wie „class“ (Klasse), Paket (Paket) oder „Modul“ (Modul).
Modulare Spezifikation
- Modulare CommonJS-Spezifikation
- ES6-Modularitätsspezifikation
6.2. CommonJS-Spezifikationen
Jede Datei ist ein Modul und hat ihren eigenen Gültigkeitsbereich. In einer Datei definierte Variablen, Funktionen und Klassen sind privat und für andere Dateien nicht sichtbar.
-
Erstellen Sie einen Ordner MODULEPRO und ein neues Verzeichnis module
-
Erstellen Sie neue commonjs/vier arithmetische Operationen.js
// 定义成员： const sum = function(a,b){ return a + b } const subtract = function(a,b){ return a - b } const multiply = function(a,b){ return a * b } const divide = function(a,b){ return a / b } // 导出成员： module.exports = { sum: sum, subtract: subtract, multiply: multiply, divide: divide } -
Erstellen Sie ein neues commonjs/import module.js
//require 引入模块，注意：当前路径必须写 ./ const m = require("./四则运算.js"); console.log(m.sum(1,2)); //Common JS 模块化开发 exports 和 require来导入、导出模块。 必须先导出了才能使用
6.3. Modulare ES6-Spezifikation
ES6 verwendet Export und Import, um Module zu exportieren und zu importieren.
-
Erstellen Sie unter dem Modul ein neues es6-Verzeichnis
-
Erstellen Sie ein neues src/userApi.js-Exportmodul
export function getUserList() { console.log("获取用户列表"); }; export function save() { console.log("保存数据"); }; -
Erstellen Sie ein neues src/userTest.js-Importmodul
//只取需要的方法即可，多个方法用逗号分隔 import { getUserList, save } from "./userApi.js"; getUserList(); save(); //注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。 -
Wenn Sie zu diesem Zeitpunkt den Knoten .\src\userTest.js direkt ausführen, wird ein Fehler gemeldet.
-
Sie müssen babel zum Downgrade verwenden und zunächst das Projekt initialisieren
npm init -y -
Erstellen Sie eine neue .babelrc-Konfigurationsdatei
{ "presets": ["es2015"], "plugins": [] } -
Transcoder installieren
npm install --save-dev babel-preset-es2015 -
Ändern Sie package.json, um Build hinzuzufügen
{ "name": "es6", "version": "1.0.0", "description": "", "main": "userApi.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "babel src -d dist" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-preset-es2015": "^6.24.1" } } -
Befehlstranskodierung ausführen
npm run build -
Programm ausführen
node .\dist\userTest.js
6.4. Modulare ES6-Schreibmethode 2
-
Erstellen Sie unter dem Modul ein neues es62-Verzeichnis
-
Erstellen Sie ein neues src/userApi.js-Exportmodul
export default { getUserList() { console.log("获取用户列表"); }, save() { console.log("保存数据"); } } -
Erstellen Sie ein neues src/userTest.js-Importmodul
import user from "./userApi.js"; user.getUserList(); user.save(); -
Befehlstranskodierung ausführen
npm run build5. Führen Sie das Programm aus
node dist/userComponent2.js
07、Webpack
7.1. Was ist Webpack?
Webpack ist ein Front-End-Tool zum Laden/Verpacken von Ressourcen. Es führt eine statische Analyse basierend auf Modulabhängigkeiten durch und generiert dann gemäß den angegebenen Regeln entsprechende statische Ressourcen für diese Module.
Aus der Abbildung können wir ersehen, dass Webpack eine Vielzahl statischer Ressourcen (JS, CSS usw.) in eine statische Datei konvertieren kann, wodurch Seitenanforderungen reduziert werden.
Offizielle chinesische Dokumentation: https://www.webpackjs.com/
7.2. Webpack-Installation
-
Globale Installation
npm install -g webpack webpack-cli -
Überprüfen Sie, ob die Installation erfolgreich war
webpack -v
7.3. Projekt initialisieren
-
Erstellen Sie einen Webpack-Ordner
npm init -y -
Erstellen Sie einen SRC-Ordner
-
Erstellen Sie common.js unter src
exports.info = function (str) { document.write(str); } -
Erstellen Sie utils.js unter src
exports.add = function (a, b) { return a + b; } -
Erstellen Sie main.js unter src
const common = require('./common'); const utils = require('./utils'); common.info('Hello World!'+utils.add(100,100));
7.4. js-Verpackung
-
Erstellen Sie die Konfigurationsdatei webpack.config.js im Webpack-Verzeichnis
//导入path模块，nodejs内置模块 const path = require("path"); //定义js打包的规则 module.exports = { //1.入口函数从哪里开始进行编译打包 entry: "./src/main.js", //2：编译成功以后把内容输出到哪里去 output: { //2-1:定义输出的指定目录，__dirname当前项目的根目录，生成一个dist文件夹 path: path.resolve(__dirname, "./dist"), //2-2:合并的js文件存在dist/bundle.js文件中 filename: "bundle.js" } } -
Kompilierungsbefehl über die Befehlszeile ausführen
webpack --mode=development #执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码压缩Sie können auch den NPM-Ausführungsbefehl des Projekts konfigurieren und die Datei package.json ändern
//... "scripts": { //... "build": "webpack --mode=development" } //...,Führen Sie den Befehl npm aus, um die Paketierung durchzuführen
npm run build -
Erstellen Sie index.html im Webpack-Verzeichnis und verweisen Sie auf bundle.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="dist/bundle.js"></script> </body> </html> -
Zeigen Sie index.html im Browser an
7.5. CSS-Verpackung
-
Installieren Sie den Style-Loader und den CSS-Loader
webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用loader进行转换 loader可以理解是模块和资源的转换器 首先我们需要安装loader插件 css-loader是将css装载到JavaScript style-loader是让JavaScript认识cssnpm install --save-dev style-loader css-loader -
Ändern Sie webpack.config.js
//导入path模块，是nodejs的内置模块 const path = require("path"); //定义js打包的规则 module.exports = { //1.入口函数从哪里开始进行编译打包 entry: "./src/main.js", //2：编译成功以后把内容输出到哪里去 output: { //2-1:定义输出的指定目录，__dirname当前项目的根目录，生成一个dist文件夹 path: path.resolve(__dirname, "./dist"), //2-2:合并的js文件存在dist/bundle.js文件中 filename: "bundle.js" }, module:{ rules:[ { test: /\.css$/, //打包规则应用到以css结尾的文件上 use: ['style-loader', 'css-loader'] } ] } } -
Erstellen Sie style.css im src-Ordner
body{ background:pink; font-size: 40px; } -
Ändern Sie main.js und führen Sie style.css in die Remote-Navigation ein
const common = require('./common'); const utils = require('./utils'); const css = require('./style.css'); common.info('Hello World!'+utils.add(100,100)); -
Führen Sie den Verpackungsbefehl aus
npm run dev -
Sehen Sie sich index.html im Browser an, um den Effekt zu sehen
08、vue-element-admin
vue-element-admin ist eine Backend-Frontend-Lösung, die auf Basis von vue] und element-ui implementiert wird. Es nutzt den neuesten Front-End-Technologie-Stack, eine integrierte i18-Internationalisierungslösung, dynamisches Routing und Berechtigungsüberprüfung, verfeinert typische Geschäftsmodelle und bietet umfangreiche Funktionskomponenten. Es kann Ihnen dabei helfen, schnell Middle- und Back-End-Produktprototypen auf Unternehmensebene zu erstellen . Ich glaube, dass dieses Projekt Ihnen helfen kann, egal welche Bedürfnisse Sie haben.
Offizielle Website-Adresse: https://panjiachen.github.io/vue-element-admin-site/zh/
Quellcode: https://github.com/PanJiaChen/vue-element-admin
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 进入项目目录
cd vue-element-admin
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 启动服务
npm run dev
Browserzugriff http://localhost:9527
Hier sind einige Blogs zur Problemlösung, die ich gefunden habe, als ich auf ein Problem stieß: