当前位置：主页 > 前端开发

前端技术架构-技术架构有哪些技术

发布时间：2023-02-08 14:24 浏览次数：次作者：佚名

一、技术选型背景

前端技术的发展日新月异，网上出现了很多新的框架。如何让新入职的人员直接接手项目，或者让相关人员请假，替补人员接手工作，如何让不同前端工程师的开发差异变小是我们公司应该解决的问题考虑。

BAT公司的招聘要求中都提到了“至少熟悉React、Vue、Angular前端MVVM框架中的一种，有前端工程化和模块化开发实践经验”的相关词语。

我们主要从PC、公众号（移动端H5）、小程序三个平台选择前端技术，说说选择其技术的优势。

2、VUE技术的优势

互联网前端大潮过后，前端出现了三大框架，分别是Angular、React和Vue。

2.1 BAT公司技术选型

好的技术框架选型应该参考优秀的BAT公司。直接聘请老板，看看这些大公司用的是什么技术框架。

比较图 1

2.2 三种前端开发框架对比

既然BAT都提到了三大框架，那我们就比较一下各个框架的优缺点吧。

2.2.1 角度

Angular发展到2019年，已经出现了第七个版本。可以类比iPhone的更新速度，平均一年一个版本，不同版本的学习还是有一定差异的。最大的区别是 1 和 2 版本。 Angular 2.0几乎是推倒重做的框架，估计不会有1.X的升级计划。所以对于新开始的项目来说，采用 Angular 将是一个尴尬的时刻。还有，这么大的变化，似乎也证明了1.X也不是那么好。至于 Angular 教程，它们从 cli、npm 和 typescript 开始。很多事情在你面前击中了你。很多东西他都要提，连组件的概念都要讲半天。被拉高了，导致学习成本高。

许多程序员放弃它的原因：难以调试+繁琐。

2.2.2 反应

对于跨平台应用程序开发，React Native 是一个理想的选择，因为它提供了现代的特性并且你可以轻松地找到资源。

2.2.3 视图

但对于另外 5%，Vue.js 是结合了 AngularJS 和 React 的超轻量级（但功能非常丰富）的框架。

它实际上大部分类似于 React，但模板与 AngularJS（HTML + Mustache）几乎相同。

其实它和AngularJS有很大的不同，但是从整体上看，如果你有React或者AngularJS的经验，还是很容易理解的。

渐进式构建能力是 vue.js 的最大优势。 Vue 具有简洁合理的架构，易于理解和构建。 Vue 拥有一个由热情的人们组成的强大社区，这为 vue.js 增加了巨大的价值，并且可以轻松地为一个空白项目创建一个全面的解决方案。对比国内，相当于华为手机的水平，学习成本比较亲民。

在特性方面，Vue有以下特点：

(1) API设计简单，语法简单，学习成本低；

（2）构建不包括路由和ajax功能，使用vuex，vue-router；

(3)指令(dom)和组件(视图、数据、逻辑)处理清晰；

(4) 性能好，易于优化；

(5) 基于依赖跟踪的观察系统，异步队列更新；

(6) 独立触发；

(7) v-model实时渲染；

(8) 适用于：灵活选择模板和渲染功能；

(9) 简单的语法和项目构建；

(10) 渲染速度更快，体积更小。

2.3 vue框架脱颖而出的原因

在比较了三个框架之后，我们最终做出了选择react和vue的决定。为什么我们最终选择了vue？这主要考虑以下几个方面。

(1)小程序可以使用mpvue，公众号H5可以使用vux，app开发可以使用weex，PC端可以使用nuxt。代码复用性实现了开发习惯的统一；

（2）API文档简单，易用，学习成本比较亲民，国人开发，比较接地气；

(3) BAT公司的招聘需求都是用这个框架；

三、vue在各平台的技术选型

3.1 小程序技术选型

3.1.1 哭泣

一个类Vue开发风格的小程序框架

特征：

类Vue开发风格

支持组件开发

支持NPM

支持Promise，主动选择是否开启

ES2015 支持

