来源

课程-KuangStudy

学相伴 - 大前端进阶 - 篇章学习-KuangStudy-文章

大前端技能最通俗易懂的讲解必看！最快的时间带你了解NodeJS、Npm、Es6、Babel、Webpack、模块化使用，从此看前端代码再无惧怕！

1、前端开发和前端开发工具
2、Nodejs安装及快速入门
3、Es6的新语法糖
4、Npm包管理器
5、Babel的安装作用
6、模块化管理
7、Webpack打包和编译
8、如何快速构建一个nodejs项目vue-element-admin

01、工具

HBuilder X

HBuilderX-高效极客技巧 (dcloud.io)

在这里插入图片描述

02、Nodejs

2.1、Nodejs介绍与安装

目标：了解nodejs、并且在本地安装好这个软件
官网： http://nodejs.cn/
介绍：

Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。底层架构是：javascript. 文件后缀：.jsNode.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

2.2、Nodejs入门

目标：控制台输出字符串、使用函数、进行模块化编程

2.2.1、快速入门-Hello World

1、创建文件夹 nodejs
2、创建 helloworld.js

console.log('Hello World!!!')

运行：node helloworld.js

结果：

image-20220115113753897

浏览器的内核包括两部分核心：

DOM渲染引擎；
java script 解析器（js引擎）
js运行在浏览器内核中的js引擎内部

小结

Node.js是脱离浏览器环境运行的JavaScript程序，基于V8 引擎

2.2.2、Node - 实现请求响应

1、创建 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/plain'}); // 给浏览器输出内容response.end("<p>hello server!!!</p>");}).listen(8888);// 2: 监听一端口8888console.log("你启动的服务是：http://localhpst:8888以启动成功!!");

2、运行服务器程序；

node httpserver.js

3、服务器启动成功后，在浏览器中输入：http://localhost:8888/ 查看webserver成功运行，并输出html页面
在这里插入图片描述

4、停止服务：ctrl + c

2.2.3、Node-操作MYSQL数据库

参考：https://www.npmjs.com/package/mysql

1：安装mysql依赖

npm install mysql

在这里插入图片描述

2.数据库

在这里插入图片描述

3：定义db.js进行操作

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

4.运行js

node db.js

如果想开发更复杂的基于Node.js的应用程序后台，需要进一步学习Node.js的Web开发相关框架 express，art-template、koa等

03、Es6

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言

ECMAScript是前端js的语法规范；可以应用在各种js环境中。如：浏览器或者node.js环境。
它有很多版本：es1/2/3/5/6，很多新特性，可以在js环境中使用这些新特性。

Es6有许多语法糖：简化原来的代码。但不一定好用

3.2、ES6的语法：let和const命令

变量和常量的严格区分。

核心代码：

新建espro6\demo01.html如下

<!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>
</head>
<body><script>// 1： 在javascrit定义数据类型只有一种标识 - var// 灵活拷问：js有数据类型吗？// 有，string,number,Object, boolean, undefinedlet name = "zhangsan";let age = 100;let flag = false;   //js被骂没常量const PI = Math.PI;// 修改会报错//PI = 1245;console.log(PI)//var或造成变量穿透for(let i=0;i<5;i++){console.log(i);};// console.log("===这里就是变量穿透===>" + i)</script>
</body>
</html>

小结

let : 可变变量
const 是常量
var：最原始。

3.3、ES6的语法：模板字符串

以前：我们都是使用 ‘’ 或者 “” 来把字符串套起来

现在： `` 【反引号】

第一个用途：基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

//es5    
let name = 'itcast'    
console.log('hello ' + name)    //es6    
const name = 'itcast'    
console.log(`hello ${name}`) //hello itcast

第二个用途：在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

新建一个espro6\demo02.html如下：

<!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><script>var username = "张三";var age = 30;// 1: 原始的做法就是去拼接字符串var str = "我名字叫 " + username+",年龄是: "+age;console.log(str);  // 2:用模板字符串来拯救 注意：这里是 `（飘键） (tab键盘的上面那个键)// jdk1.9 var str2 = `我名字叫 ${username},年龄是: ${age}`;console.log(str2);</script>
</body>
</html>

3.4、ES6的语法：函数默认参数与箭头函数

