前端框架和常用工具

10 篇文章最后更新：2025年6月6日

常用UI与组件库

August 23, 2022

Bootstrap

中文官网: http://www.bootcss.com/ 官网: http://getbootstrap.com/

教程手册：https://www.shouce.ren/api/view/a/772

Bootstrap 是由 Twitter 在 2011 年8月在 GitHub 上发布的开源产品

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机

Bootstrap下载及引入：https://www.shouce.ren/api/view/a/773

layui

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式

2021年10月13日，layui 原官网（layui.com）已正式关闭。详见：

文档参考链接：http://layui-doc.pearadmin.com/doc/index.html

ElementUI

ElementUI(基于Vue2.X)：https://element.eleme.cn/#/zh-CN/

Element Plus(Vue3.X)：https://element-plus.org/zh-CN/guide/installation.html

ElementUI是一个面向开发者的前端UI框架，特别为Vue.js设计，由饿了么团队推出。

ElementUI提供了一套丰富的组件集，包括布局、表单、导航、反馈等元素，有助于开发者快速构建用户界面美观、功能完善、交互流畅的Web应用程序。ElementUI以其易学易用的特性和高度可定制性，在Vue生态中广受欢迎，支持现代浏览器和多种屏幕设备，适合开发桌面端的管理界面或是复杂的业务系统。

Ant Design

Ant Design的官方网站地址有两个，分别是为了提供不同访问速度体验的镜像站点：

Ant Design是阿里巴巴旗下蚂蚁集团推出的一套企业级的UI设计语言和==React组件库==，专注于提升用户体验和设计者的工作效率。

Ant Design遵循“确定”和“自然”的设计理念，提倡简约、直观、一致的用户体验，并且支持响应式设计，适配多种设备和屏幕尺寸。

Ant Design不仅仅是一个UI库，它还包含了丰富的设计资源和工具，如图标库、色彩系统、布局原则等，确保设计语言在不同产品间的统一性和一致性。此外，Ant Design的React实现（Ant Design of React，简称antd）是基于Ant Design设计体系的React组件库，它包含了大量的现成组件，如按钮、表格、表单、导航等，方便开发者进行快速开发。

Node和包管理

July 2, 2023

Node.js基础简介

Node.js 是一个基于 Chrome V8 JavaScript 引擎构建的开源、跨平台的 JavaScript 运行环境。它允许在服务器端执行 JavaScript，使得开发者可以使用同一种语言编写前后端代码，Node.js 以其非阻塞 I/O 和事件驱动的架构而闻名，特别适合于构建高并发、高性能的实时应用、API 服务器、微服务、工具脚本等。

特点与优势：

异步非阻塞I/O：Node.js采用事件循环和回调函数，能高效处理并发请求，特别适合I/O密集型应用。
单线程模型：尽管JavaScript是单线程，但Node.js通过事件循环和异步处理，能够有效利用系统资源。
庞大的生态系统：npm（Node Package Manager）是世界上最大的软件注册表，提供了海量的开源库和工具。
跨平台：Node.js可在多种操作系统上运行，包括Windows、Linux和macOS。
轻量级：相比传统的Java、PHP等服务器端技术，Node.js启动速度快，资源消耗少。

运行JavaScript文件

创建文件：用文本编辑器创建一个名为 app.js 的文件。
编写代码：在 app.js 中输入简单的 JavaScript 代码，例如：
javascript
```
console.log("Hello, Node.js!");
```
运行代码：打开终端，进入该文件所在的目录，然后运行：
bash
```
node app.js
```
你会在终端看到输出 “Hello, Node.js!”。

REPL环境

REPL（Read-Eval-Print Loop，读取-求值-打印-循环）是一种简单的交互式编程环境，允许用户输入代码片段，立即执行并查看结果，从而快速测试和探索编程语言的功能。

TypeScript基础

May 29, 2023

一 TypeScript简介

TypeScript

TypeScript 与 JavaScript 的关系：

