前端技术点脑图

 

 文件下载地址: 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和RequireJSCMD和SeaJSUMDES6 ModuleCommonJS)

  函数式编程

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

   异步

   Promise

   async await

 css相关

  sass

  less

  stylus

  纯前端关注

(sasslessstylus)

 质量检查

  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-graphql6.x 7.x 8.x https://hub.fastgit.org/apache/skywalking-query-protocol)

 axios

  基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中

posted @ 2021-11-06 09:26  2012  阅读(118)  评论(0编辑  收藏  举报