前端技术点脑图

前端技术点脑图

文件下载地址： https://files.cnblogs.com/files/2018/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E7%82%B9%E8%84%91%E5%9B%BE.zip

前端

VUE

https://cn.vuejs.org/

Vue 3 中一些需要关注的新功能

  组合式 API

  Teleport

  片段

  触发组件选项

  来自 @vue/runtime-core 的 createRenderer API，用于创建自定义渲染器

  单文件组件组合式 API 语法糖 (<script setup>)

  单文件组件状态驱动的 CSS 变量 (<style> 中的 v-bind)

  SFC <style scoped> 现在可以包含全局规则或只针对插槽内容的规则

  Suspense

概要

  template

    : v-bind缩写

   @ v-on缩写

   # v-slot缩写

  script

   其默认导出的内容应该是 Vue 组件选项对象它要么是一个普通的对象，要么是 defineComponent 的返回值。

    <script lang="ts"> export default { data() { return { test: '苹果' } } } </script>

    <script lang="ts"> import { defineComponent, onMounted, computed } from 'vue' import axios from 'axios' export default defineComponent({ //子组件 setup() {}, //本组件自身的data methods ...

  style

UI框架

ElementUI

  Element https://element.eleme.io/

   一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

   例子

    vite-vue2-demo

     https://www.yuque.com/xiaoye-urxn3/lcz002/atz26k

    https://hub.fastgit.org/Armour/vue-typescript-admin-template

  Element Plus https://element-plus.gitee.io/zh-CN/

   针对VUE 3

   例子

    vue3.0-template-admin

     https://github.com/GeekQiaQia/vue3.0-template-admin/

Ant Design

  基础

   Ant Design https://ant.design/

    antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

   Ant Design Pro https://pro.ant.design/

    Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

    Ant Design Pro 作为一个前端脚手架

  antv https://www.antdv.com/

   Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

   2.x 版本是为了兼容 Vue 3 开发的兼容版本，他并没有带来很多新的特性，大多数的 API 改变也只是为了更好的兼容 Vue 3。

   3.x 版本在性能、易用性、功能上都有了很大的提升 Vue 3.2 以上

   VScode

    ant-design-vue-helper

   例子

    https://gitee.com/lqsong/admin-antd-vue

     https://github.com/lqsong/admin-antd-vue/tree/vite Vite + Vue3.x + antd 默认的是webpack版本

    https://gitee.com/annsion/vue-vben-admin/

uniapp

  一份代码多终端适配，同时支持APP、小程序、H5！ https://uniapp.dcloud.io/

  vue 2/3均支持

  例子

   https://github.com/jeecgboot/jeecg-uniapp

   有基于elementui跨端的实践

其他

  https://hub.fastgit.org/jekip/naive-ui-admin

   Naive Ui Admin 是一个基于 Vue3.0、Vite、 Naive UI、TypeScript 的中后台解决方案

IDE

vscode + 扩展

  通用

   Vetur

  Devtools

  VUE3

   推荐使用 VSCode 和我们官方拓展 Volar，它为 Vue 3 提供了全面的 IDE 支持

hBuilderX

  跨端开发

WebStorm

JS/TS相关

nodejs / 浏览器

  关系和差别

  chrome v8

工程

  package.json

   工程核心

  package-lock.json yarn.lock

  node_modules

   npm/cnpm/yarn install

   yarn pnp https://next.yarnpkg.com/features/pnp

    核心思想是在每台机器上，单独创建一个包目彔，来管理所有依赖的npm包。既然是中心化的管理思想，那么一台机器上的包就不需要重复安装了，在项目运行时，先在中心化目彔中对依赖包进行解压缩，再进行启动。

    yarn 1.12以上, npm install yarn -g yarn config set registry https://registry.npm.taobao.org

    yarn --pnp

     package.json中配置信息变

     不生成 node_modules目录，.pnp.js文件和.pnp目录【yarn 2.0: .pnp.cjs 】

   pnpm

包管理

  基础

   npm

   cnpm

    淘宝团队做的国内镜像

   nvm

    nvm是nodejs的版本管理工具,可以快速切换更新nodejs版本

  其他

   yarn

    Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 Yarn 是为了弥补 npm 的一些缺陷而出现的。

    PnP yarn set version berry 设置yarn版本2.0+ https://next.yarnpkg.com/getting-started/migration node_modules目录不需要了，换了形式

   npx

    npx是npm5.2之后发布的一个命令。官网说它是“execute npm package binaries”，就是执行npm依赖包的二进制文件，简而言之，就是我们可以使用npx来执行各种命令

   bower

   pnpm 推荐

    https://pnpm.js.org/en/

    pnpm 是一个相比 npm/yarn 【包括yarn pnp】更优的方案本质上 pnpm 的 node_modules 结构是个网状 + 平铺的目录结构。这种依赖结构主要基于软连接(即 symlink)的方式来完成。

    npm i -g pnpm

    限制： Electron 应用无法使用 pnpm 部署在 lambda 上的应用无法使用 pnpm

  脚手架例子

   pnpm create vite my-vue-app --template vue-ts

  最常用的命令： ## install : 安装依赖包 ## run == / ## ==：运行项目的script下的某个目标

(基础, 其他)

打包构建

  webpack

  vite

  Rollup

  Parcel

  早期的Grunt和gulp

  新秀esbuild、swc

JAVASCRIPT规范

  ES规范

   ES2021

   。。。

   ES2015

   https://www.ecma-international.org/publications-and-standards/standards/ https://blog.csdn.net/qq_32265719/article/details/106468071

(ES2021, 。。。, ES2015)

    let const

    `Hello ${name}!`

    =>

  babel

   把 JavaScript 中 es2015/2016/2017/... 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。

  模块

   AMD和RequireJS

   CMD和SeaJS

   UMD

   ES6 Module

   CommonJS

   有一堆，用时注意这2个 require import

(AMD和RequireJS, CMD和SeaJS, UMD, ES6 Module, CommonJS)

  函数式编程

   命令式编程是告诉计算机具体工作步骤。函数式编程是将程序的描述与求值分离，兲注如何用表达式描述程序逻辑。

   异步

   Promise

   async await

css相关

  sass

  less

  stylus

  纯前端关注

(sass, less, stylus)

质量检查

  eslint

   airbnb规范

    https://github.com/airbnb/javascript

    https://www.jianshu.com/p/527fe171e8d7

   standard规范

    https://codechina.csdn.net/mirrors/standard/standard/-/blob/master/docs/README-zhcn.md

   京东凹凸实验室规范

    https://guide.aotu.io/docs/

   腾讯前端规范

    http://alloyteam.github.io/CodeGuide/

   百度前端规范

    https://efe.baidu.com/

    https://efe.baidu.com/tags/format/

测试

  单元

    Jest

   Mocha

  e2e

   cypress

   selenium

  mock

   http://mockjs.com/

  mock server

   https://gitee.com/mirrors/Easy-Mock

typescript

  tsc语言编译器

  tsconfig.json

  vscode language server智能语法提示等

api

restful

  https://cloud.tencent.com/developer/article/1457778

openapi

  https://oai.github.io/Documentation/specification-servers.html

  https://spec.openapis.org/oas/v3.1.0



  流程

   定义架构

   生成代码

    前端

     https://hub.fastgit.org/acacode/swagger-typescript-api

    后端

     https://hub.fastgit.org/swagger-api/swagger-codegen

graphQL

  https://graphql.cn/

  https://spec.graphql.cn/

  场景

   https://www.freesion.com/article/9311199691/

   1. 声明式。描述所有的可能类型系统查询的结果格式由请求方（即客户端）决定而非响应方（即服务器端）决定。你不需要编写很多额外的接口来适配客户端请求

    2. 减少开发文档的维护工作量,相对应的减少沟通成本

   3. 强类型。每个 GraphQL 查询必须遵循其设定的类型才会被执行。

   4. 请求合并多个接口可以通过组合为一个

   5. 请求你所要的数据不多不少

   相比Rest在客户端定义响应数据的结构，GraphQL灵活地将响应数据的结构交给了客户端。这样的好处是：客户端只需要一次请求就能够获得结构复杂的数据，一个url，全部的操作都以函数为中心。

(https://www.freesion.com/article/9311199691/, 1. 声明式。描述所有的可能类型系统查询的结果格式由请求方（即客户端）决定而非响应方（即服务器端）决定。你不需要编写很多额外的接口来适配客户端请求, 2. 减少开发文档的维护工作量,相对应的减少沟通成本, 3. 强类型。每个 GraphQL 查询必须遵循其设定的类型才会被执行。, 4. 请求合并多个接口可以通过组合为一个, 5. 请求你所要的数据不多不少)

  核心概念

   Query

    在大多数情况下，向 GraphQL API 发出的每个请求是没有副作用的Query实例

   Mutation

    会修改存储在服务器上的对象的Mutation实例

  graphql voyager https://gitee.com/mirrors/graphql-voyager

   可生成对 Schema 所有查询、变更、关系的概览图

  代码生成

   https://www.graphql-code-generator.com/

    https://github.com/dotansimha/graphql-code-generator

   TypeScript

    https://www.graphql-code-generator.com/docs/plugins/typescript

    yarn add -D @graphql-codegen/typescript

    yarn add -D @graphql-codegen/typescript-operations

    yarn add -D @graphql-codegen/typescript-resolvers

    yarn add -D @graphql-codegen/typescript-graphql-request

   JAVA

    yarn add -D @graphql-codegen/java

    yarn add -D @graphql-codegen/java-resolvers

    JAVA

     https://hub.fastgit.org/spring-projects/spring-graphql

     https://hub.fastgit.org/graphql-java/graphql-java-examples/tree/master/spring-boot-integration

  例子

   书配套资料

    https://hub.fastgit.org/MoonHighway/learning-graphql

   https://hub.fastgit.org/MoonHighway/pet-library/blob/master/src/typeDefs.graphql

   skywalking使用的graphql https://hub.fastgit.org/apache/skywalking-rocketbot-ui/tree/master/src/graph

    5.x https://hub.fastgit.org/apache/skywalking/tree/5.x/apm-protocol/apm-ui-protocol/src/main/resources/ui-graphql

    6.x 7.x 8.x https://hub.fastgit.org/apache/skywalking-query-protocol

    https://hub.fastgit.org/apache/skywalking/blob/master/docs/en/protocols/query-protocol.md

    服务端实现 https://hub.fastgit.org/apache/skywalking/blob/master/oap-server/server-query-plugin/query-graphql-plugin/src/main/java/org/apache/skywalking/oap/query/graphql/GraphQLQueryProvider.java

     https://blog.csdn.net/x763795151/article/details/117791482

    客户端实现 https://hub.fastgit.org/apache/skywalking-rocketbot-ui/tree/master/src/graph

    alarm.graphqls topology.graphqls metric.graphqls ....

(5.x https://hub.fastgit.org/apache/skywalking/tree/5.x/apm-protocol/apm-ui-protocol/src/main/resources/ui-graphql, 6.x 7.x 8.x https://hub.fastgit.org/apache/skywalking-query-protocol)

axios

  基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
相关阅读:
[Maven实战-许晓斌]-[第二章]-2.2基于UNIX系统安装maven
[Maven实战-许晓斌]-[第二章]-2.1在Windows上安装maven
【sonar-block】Use try-with-resources or close this "BufferedInputStream" in a "finally" clause.
sonar阻断级别错误（block）简单汇总
 让子类使用父类的Logger
集合的addAll方法--list.addAll(null)会报错--java.lang.NullPointerException
nice
ERROR 1524 (HY000): Plugin 'auth_socket' is not loaded
Ubuntu 系统修改root密码后，无需密码亦可登录
 MySQL 查找今年的数据
原文地址：https://www.cnblogs.com/2018/p/15515989.html

前端技术点脑图

前端

VUE

Vue 3 中一些需要关注的新功能

组合式 API

Teleport

片段

触发组件选项

来自 @vue/runtime-core 的 createRenderer API，用于创建自定义渲染器

单文件组件组合式 API 语法糖 (<script setup>)

单文件组件状态驱动的 CSS 变量 (<style> 中的 v-bind)

SFC <style scoped> 现在可以包含全局规则或只针对插槽内容的规则

Suspense

概要

template

: v-bind缩写

@ v-on缩写

# v-slot缩写

script

其默认导出的内容应该是 Vue 组件选项对象 它要么是一个普通的对象，要么是 defineComponent 的返回值。

<script lang="ts"> export default { data() { return { test: '苹果' } } } </script>

<script lang="ts"> import { defineComponent, onMounted, computed } from 'vue' import axios from 'axios' export default defineComponent({ //子组件 setup() {}, //本组件自身的data methods ...

style

UI框架

ElementUI

Element https://element.eleme.io/

一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

例子

vite-vue2-demo

Element Plus https://element-plus.gitee.io/zh-CN/

针对VUE 3

例子

vue3.0-template-admin

Ant Design

基础

Ant Design https://ant.design/

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

Ant Design Pro https://pro.ant.design/

Ant Design Pro 作为一个前端脚手架

antv https://www.antdv.com/

Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

2.x 版本是为了兼容 Vue 3 开发的兼容版本，他并没有带来很多新的特性，大多数的 API 改变也只是为了更好的兼容 Vue 3。

3.x 版本在性能、易用性、功能上都有了很大的提升 Vue 3.2 以上

VScode

ant-design-vue-helper

例子

uniapp

一份代码多终端适配，同时支持APP、小程序、H5！ https://uniapp.dcloud.io/

vue 2/3均支持

例子

有基于elementui跨端的实践

其他

Naive Ui Admin 是一个基于 Vue3.0、Vite、 Naive UI、TypeScript 的中后台解决方案

IDE

vscode + 扩展

通用

Vetur

Devtools

VUE3

推荐使用 VSCode 和我们官方拓展 Volar，它为 Vue 3 提供了全面的 IDE 支持

hBuilderX

跨端开发

WebStorm

JS/TS相关

nodejs / 浏览器

关系和差别

chrome v8

工程

package.json

工程核心

package-lock.json yarn.lock

node_modules

npm/cnpm/yarn install

yarn pnp https://next.yarnpkg.com/features/pnp

核心思想是在每台机器上，单独创建一个包目彔，来管理所有依赖的npm包。既然是中心化的管理思想，那么一台机器上的包就不需要重复安装了，在项目运行时，先在中心化目彔中对依赖包进行解压缩，再进行启动。

yarn 1.12以上, npm install yarn -g yarn config set registry https://registry.npm.taobao.org

yarn --pnp

package.json中配置信息变

不生成 node_modules目录，.pnp.js文件和.pnp目录 【yarn 2.0: .pnp.cjs 】

pnpm

其默认导出的内容应该是 Vue 组件选项对象它要么是一个普通的对象，要么是 defineComponent 的返回值。

不生成 node_modules目录，.pnp.js文件和.pnp目录【yarn 2.0: .pnp.cjs 】

pnpm 是一个相比 npm/yarn 【包括yarn pnp】更优的方案本质上 pnpm 的 node_modules 结构是个网状 + 平铺的目录结构。这种依赖结构主要基于软连接(即 symlink)的方式来完成。

命令式编程是告诉计算机具体工作步骤。函数式编程是将程序的描述与求值分离，兲注如何用表达式描述程序逻辑。