超集关系：TypeScript 是 JavaScript 的一个超集，这意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。你可以将 TypeScript 理解为在 JavaScript 的基础上增加了静态类型系统和其他一些高级语言特性。
编译过程：TypeScript 代码在运行前需要通过编译器转换为 JavaScript 代码。这个过程称为转译（transpilation），它允许 TypeScript 代码在任何支持 JavaScript 的环境中运行，无论是浏览器、Node.js 还是其他环境。
新增特性：除了类型系统，TypeScript 还引入了诸如类（classes）、接口（interfaces）、命名空间（namespaces，现在推荐使用模块（modules））、泛型（generics）等特性，这些特性提高了代码的结构化、可读性和可维护性。

TypeScript 的优势主要包括：

类型安全：TypeScript最大的优势之一是其静态类型系统。在编写代码的时候，你可以声明变量和函数参数的类型，TypeScript编译器会在编译期间进行类型检查。静态类型检查能够在开发阶段捕获许多潜在错误，减少运行时错误，使得代码更加健壮。
提升开发效率：编辑器和IDE能够基于类型信息提供智能代码补全、接口提示和错误检查，加快了编码速度并减少了查阅文档的需要。
易于维护和协作：类型注释作为代码的一部分，为大型项目和团队协作提供了更好的文档说明，使得维护和理解代码变得更加容易。
现代化的语法特性：TypeScript 支持最新的 JavaScript 特性，即使这些特性尚未在所有目标运行环境中普及，开发者仍可提前使用并享受到这些新特性带来的便利。
良好的生态系统支持：许多现代框架和库（如Angular、Vue 3、React等）都对 TypeScript 提供了官方支持，使得在这些技术栈中使用 TypeScript 变得十分自然和便捷。
长期成本节省：尽管 TypeScript 学习和初期设置可能会带来一定成本，但从长远来看，由于它能够减少错误、提升代码质量，对于大型项目和长期维护的软件产品来说，这种前期投资往往能够带来显著的时间和成本节约。
兼容性：因为TypeScript是JavaScript的超集，所以你可以逐步地将现有的JavaScript项目迁移到TypeScript。你甚至可以在同一个项目中同时使用TypeScript和JavaScript。

安装和配置

安装 TypeScript

在 Node.js 环境中安装 TypeScript 非常简单，可以通过 npm（Node.js 的包管理器）来完成。以下是安装步骤：

确保已安装 Node.js：首先，确保你的计算机上已经安装了 Node.js。可以在命令行输入 node -v 来查看当前安装的 Node.js 版本。

Vue.js

January 4, 2023

Vue官方文档：https://cn.vuejs.org/guide/introduction.html

ℹ️ Vue发展历史

初期（2013年以前）： Vue的前身名为"Seed"，由尤雨溪开发。2013年12月，Vue.js正式发布首个版本0.6.0，标志着Vue作为一个独立项目的开始。
Vue 1.x（2014-2015）：
- 2014年初，Vue进行了第一次重大重构（0.11版），增强了其生产环境下的适用性。
- 2014年10月，Vue引入了单文件组件（SFC，Single File Components）的概念，通过vueify和Browserify打包。
- 2015年6月，Vue 0.12.0发布，代号为“Dragon Ball”，获得Laravel社区的关注，Vue开始在JavaScript社区内崭露头角。
- 同年10月，Vue 1.0.0（代号Evangelion）发布，这是Vue历史上的第一个重要里程碑，伴随其一同发布的还有vue-router、vuex和vue-cli，标志着Vue成为了一个成熟的渐进式框架。
Vue 2.x（2016-2020）：
- 2016年10月，Vue 2.0发布，这是Vue的第二个重要里程碑。Vue 2.0引入了虚拟DOM的改进，优化了性能，并支持服务端渲染（SSR）。
- Vue 2.x时代持续了数年，期间不断迭代更新，增加了如Vue CLI 3、Vue 2.6等重要更新，提升了开发者的体验和框架的性能。
Vue 3.x（2020至今）：
- Vue 3在2020年发布，带来了显著的性能提升、更好的类型支持、Composition API等特性，使得状态管理和组件逻辑组织更加灵活。
- Vue 3强调了对Composition API的采用，它提供了一种新的代码组织方式，与Options API并行存在，给予开发者更多选择。
- 随着Vue 3的成熟，生态系统中的库如Vue Router、Vuex等也相应升级，以更好地配合Vue 3的功能和理念。

