1. 项目技术分类
项目开发中，所以用到的前端技术分为以下几类：
- 脚本语言，如：JavaScript、TypeScript
- 样式语言，如：CSS、Sass、Less、Stylus
- 框架及生态链，如：Vue、React、Angular
- 组件库，如：ElementUI
- 构建工具，如：Webpack
- 其它工具库，如：网络请求的工具
2. 脚本语言
选项：
目前成熟且广泛使用的脚本语言有如下两个：
- JavaScript：浏览器的默认脚本语言
- TypeScript：TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。
通用工具的封装： 应选择 TypeScript
业务代码开发： 优先选择 TypeScript，如果学习成本是问题 或者 追求效率，则也可选择 JavaScript
选择理由：
- TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法；JavaScript 代码可与 TypeScript 一起工作无需任何修改；
- TypeScript 有丰富的类型系统，支持编译时对代码进行静态类型检查；而 JavaScript 是弱类型语法，没有类型描述和约束，故也不能完成静态类型检查；
- TypeScript 有 JavaScript 没有的许多特性，比如：元组、枚举、接口、交叉、联合、泛型、可选、类型推导 等等；
- 将来我们的项目是需要撰写规范、严谨的接口文档的，而 TypeScript 可以方便地导出类型描述，有助于 接口文档 的撰写；即使用 JavaScript 开发，撰写接口文档的工作量 就相当于 完成了 将 JavaScript 改成 TypeScript 的工作量；
- TypeScript 代码可读性比 JavaScript 高许多，非常利于协作开发；
3. 样式语言
选项：
- CSS：浏览器默认的样式语言
- Less：CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
- Sass：Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
- Stylus : Stylus是一种创新的样式表语言，可编译为CSS。受SASS的启发，Stylus是由node.js构建的，并能够在本交互式教程中说明的浏览器中运行。编辑左侧的Stylus源，以查看所产生的更改出现在右侧的CSS中。
选择建义： 如果有使用 UI库 ，则优先选择 UI库 使用的样式语言；如果 没有使用 UI库，或 使用了多种UI库，希望统一样式语言，则建义选择 Stylus
选择理由：
- Less的特性与 Sass、Stylus 较弱，并且较老，故排除；
- Sass : 在安装项目依赖时，经常因为 Sass 相关的依赖而安装失败，Sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby，而国内安装 Ruby 需要 更改镜像源，而这不是前端技术栈满园内的东西；而 Stylus 是 NodeJS 项目，不存在 Sass 这样的问题；
- Stylus : 对于逻辑上的语法和关键字 更接近 JavaScript，比如：变量、函数、条件语句、循环语句 等等；
- Stylus 支持属性查找，可以方便地引用其它 css 属性的值，Sass 不支持；
- Stylus 支持任意父级选择器的引用，也可以你使用相对路径和绝对路径的方式来引用父级选择器，利用些特性，可以方便实现关注点分离；
- Stylus 有丰富的运算符，和强大的运算机制；可以对各种单位的数值及颜色进行运算；
- Stylus 的扩展 @extend 支持 嵌套的选择器，Sass 不支持；
- 总之，Stylus 如 JS 般强大；
4. 框架及生态链
4.1. Web框架
对于以Web产品为主的项目，建义主要使用Web技术，Web技术的框架选择如下：
选项：
优先选择： Vue
选择理由：
- Angular 的学习成本太高，而且体量太大，故排除；
- React 和 Vue 性能和体量都差不多； React 有两种使用模式 JSX、和 createElement ，前者 需要经过构建才能在浏览器中运算，后者不需要，但编写代码时十分麻烦；而 Vue 有四种使用模式 Vue文件、JSX、createElement、配置对象，其中 Vue文件、JSX 得需要构建的， createElement、配置对象 是不需要构建的，且 配置对象 的方式 比 createElement 的方式方便的多；
- React 特性 Vue 基本上都有（虽然在 createElement 方式编写方面没有 React 强大，但我也封装了一些工具阿弥补了这点，并且这种场景也不常用，只有在实现一些非常高级的特性时有可能会用到），而 Vue 具有特性， React 不一定具有，比如 Vue文件 和 配置对象 的 编写方式；
- Vue 的 Vue文件的编写方式 与 我一直推行的 功能点分离（详见Vue项目组织规范/项目结构的核心思想） 的思想相吻合；
4.2. 跨平台框架
对于需要跨多个平台的项目（比如：IOS、Android、Web、小程序 等等），且各端的重要性比重均等的情况下，建义使用跨平台框架来解决跨平台问题；
选项：
- Flutter：Flutter 是 Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口，开发者可以很快地为 Flutter添加 native扩展。
- React Native：使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，将虚拟DOM映射为原生控件，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
- uni-app：是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
优先选择： uni-app
选择理由：
- Flutter 目前只能跨 Android 和 IOS，且使用的是 Dart 语言，目前在前端行业会 Dart 语言的人很少，所以弃之；
- React Native 使用的技术栈是 JavaScript + React，目前只能跨 Android 和 IOS，还不能跨小程序等平台，所以弃之；
- 选择 uni-app 的原因：
- uni-app 可跨 Android、IOS、Web、各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台；
- 提供云打包和本地打包，对没有苹果电脑的人是福音，可以使用云打包进行苹果ipa制作；
- 使用 Vue 语法，微信小程序 Api，使得前端开发学习成本低；
5. 组件库
前端的组件库太多了，这是给出做的较好的Vue组件库；
5.1. 移动端
选项：
优先选择： Vant
选择理由：
- 相比其它移动端组件库（比如：Vux），组件功能较强大，且全面；
- 支持占位组件，占位组件能在视觉上提升加载速度；
- 有专门的图片组件，并且支持懒加载；
5.2. PC端
选项：
- ElementUI 的组件 强大、充分可配置; 由饿了么官方团队开发和维护，且更新频率快，文档详尽且规范,同时支持 Angular、Vue、React；
- ViewUI 的免费版本 和 ElementUI 一样强大、充分可配置；由 北京视图更新科技有限公司 开发，并且有 收费的 Pro 版本；
- 个人觉得 ElementUI 没有 ViewUI 美观；
- 我公司前端人员几乎都用过 ElementUI；
6. 构建工具
选项：
优先选择： 框架对应的脚手架
选择理由：
- 开箱即用；
7. JS代码检查工具
选项：
- ESLint
- JSHint
- JSLint
- TSLint
优先选择： ESLint
选择理由：
- 相比 JSLint、JSLint，强大、可扩展、充分可配；并且是现在主流；
- 针对对于 TypeScript 语言 的 TSLint 官方已经停止维护并改为用 ESLint 实现；即，现在通过更改配置可以让 ESLint 即可以对 JavaScript 进行检查，也可以对 TypeScript 进行检查；