函数默认参数
在方法的参数后面加上一个默认值即可
核心代码

// 默认参数 给参数列表设定初始值
function add(a = 100, b = 100) {console.log(a, b);
}
// 执行方法，会用默认值填充，打印出来100,200
add();
// 覆盖默认值打印  结果是1，2      
add(1, 2);

E:\Project\大前端\Kuang_Node_js\Kuang_Node_js\ES6>node demo.js
100 100
1 2

箭头函数

箭头函数简化函数的定义，可以让我们不用使用function关键字

箭头函数最直观的三个特点。
1不需要function关键字来创建函数
2省略return关键字
3继承当前上下文的 this 关键字

// 箭头函数// 它也是一种函数的定义，它简化定义仅此而已。// 步骤：1：去掉function  2: 括号后面加箭头。// 1:声明式的定义function add() {};// 2:表达式的定义var add2 = function() {}// 3:箭头函数的定义var sum = (a = 100, b = 300) => {console.log(a + b);};// 这里执行箭头函数sum(50, 50);// 这里执行箭头函数sum();// 这里执行箭头函数sum(400);

E:\Project\大前端\Kuang_Node_js\Kuang_Node_js\ES6>node demo.js
100
400

箭头函数深度学习

// 箭头函数// 它也是一种函数的定义，它简化定义仅此而已。// 步骤：1：去掉function  2: 括号后面加箭头。// 无参数的函数var sum = function(){}// 箭头改造如下var sum = ()=>{}// 有参数// 第一种情况  一个参数的如下var sum2 = function(a){};// 箭头改造如下var sum2 = (a) => {};var sum2 = a => {return a;};// 第二种情况 二个参数的以上,记住括号一定要加var sum3 = function(a,b){return a + b;};// 箭头改造如下var sum3 = (a, b) => {return a + b;};// 第三种情况，如果没有逻辑体，只有返回值可以简化如下var sum4 = function(a,b){return a + b;};// 箭头改造如下var sum4 = (a, b) => a + b// 执行console.log(sum2(100));console.log(sum3(100, 100));console.log(sum4(100, 100));

3.5、ES6的语法：对象初始化简写

它是指：如果一个对象中的key和value的名字一样的情况下可以定义成一个。

 function person(name, age) {//return {name:name,age:age};// 对象简写return { name, age };};// 调用和执行var json = person("小花花美美", 20);console.log(json.name, json.age);//========================= 实战应用 =========================//<button οnclick="login()">登录</button>function login() {var username = $("#username").val();var password = $("#password").val();// 发送ajax$.ajax({type: "post",// 对象简写data: { username, password },// 原始写分//data:{username:username,password:password},success() {}});}

3.6、ES6的语法：对象解构

对象解构 —- es6提供一些获取快捷获取对象属性和行为方式

// 对象解构 --- es6提供一些获取快捷获取对象属性和行为方式var person = {name: 'zhangsan',age: 32,language: "cn",// 函数也有处理/* say:function(){console.log(this.name+"年龄是：" + this.age);}   *//* say:()=>{console.log(this.name+"年龄是：" + this.age);}  */say() {console.log(this.name + "年龄是：" + this.age);}};// ===========================传统的做法========================var name = person.name;var age = person.age;person.say();// ===========================对象解构做法========================//es6的做法 前提：默认情况name,age必须是jsonkey.var {name,age} = person;console.log(name, age);// 可以用冒号取小名var {name,age,language: lan} = person;console.log(name, age, lan);

E:\Project\大前端\Kuang_Node_js\Kuang_Node_js\ES6>node demo.js
zhangsan年龄是：32
zhangsan 32
zhangsan 32 cn

3.7、ES6的语法：传播操作符【…】

把一个对象的属性传播到另外一个对象中

// 1： 定义一个对象
var person1 = {name: '小飞飞',age: 16,
};
// 2： 对象解构
var {name,age
} = person1;
// =========================== ... 对象融合=====================
var person2 = {...person1,gender: 1,tel: 13478900
};console.log(person2);  // { name: '小飞飞', age: 16, gender: 1, tel: 13478900 }// =========================== ... 对象取值=====================
// ... 对象取值
var person3 = {name: "李四",gender: 1,tel: "11111",address: '广州'
};
// ...person4 把剩下没取走给我。
var {name,gender,...person4
} = person3;
console.log(name) //  李四
console.log(age) //  16
console.log(person4) //  { tel: '11111', address: '广州' }

// =================场景分析 -----伪代码========================
// 模拟后台：异步查询返回用户数据 如下：
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,}; */})
}