Vue的发展过程中，始终保持着渐进式框架的特点，即开发者可以根据需要选择框架的组成部分进行使用，这使得Vue在不同的项目规模和复杂度下都能发挥出高效率。

Vue使用方式

独立脚本方式

Vue可以像jQuery一样作为一个独立的JavaScript库直接引入到HTML中，适用于快速原型开发或小型项目。

实现步骤：

下载Vue.js文件或从CDN引用。
在HTML中引入Vue.js文件。
直接在页面上使用Vue实例。

        html
        
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue独立脚本示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue with script tag!'
            }
        });
    </script>
</body>
</html>

WebComponent

参照vue文档： Vue 与 Web Components

Node后端开发

May 22, 2022

Node.js 自诞生以来，凭借其非阻塞 I/O 和事件驱动的特性，在后端开发领域占据了一席之地。然而，从最初使用原生模块处理 HTTP 请求，到 Express.js 带来的便捷，再到 NestJS 提供的企业级应用架构，Node.js 的后端开发范式经历了一系列重要的演进。

Node.js原生开发

最初，使用 Node.js 处理网络请求需要直接操作内置的 http 模块。开发者需要：

引入 http 和 url 模块。
使用 http.createServer 创建服务器实例。
在回调函数中接收请求对象 (req) 和响应对象 (res)。
手动解析请求信息：
- req.url: 获取请求路径（不含域名和端口）。
- req.method: 获取请求方法 (GET, POST 等)。
- req.headers: 获取请求头。
- url.parse(req.url, true): 解析 URL，获取路径名 (pathname) 和查询参数 (query)。
手动处理请求体（如 POST 请求）：
- 监听 req 对象的 data 事件来接收数据片段 (chunk)。
- 监听 end 事件来确认数据接收完毕。
- 根据 Content-Type 请求头（如 application/json, application/x-www-form-urlencoded）选择不同的方式解析请求体数据。
设置响应头 (res.writeHead) 并发送响应数据 (res.end)。
启动服务器并监听指定端口 (server.listen)。

原生 Node.js 处理请求的痛点：

常用构建/编译工具

October 3, 2023

常用构建工具 (Build Tools)：

Webpack - 一种流行的模块打包器，能够处理各种资源文件（如JS、CSS、图片等），支持代码分割、热模块替换等高级功能，适用于构建复杂的前端应用。
Rollup - 专注于ES模块打包，适用于库和一些更关注体积优化的项目。
Parcel - 零配置的打包工具，开箱即用，自动处理各种资源类型。
Gulp - 基于流的自动化任务运行器，通过可读性强的代码处理文件，如压缩、合并、编译等。
Grunt - 另一款成熟的任务自动化工具，通过配置文件定义各种任务。

ℹ️ 使用建议

小型项目或快速原型：Parcel 是一个很好的选择，它的零配置特性和快速启动能力可以让你迅速搭建并运行项目，无需花费大量时间在配置构建工具上。
中型项目：Webpack 或 Rollup 可能更适合。如果你的项目依赖关系复杂，需要代码拆分和优化，Webpack 提供了丰富的配置选项和强大的生态支持。而对于库的开发或者对最终包体积有严格要求的项目，Rollup 的“树摇”能力将非常有用。
大型项目：Webpack 通常是首选，尤其是在需要高度定制化的构建流程、优化资源加载策略或实现复杂的代码拆分时。它的灵活性和扩展性能够满足大型应用的复杂需求。
特定需求或习惯：Gulp 和 Grunt 仍然有其应用场景，特别是对于那些已经习惯了这些工具的团队，或是项目中特定任务需要高度定制化处理时。Gulp 的流式处理特别适合处理大量文件转换任务。

Webpack