编译器：支持less/sass/TypeScript等开发

小程序性能优化

车架尺寸：24.3k+8.9k

wepy-redux 数据管理

构建编译工具：wepy-cli，编译配置：wepy.config.js

3.1.2 mpvue

名字含义：mp，小程序的简称，mpvue，小程序中的Vue.js

该框架基于 Vue.js 的核心。 mpvue修改了Vue.js的运行时和编译器实现，使其可以在小程序环境中运行，从而为小程序开发引入了一整套Vue.js开发经验。

特征：

组件开发

完整的Vue.js开发经验，所有.vue单文件组件

Vuex 数据管理解决方案

webpack构建机制：自定义构建策略，开发阶段hotReload

支持npm

使用Vue.js命令行工具vue-cli快速初始化项目

能够将H5代码转换编译成小程序目标代码（可使用html开发）

构建编译工具：vue-cli，编译配置：build

配套设施

mpvue加载器

mpvue-webpack-目标

postcss-mpvue-wxss

px2rpx-loader

其他

3.1.3 选择mpvue的理由

功能比较

比较图 2

与上述技术相比，mpvue 具有更多的优势。

3.2 公众号H5技术选型

Nuxt/Vue SSR，Nuxt.js框架前端技术架构，解决服务端渲染和首屏加载时间问题，实现Vue SSR。

3.3 App技术选择

首选是WEEX，其次是Flutter，最后是React native。

3.4 PC端技术选型

Nuxt.js框架解决了服务端渲染和首屏加载时间问题，实现了Vue SSR。

3.5 UI框架技术选型

PC端：element-ui

APP端：view-ui、vux

3.6 CSS处理器的选择

Stylus，stylus 在追求代码整洁度方面取得了卓越的成功。

4、基于vue的SSR框架nuxtjs的推荐

简单的说，Nuxt.js是Vue.js的一个通用框架，最常用的是用于SSR（服务端渲染）。说得直白点，Vue.js本来就是为SPA（单页应用）开发的，但是随着技术的普及，很多人都想用Vue来开发多页应用，在服务端完成渲染。这时候出现了Nuxt.js框架，简化了SSR的开发难度。也可以直接使用命令将我们制作成静态html的vue项目生成。使用 SSR 将带来巨大的 SEO 提升、更好的用户体验和更多机会（与传统的 Vue SPA 相比）。

4.1 服务器端渲染的好处

主要原因是SPA（Single Page Application）不利于搜索引擎的SEO操作。比如你是一个新闻网站前端技术架构，其中一个主要的流量来源是通过百度、谷歌、必应等搜索引擎，但是他们并不擅长抓取SPA，尤其是百度根本抓不到SPA的内容页面，所以我们必须在服务端把我们的应用渲染成适合搜索引擎抓取的页面，然后下载到客户端。那么Nuxt.js适合新闻、博客、电影、咨询等需要搜索引擎流量的项目。如果你想做一个移动端的项目，没有必要使用这个框架。（其实Nuxt.js个人认为是一种解决方案）

4.2 什么是 SSR？

SSR，即服务端渲染，就是在服务端渲染Vue页面生成html文件，并将html页面传递给浏览器。

4.2.1 SSR的两大优势

(1)SEO不同于SPA的HTML，只有一个没有实际内容的HTML和一个app.js。 SSR生成的HTML是有内容的，可以让搜索引擎对页面内容进行索引。

(2) 更快的内容到达时间。传统的SPA应用从服务端获取bundle.js，然后在客户端解析并挂载到dom中。而 SSR 直接将 HTML 字符串传递给浏览器。首屏加载时间明显加快。

4.2.2 Nuxt.js 的特点

Nuxt.js官网介绍如下：

Nuxt.js 是一个基于 Vue.js 的通用应用程序框架。通过客户端/服务器基础设施的抽象组织，Nuxt.js 主要专注于应用程序的 UI 渲染，它主要有以下特点。

(1) 基于Vue.js

(2) 自动代码分层

(3) 服务端渲染

(4) 强大的路由功能，支持异步数据【使用更方便】