ES6的语法：数组map和reduce方法使用(了解)

目标：数组中map方法的应用场景

讲解：数组中新增了map和reduce方法。

1.map()

方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组。

举例：有一个字符串数组，希望转为int数组

let arr = ['1', '20', '-5', '3'];// 1:数据类型的更改 map自身循环的功能
// 2:map方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组。
var newarr = arr.map(function (value) {return parseInt(value) * 2;
});
/* 
// 箭头简化01
var newarr = arr.map(value=>{return parseInt(value) * 2;
});
// 箭头简化02
var newarr = arr.map(value => parseInt(value) * 2);
*/
console.log("原数组：", arr);  //原数组： [ '1', '20', '-5', '3' ]
console.log("map的newarr数组：", newarr); // 2 40 -10 6

reduce 计算方法

//reduce 计算方法
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var result = arr2.reduce((a, b) => a + b);
console.log(result);//55

reduce(function(),初始值（可选）) ：

接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

第一个参数是上一次reduce处理的结果
第二个参数是数组中要处理的下一个元素
reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

//reduce 计算方法 
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 箭头写法 -- 1到10相加 
var result = arr2.reduce((a, b) => a + b);
// 原始写法  -- 1到10相加
//var result = arr2.reduce(function(a,b){
//    return a+b;
//})
console.log(result); //55

04、NPM包管理器

官方网站：https://www.npmjs.com/
NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。

#在命令提示符输入 npm -v 可查看当前npm版本
npm -v

4.2、使用npm管理项目

1、创建文件夹npm

2、项目初始化

#建立一个空文件夹，在命令提示符进入该文件夹  执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。

#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y

1、修改npm镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/

淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

2、设置镜像地址

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息
npm config list

在这里插入图片描述

4.4、npm install

#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
npm install jquery
#如果安装时想指定特定的版本
npm install jquery@2.1.x
#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、其他命令

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

05、Babel

5.1、简介

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

5.2、安装

安装命令行转码工具

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

npm install -g babel-cli
#查看是否安装成功
babel --version

在这里插入图片描述

5.3、Babel的使用

1、创建babel文件夹

2、初始化项目

npm init -y

在这里插入图片描述

3、创建文件 src/example.js ，下面是一段ES6代码：

// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)

4、配置 .babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。

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

presets字段设定转码规则，将es2015规则加入 .babelrc：

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

5、安装转码器，在项目中安装

npm install --save-dev babel-preset-es2015

在这里插入图片描述

6、转码

# 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

转码前

// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)

转码后

"use strict";// 转码前
// 定义数据
var input = [1, 2, 3];
// 将数组的每个元素 +1
input = input.map(function (item) {return item + 1;
});
console.log(input);

5.4、自定义脚本

1、改写package.json

{// ..."scripts": {// ...// 新增"build":  "babel src\\example.js -o dist\\compiled.js"},
}

2、转码的时候，执行下面的命令

mkdir dist
npm run build

06、模块化

6.1、简介

模块化产生的背景

随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，**开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。**但是，Javascript不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，也不支持”模块”（module）。

模块化规范

CommonJS模块化规范
ES6模块化规范

6.2、CommonJS规范

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

1、创建“module”文件夹

2、创建 mokuai-common-js/四则运算.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
}

导出成员的简写

//简写
module.exports = {sum,subtract,multiply,divide
}

4、创建 mokuai-common-js/引入模块.js

//引入模块，注意：当前路径必须写 ./
const m = require('./四则运算.js')
console.log(m)
const r1 = m.sum(1,2)
const r2 = m.subtract(1,2)
console.log(r1,r2)

5、运行程序

E:\Project\大前端\Kuang_Node_js\Kuang_Node_js\module\mokuai-common-js>node 引入模块.js
{sum: [Function: sum],subtract: [Function: subtract],multiply: [Function: multiply],divide: [Function: divide]
}
3 -1

