前端开发技术栈
本文档对目前所接触前端项目需要掌握技术栈进行说明整理。具体应用详细参考官网、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
CSS
CSS基础语法
参考资料:
MDN Web doc: https://developer.mozilla.org/zh-CN/docs/Web/CSS
LessCSS预编译
参考资料:
Less: http://lesscss.org/
Sass/ScssCSS预编译
Sass 有两种语法。
SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本。
第二种比较老的语法为缩排语法（或者就称为 “Sass”）， 提供了一种更简洁的 CSS 书写方式。
参考资料:
Sass: https://www.sass.hk/
HTML
HTML/HTML5基础语法
参考资料:
MDN Web doc: https://developer.mozilla.org/zh-CN/docs/Web/HTML/
HTTP
参考资料:
MDN Web doc: https://developer.mozilla.org/zh-CN/docs/Web/HTTP
React
reactUI组件框架react-dom
参考资料:
react: https://reactjs.org/
redux/react-redux数据状态管理框架redux-saga异步逻辑处理
参考资料:
redux: https://www.redux.org.cn/
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/
Mobx
简单、可扩展的状态管理
参考资料:
mobx: https://cn.mobx.js.org/
UI 库
Ant Design
基于
Ant Design设计体系的React UI组件库，主要用于研发企业级中后台产品。参考资料:
Ant Design: https://ant.design/index-cn
Ant Design
企业级中后台前端/设计解决方案。
参考资料:
Ant Design Pro: https://pro.ant.design/
Choerodon UI
基于
Ant Design@3.4.0的Choerodon UI的 React 实现。参考资料:
Choerodon UI: http://choerodon.io/zh/docs/ui/
Choerodon HAP UI
HAP 4.0, Choerodon Pro UI。
参考资料:
Choerodon HAP UI: http://hap-ui.staging.saas.hand-china.com/index-cn
github: https://github.com/choerodon/choerodon-ui/tree/master/components-pro
Hzero UI
基于
ant-design参考资料:
Node.js
npm基本命令
参考资料:
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>
工具库
eslint语法检查
参考资料:
eslint: https://eslint.org/
stylelint语法检查
参考资料:
stylelint: https://stylelint.io/
bable及其相关插件ECMAScript语法编译工具
参考资料:
babel: https://babeljs.io/
webpack前端应用打包工具
参考资料:
webpack: https://webpack.js.org/
yarnnode nodules管理工具
参考资料:
yarn: https://yarnpkg.com
npmnode nodules管理工具
参考资料:
lerna多模块管理工具
参考资料:
lerna: https://lernajs.io/
lodash语法增强工具库
是一个一致性、模块化、高性能的 JavaScript 实用工具库。
参考资料:
lodash: https://lodash.com/docs
moment日期处理类库
参考资料:
moment: https://momentjs.com/docs/
Echarts
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
参考资料:
Echarts: https://echarts.baidu.com/
RxJS
Reactive Extensions Library for JavaScript.
参考资料:
开发
git
参考资料:
Visual Studio CodeIDE
参考资料:
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
webstormIDE
参考资料：
webstorm: http://www.jetbrains.com/webstorm/
Sublime
用于代码、标记和散文的复杂文本编辑器。
参考资料：
Sublime: https://www.sublimetext.com/
navicat
数据库管理软件。
参考资料：
navicat: https://www.navicat.com.cn/
Markdown文档编写
参考资料:
Markdown: http://www.markdown.cn/
TypeScriptJavaScript语言的超集,增强JavaScript语言
参考资料:
TypeScript: https://www.typescriptlang.org/
部署
nginx
前端静态资源代理工具。
参考资料:
nginx: https://www.nginx.com/
nginx在应用程序中的作用:
- 解决跨域
- 请求过滤
- 配置gzip
- 负载均衡
- 静态资源服务器
nginx是一个高性能的HTTP和反向代理服务器，也是一个通用的TCP/UDP代理服务器，最初由俄罗斯人Igor Sysoev编写。
docker
前端应用部署工具
参考资料:
docker: https://www.docker.com/
Gitlab前端项目管理工具(包含CI/CD)jenkins前端应用自动化构建工具