前端技术点脑图
文件下载地址： 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
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
纯前端关注
质量检查
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)