6.3、ES6模块化规范

ES6使用 export 和 import 来导出、导入模块。

1、创建 mokuai-es6 文件夹

2、创建 src/userApi.js 文件，导出模块

export function getList() {console.log('获取数据列表')
}
export function save() {console.log('保存数据')
}

3、创建 src/userComponent.js文件，导入模块

//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from './userApi.js'
getList()
save()

注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。

SyntaxError: Cannot use import statement outside a module

4、初始化项目

npm init -y

5、配置 .babelrc

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

6、安装转码器，在项目中安装

npm install --save-dev babel-preset-es2015

7、定义运行脚本，package.json中增加”build”

{// ..."scripts": {"build": "babel src -d dist"}
}

8、执行命令转码,得到dist/

npm run build

在这里插入图片描述

9、运行程序

node dist/userComponent.js

在这里插入图片描述

转码前

export function getList() {console.log('获取数据列表')
}
export function save() {console.log('保存数据')
}

转码后

'use strict';Object.defineProperty(exports, "__esModule", {value: true
});
exports.getList = getList;
exports.save = save;
function getList() {console.log('获取数据列表');
}
function save() {console.log('保存数据');
}

转码前

//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from './userApi.js'
getList()
save()

转码后

'use strict';var _userApi = require('./userApi.js');(0, _userApi.getList)(); //只取需要的方法即可，多个方法用逗号分隔(0, _userApi.save)();

6.4、ES6模块化写法2

1、创建 src/userApi2.js ，导出模块

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

2、创建 src/userComponent2.js，导入模块

import user from "./userApi2.js"
user.getList()
user.save()

运行

//执行命令转码
npm run build
//运行程序
node dist/userComponent2.js

在这里插入图片描述

07、Webpack

7.1、什么是Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

7.2、Webpack安装

1、全局安装

npm install -g webpack webpack-cli

2、安装后查看版本号

webpack -v

在这里插入图片描述

7.3、初始化项目

1、创建webpack文件夹

npm init -y

2、创建src文件夹

3、src下创建common.js

exports.info = function (str) {document.write(str);
}

4、src下创建utils.js

exports.add = function (a, b) {return a + b;
}

5、src下创建main.js

const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));

7.4、JS打包

1、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' //输出文件}
}

以上配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

2、命令行执行编译命令

webpack --mode=development
#执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码压缩

也可以配置项目的npm运行命令，修改package.json文件

