这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战
一、vscode的使用
1.1 插件配置
-
1、首先安装中文插件：chinese
-
2、为了方便后续开发，插件安装
- 3、设置字体大小
左边栏 管理->设置->搜索 "font-size"
-
4、Emmet设置
1.2 测试
快捷键：shift+！+tab 快速创建html
二、Node.js 的概念
2.1 JavaScript引擎
浏览器的内核包括两部分核心：
-
DOM渲染引擎
-
JavaScript解析引擎
- chrome浏览器内置V8引擎执行Javascript的速度非常块，性能好。
2.2 什么是Node.js
脱离浏览器环境也可以运行JavaScript，只要有JavaScript引擎就可以。
Node.js是一个基于JavaScript和在Chrome浏览器中写JavaScript基本没有什么区别
- node.js 没有浏览器API，即document，windows等
- 加了很多Node.js专属API，例如文件系统、进程、http功能等
2.3 Node.js有什么用
- 开发类似JavaWeb的简单的后端程序
- 部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。
三、BFF
3.1 BFF解决什么问题
一个前端页面向 Service A、Service B 以及 Service C发送请求，不同的微服务返回的值用于渲染页面中不同的组件。此时，每次访问该页面都需要发送 3 个请求。我们需要一个服务来聚合Service A、Service B 以及 Service C响应的数据，这个服务层叫做BFF。类似于服务前端的后端。
四、ECMAScript 6
简称ES6，是javascript的下一代规范。
JavaScript 五大基本类型：number、string、boolean、null、undefined
4.1 新特性
4.1.1 var和let
1、var 和let：var没有局部作用域之说，而let有
{
let a=0
}
console.log(a) //用var 不会报错，用let就会报错
2、重复声明:let 不支持重复定义。var可以
let m=1
let m=2
console.log(m)
3、变量提升，js这个算bug吧，因此，let就解决了这个变量提升的bug
var a
console.log(a) //只声明，未赋值，打印undefined
console.log(a) //未声明，未赋值，打印undefined
var a
console.log(a) //未声明，未赋值，打印报错
4.1.2 const
常量对于已经赋值的不可在更改
const pi='3.14'
pi='1'
console.log(pi) //报错
4.1.3 数组解构
let arr=[1,2,3]
let a=arr[0]
let b=arr[1]
let c=arr[2]
console.log(a,b,c)
=== 等价===
let [x,y,z]=arr
console.log(x,y,z)
4.1.4 对象结构
let user={
name:'xiaolei',
age:25
}
console.log(user)
let {name,age} =user //同名变量就会被赋值
console.log(name,age)
4.1.5 模板字符串
let name='xiaolei'
let age='25'
let info='我的名字'+name+'年龄'+age
let info2=`我的名字是：${name},我的年龄是：${age}`
console.log(info2)
4.1.6 声明对象简写js
let name='lei'
let age=18
let person1={
age,
name
}
console.log(person1)
4.1.7 定义方法简写
let person1={
name:'xx',
hello:function(){
console.log('哈哈哈哈')
}
}
person1.hello() //哈哈哈哈
4.1.8 对象拓展运算符
引用变量，在栈中
let person={
name:'xxx',
age:20
}
let other=person
console.log(other)//{ name: 'xxx', age: 20 }
other.age=99
console.log(person) //{ name: 'xxx', age: 99 }
//对象扩张运算符,站立独立的内存空间
let aa={...person}
console.log(aa)
4.1.9 函数的默认参数js
在javascript中没有函数的重载，后来的函数会覆盖掉之前的函数。
此外，js的函数也是一种基本类型，showInfo这个变量会覆盖前面的函数。
=== 在js中是严格的比较，既比较内容也比较引号
//方法1
function showInfo(name,age){
console.log(name+","+age)
}
//方法2
function showInfo(name){
console.log(name)
}
let showInfo='111' //报错
showInfo('哈哈',12)
showInfo('潇lei')
4.1.10 箭头函数
let arr=["15","5","40","100","25"]
// arr.sort(function(a,b){
// return a-b
// })
arr.sort((a,b)=>{
return a-b
})
//等价 ： arr.sort((a,b)=>a-b)
console.log(arr)
PS D:\code\project\video\xiaolei-video-vue> node .\es6_pro\01-let-02js
[ '100', '15', '25', '40', '5' ]
PS D:\code\project\video\xiaolei-video-vue> node .\es6_pro\01-let-02js
[ '5', '15', '25', '40', '100' ]
4.2 模块化
4.2.1 模块化规范
1、模块化规范（基于ES6语法之前）
2、ES模块化规范（使用ES6语法）
4.2.2 ES6模块化
创建model_pro文件夹
1、导出模块：创建src/tearcherApi.js文件
export default {
getList() {
console.log('获取讲师列表')
},
save() {
console.log('保存讲师')
}
}
2、导入模块
创建src/teacherComponent.js文件
import teacher from "./teacherApi.js"
teacher.getList()
teacher.save()
ES6 使用export 和 import来导出、导入模块。
3、运行程序
node teacherComponent.js
注意：这时程序是无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行
4.3 使用Babel转码
ES6 的某些语法在浏览器环境甚至是Node.js环境中无法执行。
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
这意味着可以用ES6编写程序，而不用再担心环境是否支持。
4.3.1 安装
Babel提供 babel-cli工具。它的安装命令如下：
npm install -g babel-cli
#查看是否安装成功
babel --version
4.3.2 初始化项目
在model_pro目录下初始化项目
npm install -y
4.3.3 配置.babelrc
Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，presets字段设定转码规则
{
"presets": ["es2015"],
"plugins": []
}
4.3.4 安装转码器
npm install -D babel-preset-es2015
4.3.5 转码
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
babel src -d dist
4.3.6 运行程序
node dist/teacherComponent.js
五、NPM管理器
5.1 简介
NPM 全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven。
npm -v
5.2 使用
1、初始化
1、npm init -y 初始化项目
2、修改npm镜像
NPM官方管理的包都是从npmjs下载的，但是这个网站速度很慢，就需要用到淘宝的npm镜像加速。
#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list
3、npm install 命令的使用
基本命令
#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
#默认参数：--save 简写 -S 将当前依赖保存在dependencies节点下
npm install jquery
下载指定版本的依赖：
#如果安装时想指定特定的版本
npm install jquery@2.1.x
下载开发版本：
#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或简写
npm i -D eslint
下载全局依赖：
#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install --global webpack
#或简写
npm install -g webpack
根据依赖下载安装包
#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
npm install #根据package.json中的配置下载依赖，初始化项目
其他命令：
#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名
六、webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
6.1 安装
npm install -g webpack webpack-cli
或
npm install -g webpack
npm install -g webpack-cli
webpack -v
6.2 创建项目
1、初始化项目，进入目录，执行命令
npm init -y
2、创建src文件夹
3、src下创建common.js
这里使用的是CommonJS模块化方式
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))
6.3 js打包
1、创建配置文件
webpack_pro目录下创建配置文件webpack.config.js
以下配置的意思是：
-
读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包
-
打包后的文件放入当前目录的dist文件夹下
-
打包后的js文件名为bundle.js
const path = require("path") //Node.js内置模块 module.exports = { entry: './src/main.js', //配置入口文件 output: { path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径 filename: 'bundle.js' //输出文件 } }
2、执行编译命令
webpack --mode=development
#执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码打包
也可以配置项目的npm运行命令，修改package.json文件
"scripts": {
//...,
"dev": "webpack --mode=development",
"prod": "webpack --mode=production"
}
npm run dev #开发打包
或
npm run prod #生产打包
3、创建入口页面
webpack_pro目录下创建index.html，引用bundle.js
<script src="dist/bundle.js"></script>
4、测试
浏览器中查看index.html
6.4 css打包
1、安装插件
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器。
首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css
npm install -D 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、在scr文件夹创建style.css
body{
background:pink;
}
4、修改main.js
在第一行引入style.css
require('./style.css')
5、运行编译命令
npm run dev
6、测试
浏览器中查看index.html，看看背景是不是变成粉色啦？
七、vue-element-ui
优秀的后台管理框架,直接拿来开发。
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── .eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
在vue-admin-template-master上做开发。
八、ESLint
8.1 简介
ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，推荐 ESLint+vscode 来写 vue，有种飞一般的感觉。
每次保存，vscode就能标红不符合ESLint规则的地方，同时还会做一些简单的自我修正。
8.2 启用ESLINT
1、在文件中添加如下配置：
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
2、确认开启语法检查
useEslint: true,
8.3 ESLint 规则说明
{
rules: {
'semi': [2, 'never'], //不使用分号，否则报错
'quotes': [2, 'single'] //使用单引号，否则报错
}
}
本项目的语法规则包括：
- 两个字符缩进
- 使用单引号
- 语句后不可以写分号
- 等
九、 前端的用法
<el-pagination
:current-page="page"
:page-sizes="[5, 10, 20, 50]"
:page-size="limit"
:total="total"
style="padding: 30px 0; text-align: center"
layout="sizes, prev, pager, next, jumper,->, total"
@current-change="changeCurrentPage"
@size-change="changeCurrentSize"
/>
<!-- 如果为路由出口定义一个唯一的key值，那么组件会被强制重新渲染 -->
<router-view :key="key"></router-view>
<!-- 如果路由指向的页面组件是同一个 ，那么路由出口显示的页面组件不会重新被渲染 -->
