前端开发技术知识点

本文档是主要对HZERO前端开发的需要掌握技术知识点进行说明

说明

• 带有√标示的为需要掌握的技术知识点
• 每个技术知识点请参考其相关资料(官方文档/github)

JavaScript

• JavaScript基础语法(ECMAScript3/ECMAScript5) √

  参考资料:

  MDN Web doc: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

• JavaScript进阶语法(ECMAScript 2015+) √

  参考资料:

  MDN Web doc: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6 入门 阮一峰

• lodash语法增强工具库 √

  参考资料:

  lodash: https://lodash.com/docs

• moment时间处理工具库 √

  参考资料:

  moment: https://momentjs.com/docs/

• reactUI组件框架 √

  • react-dom √

  参考资料:

  react: https://reactjs.org/

• redux/react-redux数据状态管理框架 √

  • redux-saga异步逻辑处理 √

  参考资料:

  react: https://redux.js.org/ redux-saga: https://redux-saga.js.org/

• react-router路由 √

  参考资料:

  react-router: https://reacttraining.com/react-router/core/guides/quick-start

• dva集成了redux/redux-saga的状态管理框架

  参考资料:

  dva: https://dvajs.com/

• ant-design基于react的UI库 √

  参考资料:

  ant-design: https://ant.design/index-cn

• ant-design-pro基于react的UI库

  参考资料:

  ant-design-pro: https://pro.ant.design/

• hzero-ui基于ant-design的UI库 √

  参考资料:

  hzero-ui: http://hzero-ui.saas.hand-china.com/index-cn

• choerodon-ui的UI库 √

  参考资料:

  choerodon-ui: https://choerodon.github.io/choerodon-ui/components-pro/data-set-cn/

CSS样式

• CSS基础语法 √

  参考资料:

  MDN Web doc: https://developer.mozilla.org/zh-CN/docs/Web/CSS

• Less CSS预编译 √

  参考资料:

  Less: http://lesscss.org/

HTML

• HTML/HTML5基础语法 √

  参考资料:

  MDN Web doc: https://developer.mozilla.org/zh-CN/docs/Web/HTML/

HTTP

• HTTP协议 √

  参考资料:

  MDN Web doc: https://developer.mozilla.org/zh-CN/docs/Web/HTTP

工具

• eslint 语法检查 √

  参考资料:

  eslint: https://eslint.org/

• stylelint 语法检查 √

  参考资料:

  stylelint: https://stylelint.io/

• bable及其相关插件 ECMAScript语法编译工具 √

  参考资料:

  babel: https://babeljs.io/

• webpack 前端应用打包工具 √

  参考资料:

  webpack: https://webpack.js.org/

• yarn node nodules管理工具 √

  参考资料:

  yarn: https://yarnpkg.com

• lerna 多模块管理工具

  参考资料:

  lerna: https://lernajs.io/

node.js

• npm基本命令 √

  参考资料:

  npm: https://docs.npmjs.com/

• package.json的使用 √

  参考资料:

  package.json: https://docs.npmjs.com/packages-and-modules/

• fs √

  参考资料:

  node.js fs: https://nodejs.org/dist/latest-v10.x/docs/api/fs.html

• path √

  参考资料:

  node.js path: https://nodejs.org/dist/latest-v10.x/docs/api/path.html

• modules √

  参考资料:

  node.js modules: https://nodejs.org/dist/latest-v10.x/docs/api/modules.html

• process √

  参考资料:

  node.js process: https://nodejs.org/dist/latest-v10.x/docs/api/process.html

• url √

  参考资料:

  node.js url: https://nodejs.org/dist/latest-v10.x/docs/api/url.html

开发

• git √

  参考资料:

  git: https://git-scm.com/doc

• Visual Studio Code 开发工具] √

  参考资料:

  Visual Studio Code: https://code.visualstudio.com/

  • 推荐插件

    • Chinese (Simplified) Language Pack for Visual Studio Code
    • Debugger for Chrome
    • EditorConfig for VS Code
    • ESLint
    • GitLens — Git supercharged
    • YAML

• Markdown文档编写工具

  参考资料:

  Markdown: https://daringfireball.net/projects/markdown/

• TypeScript JavaScript语言的超集,增强JavaScript语言

  参考资料:

  TypeScript: https://www.typescriptlang.org/

部署

• nginx 前端静态资源代理工具 √

  参考资料:

  nginx: https://www.nginx.com/

• docker 前端应用部署工具

• Gitlab 前端项目管理工具(包含CI/CD)

• jenkins 前端应用自动化构建工具