"scripts": {//...,"dev": "webpack --mode=development"}

运行npm命令执行打包

npm run dev

在这里插入图片描述

3、webpack目录下创建index.html ，引用bundle.js

<body><script src="dist/bundle.js"></script>
</body>

4、浏览器中查看index.html

在这里插入图片描述

7.5、Css打包

1、安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件

css-loader 是将 css 装载到 javascript
style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader

2、修改webpack.config.js

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

3、在src文件夹创建style.css

body{    background:pink;
}

4、修改main.js，在第一行引入style.css

require('./style.css');

5、运行编译命令

npm run dev

6、浏览器中查看index.html ，看看背景是不是变成粉色啦？

把这些知识都学习完毕了，那我们之后学习 Vue 就轻松啦！这些都是现在前端工程师的基础！

08、Vue-element-admin

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

官网地址：https://panjiachen.github.io/vue-element-admin-site/zh/

运行工程和编译工程

# 克隆项目
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

注意如果老是安装失败：

请删除 node-modules 然后执行npm install
或者换个网络

启动完成后会自动打开浏览器访问 http://localhost:9527，你看到下面的页面就代表操作成功了。

小结

nodejs项目几要素

package.json (npm init \ npmt init -y)
node_modules (npm install -g jquery/npm iinstall jquery)
运行是使用：查看官网提供几乎所有的nodejs都启动和打包都是如下：
- npm run dev （开发运行）
- npm run build (打包)

探究：package.json

1：在发布项目或者拷贝项目的时候，node_moudles其实是没意义的。因为它仅仅在开发和打包的时候使用

2：如果托管代码其实没必要，为什么。因为你package.json文件中已经记录了这些模块坐标。我们可以直接使用npm install 去重新安装和生成node-modules 。所以的nodejs项目下载以后第一个要执行的命令都是npm install的原因也就是如此。

3：这也就是为什么官方不提供node-modules的原因。因为你可以直接用npm install 去下载

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Spring-Boot参数校验规范 Bean Validation ； Hibernate Validator
Spring-Boot引入版本依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId> </dependency>注意，高版本的Spring-boot，不需要再单独引入validati…...
2024/5/7 0:03:18
pytest学习第一天
pytest学习第一天pytest常用操作一般命名规则运行方式参数详解改变测试执行顺序跳过用例分组执行pytest常用操作该文章用于记录学习pytest的历程，结合B站学习结合，有什么错误，希望您能够指出。若有侵权的部分，请私信&#xff01…...
2024/4/30 10:30:49
0115嵌入式学习2
敲重点：独家秘方梨子＋川贝冰糖蒸，吃，治慢性咽喉炎文件目录处理 ls 显示文件 -a 包括隐藏文件一起显示 -l 使用长格式列出文件及目录信息 S （按照文件大小排序） t （按照时间排序&…...
2024/4/17 5:39:10
MySQL-5函数
MySQL-5函数文章目录MySQL-5函数概述分类聚合函数概述格式操作创建数据库和表向表中插入值实验数学函数字符串函数日期函数控制流函数if逻辑判断语句case when语句窗口函数介绍分类窗口函数语法结构序号函数格式操作开窗聚合函数-SUM，AVG，MIN&#xff0…...
2024/4/5 5:23:16
《ZLToolKit源码学习笔记》（19）网络模块之套接字封装
系列文章目录《ZLToolKit源码学习笔记》（1）VS2019源码编译《ZLToolKit源码学习笔记》（2）工具模块之日志功能分析《ZLToolKit源码学习笔记》（3）工具模块之终端命令解析《ZLToolKit源码学习笔记》&am…...
2024/4/19 20:37:23
新概念英语第一册学习笔记
新概念英语第一册 21 祈使句请给我一本书 give me a book please 请递给我一本书 pass me a book pass me:递给哪一本书 which book? 这一本书吗 this one? 红色的这本 the red one 不是那本 not that one 给你 here you are 语法 you give me a book 主语谓语…...
2024/4/14 18:41:34
Java常用类学习笔记
内部类成员内部类静态内部类局部内部类匿名内部类内部类特点： 1.编译之后会生成独立的字节码文件 2.内部类可直接访问外部类的私有成员，而不破坏封装 3.内部类可以为外部类提供必要的内部功能组件成员内部类在类的内部定义，与实例变量…...
2024/5/4 20:26:20
【Swift】LeetCode 罗马数字转整数
由于各大平台的算法题的解法很少有Swift的版本，小编这边将会出个专辑为手撕LeetCode算法题。新手撕算法。在这里插入代码片罗马数字包含以下七种字符: I， V， X， L，C，D 和 M。字符数值 I …...
2024/4/28 14:48:54
刨根问底: Kafka 到底会不会丢数据？
大家好，我是华仔, 又跟大家见面了。上一篇作为专题系列的第二篇，从演进的角度带你深度剖析了关于 Kafka 请求处理全流程以及超高并发的网络架构设计的实现细节，今天开启第三篇，我们来聊聊 Kafka 生产环境大家都比较关心的问题。…...
2024/4/28 3:23:58
git从入门到入门
一、Git命令行操作安装好git之后，可以在D盘下建立一个文件夹用于学习测试D:\git_study 在文件夹D:\git_study中，右键打开Git Bash Here 新建文件夹git01，cd git01进入，作为一个本地仓库 1.初始化本地仓库 git init git01中会出…...
2024/4/28 15:49:03
黄帝81难经
一难： 十二经①中皆有动脉，独取寸口②，以决五脏六腑死生吉凶之法，何谓也？ ①十二经：手足三阴三阳也。动脉，脉之动现于外，如手太阴天府、云门之类，按之其动亦应手是也。…...
2024/4/28 17:18:25
程序人生总结
patience [ˈpeɪʃns] n. 耐心; 忍耐力; 毅力 persistence [pəˈsɪstəns] n 坚持不懈坚持 Skill comes only with practice, patience and persistence 只有不断练习，有耐心有毅力，才能学会一门技艺。 attract [əˈtrkt] 吸引引起…的好感(或爱慕…...
2024/4/27 23:43:18
优质学习套装
刻意练习：如何从新手到大师练习的心态：如何培养耐心、专注和自律学习之道无论是学习小的生活技能，如打球、开车、弹琴、烹饪， 还是提升关键的工作能力，如写作、销售、编程、设计， 都离不开大量的练习。…...
2024/4/28 20:27:58
OSPF综合实验
实验目标： 实验配置： 划分地址 172.16.0.0/16 172.16.0.0/19 ------area0 172.16.0.0/24 -------P2P骨干 172.16.0.0/30 172.16.0.4/30 172.16.0.8/30 …...
2024/4/28 11:48:28
人文地理学复习点
1、地理学概念：地理学是研究地球表层地理环境的结构、分布及其变化的规律性以及人地关系的学科。 2、人文地理学：人文地理学以地球表面人类各种社会经济活动为研究对象的科学，以人地关系为基础，探讨各种人文现象的地理分布、扩展…...
2024/4/28 19:43:10
javascript运算符
1.JavaScript的六种运算符 1.1 算数运算符运算符描述示例加法cparseInt(a) dparseInt(b) result1cd;加法要注意连接前后不能是字符串类型的数据-减法aa-1000*乘法aa*100/除法a/2%取模（余数）if(num%21) { alert(奇数) }递加a；a--- -递减a--…...
2024/4/27 22:23:19
用户行为日志DWD层（基于Flink实时数仓）
用户行为日志DWD层实现目标： 识别新老用户，虽然客户端有新老用户的标识，但是不准确，需要用实时计算再次确认利用侧输出流实现数据拆分，根据日志数据内容,将日志数据分为3类, 页面日志、启动日志和曝光日志。页面日志输…...
2024/4/28 12:02:06
高并发中的限流、熔断、降级、预热、背压你都知道是什么意思吗？
首先，我们需要明确一下这几个名词出现的场景：分布式高并发环境。如果你的产品卖相不好，没人鸟它，那它就用不着这几个属性。不需要任何加成，低并发系统就能工作的很好。分布式系统是一个整体，调用关系错综…...
2024/4/27 21:54:15
TypeScript 中 import type 与 import 的区别
目录背景import type vs import使用 import type 的好处参考链接背景这周遇到了一个比较奇怪的问题：如何在 TypeScript 中根据某个 enum 的取值来执行后续逻辑？ 按理来说应该很简单，这是 enum 的定义： export enum MyEnum {DE…...
2024/4/28 12:39:52
高效学习方法
学得好的同学总在试图找寻知识间的关联，而学得慢的同学却往往只会死记硬背。整体性学习到底要怎样学习？简单地说，整体性学习就是看待知识的角度是多方面的。任何一门知识都不会单独存在，它总是与方方面面的知识联系在一起&#x…...
2024/4/28 22:02:47

[KuangStudy]大前端技能入门

来源

01、 工具

02、Nodejs

2.1、Nodejs介绍与安装

2.2、Nodejs入门

2.2.1、快速入门-Hello World

2.2.2、Node - 实现请求响应

2.2.3、Node-操作MYSQL数据库

03、Es6

3.2、ES6的语法：let和const命令

3.3、ES6的语法：模板字符串

3.4、ES6的语法：函数默认参数与箭头函数

3.5、ES6的语法：对象初始化简写

3.6、ES6的语法：对象解构

3.7、ES6的语法：传播操作符【…】

ES6的语法：数组map和reduce方法使用(了解)

04、NPM包管理器

4.2、使用npm管理项目

4.4、npm install

4.5、其他命令

05、Babel

5.1、简介

5.2、安装

5.3、Babel的使用

5.4、自定义脚本

06、模块化

6.1、简介

6.2、CommonJS规范

6.3、ES6模块化规范

6.4、ES6模块化写法2

07、Webpack

7.1、什么是Webpack

7.2、Webpack安装

7.3、初始化项目

7.4、JS打包

7.5、Css打包

08、Vue-element-admin

探究：package.json

相关文章

最新文章

01、工具