前端技術(shù)點(diǎn)腦圖
文件下載地址： 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 中一些需要關(guān)注的新功能
組合式 API
Teleport
片段
觸發(fā)組件選項(xiàng)
來(lái)自 @vue/runtime-core 的 createRenderer API，用于創(chuàng)建自定義渲染器
單文件組件組合式 API 語(yǔ)法糖 (<script setup>)
單文件組件狀態(tài)驅(qū)動(dòng)的 CSS 變量 (<style> 中的 v-bind)
SFC <style scoped> 現(xiàn)在可以包含全局規(guī)則或只針對(duì)插槽內(nèi)容的規(guī)則
Suspense
概要
template
: v-bind縮寫(xiě)
@ v-on縮寫(xiě)
# v-slot縮寫(xiě)
script
其默認(rèn)導(dǎo)出的內(nèi)容應(yīng)該是 Vue 組件選項(xiàng)對(duì)象 它要么是一個(gè)普通的對(duì)象，要么是 defineComponent 的返回值。
<script lang="ts"> export default { data() { return { test: '蘋(píng)果' } } } </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/
一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫(kù)
例子
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/
針對(duì)VUE 3
例子
vue3.0-template-admin
https://github.com/GeekQiaQia/vue3.0-template-admin/
Ant Design
基礎(chǔ)
Ant Design https://ant.design/
antd 是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫(kù)，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品。
Ant Design Pro https://pro.ant.design/
Ant Design Pro 是基于 Ant Design 和 umi 的封裝的一整套企業(yè)級(jí)中后臺(tái)前端/設(shè)計(jì)解決方案，致力于在設(shè)計(jì)規(guī)范和基礎(chǔ)組件的基礎(chǔ)上，繼續(xù)向上構(gòu)建，提煉出典型模板/業(yè)務(wù)組件/配套設(shè)計(jì)資源，進(jìn)一步提升企業(yè)級(jí)中后臺(tái)產(chǎn)品設(shè)計(jì)研發(fā)過(guò)程中的『用戶(hù)』和『設(shè)計(jì)者』的體驗(yàn)。
Ant Design Pro 作為一個(gè)前端腳手架
antv https://www.antdv.com/
Ant Design 的 Vue 實(shí)現(xiàn)，開(kāi)發(fā)和服務(wù)于企業(yè)級(jí)后臺(tái)產(chǎn)品。
2.x 版本是為了兼容 Vue 3 開(kāi)發(fā)的兼容版本，他并沒(méi)有帶來(lái)很多新的特性，大多數(shù)的 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 默認(rèn)的是webpack版本
https://gitee.com/annsion/vue-vben-admin/
uniapp
一份代碼多終端適配，同時(shí)支持APP、小程序、H5！ https://uniapp.dcloud.io/
vue 2/3均支持
例子
https://github.com/jeecgboot/jeecg-uniapp
有基于elementui跨端的實(shí)踐
其他
https://hub.fastgit.org/jekip/naive-ui-admin
Naive Ui Admin 是一個(gè)基于 Vue3.0、Vite、 Naive UI、TypeScript 的中后臺(tái)解決方案
IDE
vscode + 擴(kuò)展
通用
Vetur
Devtools
VUE3
推薦使用 VSCode 和我們官方拓展 Volar，它為 Vue 3 提供了全面的 IDE 支持
hBuilderX
跨端開(kāi)發(fā)
WebStorm
JS/TS相關(guān)
nodejs / 瀏覽器
關(guān)系和差別
chrome v8
工程
package.json
工程核心
package-lock.json yarn.lock
node_modules
npm/cnpm/yarn install
yarn pnp https://next.yarnpkg.com/features/pnp
核心思想是在每臺(tái)機(jī)器上，單獨(dú)創(chuàng)建一個(gè)包目彔，來(lái)管理所有依賴(lài)的npm包。既然是中心化的管理思想，那么一臺(tái)機(jī)器上的包就不需要重復(fù)安裝了，在項(xiàng)目運(yùn)行時(shí)，先在中心化目彔中對(duì)依賴(lài)包進(jìn)行解壓縮，再進(jìn)行啟動(dòng)。
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
包管理
基礎(chǔ)
npm
cnpm
淘寶團(tuán)隊(duì)做的國(guó)內(nèi)鏡像
nvm
nvm是nodejs的版本管理工具,可以快速切換更新nodejs版本
其他
yarn
Yarn是由Facebook、Google、Exponent 和 Tilde 聯(lián)合推出了一個(gè)新的 JS 包管理工具 Yarn 是為了彌補(bǔ) npm 的一些缺陷而出現(xiàn)的。
PnP yarn set version berry 設(shè)置yarn版本2.0+ https://next.yarnpkg.com/getting-started/migration node_modules目錄不需要了，換了形式
npx
npx是npm5.2之后發(fā)布的一個(gè)命令。官網(wǎng)說(shuō)它是“execute npm package binaries”，就是執(zhí)行npm依賴(lài)包的二進(jìn)制文件，簡(jiǎn)而言之，就是我們可以使用npx來(lái)執(zhí)行各種命令
bower
pnpm 推薦
https://pnpm.js.org/en/
pnpm 是一個(gè)相比 npm/yarn 【包括yarn pnp】更優(yōu)的方案 本質(zhì)上 pnpm 的 node_modules 結(jié)構(gòu)是個(gè)網(wǎng)狀 + 平鋪的目錄結(jié)構(gòu)。這種依賴(lài)結(jié)構(gòu)主要基于軟連接(即 symlink)的方式來(lái)完成。
npm i -g pnpm
限制： Electron 應(yīng)用無(wú)法使用 pnpm 部署在 lambda 上的應(yīng)用無(wú)法使用 pnpm
腳手架例子
pnpm create vite my-vue-app --template vue-ts
最常用的命令： ## install : 安裝依賴(lài)包 ## run == / ## ==：運(yùn)行項(xiàng)目的script下的某個(gè)目標(biāo)
打包構(gòu)建
webpack
vite
Rollup
Parcel
早期的Grunt和gulp
新秀esbuild、swc
JAVASCRIPT規(guī)范
ES規(guī)范
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/... 的新語(yǔ)法轉(zhuǎn)化為 es5，讓低端運(yùn)行環(huán)境(如瀏覽器和 node )能夠認(rèn)識(shí)并執(zhí)行。
模塊
AMD和RequireJS
CMD和SeaJS
UMD
ES6 Module
CommonJS
有一堆，用時(shí)注意這2個(gè) require import
(AMD和RequireJS, CMD和SeaJS, UMD, ES6 Module, CommonJS)
函數(shù)式編程
命令式編程是告訴計(jì)算機(jī)具體工作步驟。 函數(shù)式編程是將程序的描述與求值分離，兲注如何用表達(dá)式描述程序邏輯。
異步
Promise
async await
css相關(guān)
sass
less
stylus
純前端關(guān)注
質(zhì)量檢查
eslint
airbnb規(guī)范
https://github.com/airbnb/javascript
https://www.jianshu.com/p/527fe171e8d7
standard規(guī)范
https://codechina.csdn.net/mirrors/standard/standard/-/blob/master/docs/README-zhcn.md
京東凹凸實(shí)驗(yàn)室規(guī)范
https://guide.aotu.io/docs/
騰訊前端規(guī)范
http://alloyteam.github.io/CodeGuide/
百度前端規(guī)范
https://efe.baidu.com/
https://efe.baidu.com/tags/format/
測(cè)試
單元
Jest
Mocha
e2e
cypress
selenium
mock
http://mockjs.com/
mock server
https://gitee.com/mirrors/Easy-Mock
typescript
tsc語(yǔ)言編譯器
tsconfig.json
vscode language server智能語(yǔ)法提示等
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
流程
定義架構(gòu)
生成代碼
前端
https://hub.fastgit.org/acacode/swagger-typescript-api
后端
https://hub.fastgit.org/swagger-api/swagger-codegen
graphQL
https://graphql.cn/
https://spec.graphql.cn/
場(chǎng)景
https://www.freesion.com/article/9311199691/
1. 聲明式。描述所有的可能類(lèi)型系統(tǒng) 查詢(xún)的結(jié)果格式由請(qǐng)求方（即客戶(hù)端）決定而非響應(yīng)方（即服務(wù)器端）決定。你不需要編寫(xiě)很多額外的接口來(lái)適配客戶(hù)端請(qǐng)求
2. 減少開(kāi)發(fā)文檔的維護(hù)工作量,相對(duì)應(yīng)的減少溝通成本
3. 強(qiáng)類(lèi)型。每個(gè) GraphQL 查詢(xún)必須遵循其設(shè)定的類(lèi)型才會(huì)被執(zhí)行。
4. 請(qǐng)求合并 多個(gè)接口可以通過(guò)組合為一個(gè)
5. 請(qǐng)求你所要的數(shù)據(jù)不多不少
相比Rest在客戶(hù)端定義響應(yīng)數(shù)據(jù)的結(jié)構(gòu)，GraphQL靈活地將響應(yīng)數(shù)據(jù)的結(jié)構(gòu)交給了客戶(hù)端。這樣的好處是：客戶(hù)端只需要一次請(qǐng)求就能夠獲得結(jié)構(gòu)復(fù)雜的數(shù)據(jù)，一個(gè)url，全部的操作都以函數(shù)為中心。
(https://www.freesion.com/article/9311199691/, 1. 聲明式。描述所有的可能類(lèi)型系統(tǒng) 查詢(xún)的結(jié)果格式由請(qǐng)求方（即客戶(hù)端）決定而非響應(yīng)方（即服務(wù)器端）決定。你不需要編寫(xiě)很多額外的接口來(lái)適配客戶(hù)端請(qǐng)求, 2. 減少開(kāi)發(fā)文檔的維護(hù)工作量,相對(duì)應(yīng)的減少溝通成本, 3. 強(qiáng)類(lèi)型。每個(gè) GraphQL 查詢(xún)必須遵循其設(shè)定的類(lèi)型才會(huì)被執(zhí)行。, 4. 請(qǐng)求合并 多個(gè)接口可以通過(guò)組合為一個(gè), 5. 請(qǐng)求你所要的數(shù)據(jù)不多不少)
核心概念
Query
在大多數(shù)情況下，向 GraphQL API 發(fā)出的每個(gè)請(qǐng)求是沒(méi)有副作用的Query實(shí)例
Mutation
會(huì)修改存儲(chǔ)在服務(wù)器上的對(duì)象的Mutation實(shí)例
graphql voyager https://gitee.com/mirrors/graphql-voyager
可生成對(duì) Schema 所有查詢(xún)、變更、關(guān)系的概覽圖
代碼生成
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
例子
書(shū)配套資料
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
服務(wù)端實(shí)現(xiàn) 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
客戶(hù)端實(shí)現(xiàn) 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)