Webpack：起初作为一个模块打包器，Webpack 专为解决JavaScript模块化问题而生，特别是在需要处理大量依赖和模块的复杂应用中。

随着时间发展，Webpack 成为了现代前端项目标配，支持代码拆分、加载器和插件系统，极大地增强了前端构建的灵活性和性能。虽然学习曲线较陡峭，但它提供的功能和优化策略对于构建大型SPA（单页应用）至关重要。

ℹ️ 出现时期及流行时期

Webpack 最初于2012年首次发布, 2014年开始在前端社区普遍使用，当时的主要亮点是其独特的代码分割和懒加载功能。

随着React, Angular, Vue等现代前端框架的兴起，Webpack也被广泛采用作为模块打包器。到现在，Webpack依然是主流的前端构建工具之一。

Webpack配置文件通常是项目的根目录下一个名为 webpack.config.js 的文件，该文件是一个Node.js模块，返回一个配置对象，Webpack根据这个对象进行打包构建：

        js
        
    
const path = require('path');

module.exports = {
  // 入口文件，路径相对于本文件所在的位置，可以直接使用模块名称，模块解析方式跟 Node.js 一样
  entry: './app/index.js', 

  // 输出配置
  output: { 
    // 输出文件，路径相对于本文件所在的位置
    path: path.resolve(__dirname, 'dist'), 
    filename: 'bundle.js',
  },

  // 模块加载器配置
  module: { 
    rules: [
      {
        // 对于.js文件使用babel-loader进行转码，presets定义语法
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },

  // 插件配置
  plugins: [], 

  // 开发服务器配置
  devServer: {},

  // 解析模块请求的选项
  resolve: {}, 
  
  // 优化配置，如模块拆分、压缩等
  optimization: {},
};

这只是webpack的基础配置，webpack的配置非常灵活，可以根据具体需求配置各种loader和plugin，实现各种功能，如处理CSS，处理图片，处理字体文件等。

TypeScript进阶

August 26, 2022

类(Class)和面向对象

TypeScript 中的类是对 ECMAScript 6 (ES6) 类的一个超集，它在 ES6 类的基础上增加了一些额外的类型安全和功能特性。

类的定义和继承

TS中类的定义和继承等与ES6最大的区别就是TypeScript 允许在类的属性、方法参数和返回值上添加类型注解，提供静态类型检查

        typescript
        
    
class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  bark() {
    console.log('Woof! Woof!');
  }
}

const dog = new Dog('Rex');
dog.bark();
dog.move(10);

TypeScript 不支持从多个类继承（无多重继承），但你可以通过接口来模拟这个功能。一个类可以实现多个接口

访问修饰符

TypeScript 提供了三种访问修饰符，用于在类内部控制成员的可访问性。

React.js

February 22, 2022

React的官方网站是：https://reactjs.org React中文文档地址：https://zh-hans.react.dev/learn

React是一个由Facebook（现Meta）开发的开源JavaScript库，主要用于构建用户界面。它采用组件化的方式来组织和构建UI，使得代码复用、状态管理及应用程序的维护变得更加高效。React通过使用虚拟DOM（Virtual DOM）技术来优化实际DOM的操作，从而提高了性能。React推崇声明式编程，使得代码逻辑更易于理解和预测。

版本发展历史简述

早期（2011-2012）：React最初在Facebook内部为了解决动态生成复杂UI的问题而诞生，最初用于其News Feed部分。
React 0.10（2013年）：React首次公开发布，开始获得开发者社区的关注。
React 16（2017年）：引入了全新的核心架构“Fiber”，大大提升了React的性能和异步渲染能力。
React 17（2020年）：主要改进了与DOM的交互方式，简化升级过程，没有太多直接影响开发者的重大新特性。
React 18（2022年）：引入了并发模式和Suspense for Data Fetching，进一步优化了性能和用户体验，同时也加强了服务器端渲染（Server-Side Rendering, SSR）和流式渲染的支持。

ℹ️ React与Vue3的对比

尽管React和Vue 3都是现代前端框架，它们在设计理念、学习曲线、社区支持和生态系统方面存在一些差异：

设计理念：
- React强调函数式编程和组件化的思想，推崇JSX来混合HTML和JavaScript，更偏向于底层，给予开发者更大的自由度。
- Vue 3则提供了更全面的框架体验，通过模板、响应式系统和Composition API来简化状态管理和组件间通信，更加注重易用性和开发效率。
学习曲线：
- Vue 3通常被认为对于初学者更为友好，因为它提供了清晰的文档和更直观的模板语法。
- React的学习曲线可能稍微陡峭一些，特别是对于那些不熟悉JSX和状态管理概念的开发者。
性能与优化：
- React通过React 18的并发模式和Suspense提高了渲染性能和用户体验。
- Vue 3通过其新的响应式系统和改进的虚拟DOM算法同样实现了性能提升，尤其是在大规模应用中。
生态系统：
- React拥有庞大的生态系统，涵盖了大量的第三方库和工具，如Redux、React Router等。
- Vue 3的生态系统虽然规模较小，但也足够丰富，且Vue 3自带的状态管理和 Composition API 减少了对外部状态管理库的依赖。

React使用方式

独立脚本方式

虽然React传统上通过npm包和模块打包器（如Webpack或Rollup）进行开发和构建，但也有像React.js或ReactDOM.js这样的UMD（Universal Module Definition）版本，可以直接通过CDN链接在网页中引入，实现类似于Vue的独立脚本使用方式。这种方式适用于快速原型开发或小规模项目。实现步骤如下：

通过CDN链接引入了React和ReactDOM的开发版本。
引入了Babel Standalone，它允许我们在浏览器中直接编写JSX代码而不需要预编译步骤。
定义了一个简单的React组件Welcome，它接受一个name属性并返回一个带有问候语的<h1>元素。
使用ReactDOM.render()方法将这个组件渲染到了页面上ID为root的DOM元素中。

        html
        
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React独立脚本示例</title>
    <!-- 引入React库 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <!-- 引入ReactDOM库 -->
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- 用于支持在浏览器中直接使用JSX -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>

<div id="root"></div>

<script type="text/babel">
    // 使用JSX定义React组件
    function Welcome(props) {
        return <h1>Hello, {props.name}</h1>;
    }

    // 渲染React组件到页面上的DOM元素
    ReactDOM.render(
        <Welcome name="World" />, 
        document.getElementById('root')
    );
</script>

</body>
</html>

请注意，这种方式适合快速演示或学习用途，对于生产环境，推荐使用构建工具（如Webpack）来打包和优化你的React应用。

代码质量与格式化

March 11, 2023

常用代码质量与格式化工具 (Code Quality & Formatting Tools)

ESLint - 非常强大的JavaScript代码静态分析工具，用于发现潜在错误和不符合代码规范的地方，支持丰富的规则和插件系统。
Prettier - 代码格式化工具，自动格式化代码，确保团队间代码风格一致。
Stylelint - 类似于ESLint，但专用于CSS和SCSS等样式文件的静态分析和格式化。
EditorConfig - 跨编辑器的配置文件标准，帮助开发者在不同的编辑器中保持一致的代码风格。

💡 推荐方案

在开发中，最常用的代码质量和格式化工具方案可能是ESLint与Prettier的结合。

ESLint：用于检查代码质量，即确保代码没有错误或潜在的问题。ESLint非常灵活，可以通过配置文件自定义规则，或者使用一些现有的配置集（如 Airbnb、Google、Standard 等）。ESLint主要关注的是代码的质量问题，比如未使用的变量，丢失的分号等。
Prettier：用于代码格式化，以确保代码风格的一致性。Prettier配置简单，函数的换行、箭头函数括号的使用、字符串使用单引号还是双引号等这些格式问题，Prettier都能统一处理，使你的代码风格看起来更整洁一致。

这两个工具可以并行使用，在许多项目中你会看到这两个工具同时存在。ESLint 检查你的代码质量，Prettier 负责代码的格式。

ESLint与Prettier可以很好地集成在VSCode等常用的开发环境中，可以在你保存文件时自动修复和格式化你的代码，大大提高开发效率。

EsLint+Prettier

EsLint

首先需要安装ESLint。在项目中安装是推荐的做法，因为这样可以确保每个项目都有自己的ESLint版本和配置：

bash

npm install eslint --save-dev

在项目中设置一个基本的配置文件：

bash

npx eslint --init

命令执行后，ESLint会询问几个关于你的代码风格和配置的问题，然后生成一个配置文件（ .eslintrc.* ）。

NestJs

February 9, 2022

NestJS简介

NestJS 是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的框架。它借鉴了许多 Java Spring 框架的设计理念，并引入了许多新的概念和特性，旨在为开发者提供一个开箱即用的应用架构，从而能够轻松构建出结构清晰、易于维护的应用程序。

核心语言与范式：
- NestJS 主要使用 TypeScript (TS) 编写，充分利用其强类型特性带来的开发时优势和代码可维护性，但同时也支持使用纯 JavaScript (JS) 进行开发。
- 它巧妙地融合了面向对象编程 (OOP)、函数式编程 (FP) 以及函数响应式编程 (FRP) 的优点，为开发者提供了灵活多样的编程选择。
底层与抽象：
- 默认情况下，NestJS 的底层 HTTP 服务器框架是 Express，这是一个在 Node.js 社区中广泛使用且成熟的框架。如果对性能有极致追求，NestJS 也允许开发者轻松切换到底层为 Fastify 的实现。
- NestJS 在这些底层框架（如 Express 或 Fastify）之上提供了一个高级抽象层，这使得开发者不必直接处理底层框架的细节，而是通过 NestJS 提供的模块化、面向切面的方式进行开发。
- 尽管提供了抽象，NestJS 依然保持了灵活性，允许开发者在需要时直接访问和使用底层平台（如 Express 的 req, res 对象）的 API。

NestJS 鼓励使用模块化的方式来组织代码。每个模块都有自己的范围，包含控制器、服务、数据传输对象 (DTO)、守卫、过滤器等。这种模块化的设计使得代码结构清晰，易于维护。

💡 为什么选择 NestJS？它解决了什么痛点？

弥补 Node.js 后端架构的空白：
- Node.js 本身提供的原生 API（如 http.createServer）功能非常基础，直接用它们构建复杂应用效率低下。
- 虽然 Express 和 Koa 等框架非常流行，但它们本身更像是一个轻量级的请求处理“架子”，缺乏完整的、约定俗成的应用架构。开发者在使用它们时，往往需要自行组织路由、中间件、依赖管理、模块化等，当项目规模逐渐增大后，代码结构容易变得混乱，维护成本随之升高。
- NestJS 解决了这一痛点，它提供了一个经过深思熟虑的应用架构（深受 Angular 启发），包含了模块、控制器、服务等明确的组织单元，使得开发者能够轻松构建出结构清晰、高内聚、低耦合且易于测试和维护的应用程序。
完善的架构与规范：

Java基础语法

Java核心特性

Javaweb开发

数据可与ORM框架

Spring Framework

常用库和工具

缓存和消息队列

其他常用中间件

分布式与微服务

Spring Cloud

综合应用与项目实践

常见面试题总结

前端基础入门

常用工具和框架

性能优化和Web安全

Web3理论基础

Python基础语法

Python图像处理

Python Web开发

Python应用及项目

C/CPP基础

Go语言基础

Linux系统

Git和CI/CD

Docker/Kubernetes

操纵系统和网络

数据结构与算法

设计模式

Bootstrap

layui

ElementUI

Ant Design

Node.js基础简介

运行JavaScript文件

REPL环境

一 TypeScript简介

TypeScript

安装和配置

安装 TypeScript

Vue使用方式

独立脚本方式

WebComponent

Node.js原生开发

Webpack

类(Class)和面向对象

类的定义和继承

访问修饰符

React使用方式

独立脚本方式

EsLint+Prettier

EsLint

NestJS简介