浅谈为什么vue前端项目要使用nodejs

柔光的暖阳◎ 2023-01-19 08:21 462阅读 0赞

一、传统的JavaScript

传统的js是运行在浏览器上的，因为浏览器内核分为两个部分:

渲染引擎---渲染HTML和CSS,

JavaScript 引擎---负责运行 JavaScript,随着技术的发展， Chrome 使用的 JavaScript 引擎是 V8，它的速度非常快且性能好，同时由2009年5月Ryan Dahl开发的Node.js 诞生。

二、什么是Node.js?

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

Node 是一个让 JavaScript 运行在[服务端][Link 1]的开发平台，它让 JavaScript 成为与[PHP][]、[Python][]、[Perl][]、[Ruby][] 等服务端语言平起平坐的[脚本语言][Link 2]。 发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。

Node对一些特殊用例进行优化，提供替代的[API][]，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 Node是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node 使用[事件驱动][Link 3]， 非阻塞[I/O][I_O] 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

官网上对其特点描述为：

1.  它是一个Javascript运行环境
2.  依赖于Chrome V8引擎进行代码解释
3.  事件驱动
4.  非阻塞I/O
5.  轻量、可伸缩，适于实时数据交互应用
6.  单进程，单线程

相对于传统的JavaScript来说，Node.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎。我们知道 Apache + PHP 以及 Java 的 Servlet 都可以用来开发动态网页，Node.js 的作用与他们类似，只不过是使用 JavaScript 来开发，它大大提升了开发的性能以及便利。

(1)使用node开发还可以使用node自有配套的npm包管理工具：  
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：  
允许用户从NPM服务器下载别人编写的第三方包到本地使用。  
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。  
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

Node.js 的使用包管理器 npm来管理所有模块的安装、配置、删除等操作，使用起来非常方便。

(2)node本身就是一个服务端的框架，对于一些简单的项目，我们可以不需要后端配合，直接用node进行数据库的增删改查(但是我们一般不使用这个功能)；

(3)nodejs是一个服务js平台，有自身带的npm(基于 Node.js的前端项目包管理工具)，有第三方的grunt(基于 Node.js的前端项目构建工具即即脚手架)、有第三方的express(路由功能)等强大的代码与项目管理应用。还有自身带的webpack(基于 Node.js的前端项目部署打包工具)，v8(谷歌客户端浏览器ｊａｖａｓｃｒｉｐｔ引擎)等强大的功能。

npm(包管理工具)是基于 Node.js的前端项目包管理工具，是项目中对各种程序包的依赖管理，传统的开发项目主要是后端，现在技术在更新，前端有了框架的开发模式管理，也需要用包管理工具的思想去管理，目的是简化第三方程序包在项目中引用复杂化。前端的ｊｓ包是全世界JavaScript 天才开发共享的各种代码模块，把这些代码模块都按照一个独立的软件功能统一在一个库中，一个代码模块是一个程序包*(package，*即代码模块)。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 *包(package)* (即，代码模块)，使用包的结构使您能够轻松跟踪依赖项和版本。　　官网：　https://www.npmjs.cn/

webpack是基于 Node.js的前端项目部署打包工具。

grunt是基于 Node.js的前端ＪａｖａＳｃｒｉｐｔ语言项目构建工具，即脚手架。一句话：构建项目自动化。对于需要反复重复的任务，例如压缩(minification)、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 [Gruntfile][] 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。官网：https://www.gruntjs.net/

Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。

三、Vue

首先vue.js 是库，不是框架，不是框架，不是框架。

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

vue.js 支持路由功能开发的 叫vue-route.js，vue.js支持数据请求功能开发的 叫vue-resource.js，李祥需求查资料求证？

vue.js 下载过来直接在html中引入就能使用，并不一定要npm install vue，那仕么业务开发需求场景下需要使用NPM呢？ＮＰＭ是仕么？

Vue.js可以在html里直接引用后使用，等到与Vue一起配合使用的第三方应用的库或框架多起来后，一个个从html里引入就不方便了，所有要借用node.js中的npm管理包的引入，是方便包管理。

使用Vue.js开发的前端项目如何部署？我们用到node.js中的程序打包工具比如webpack(node.js中的程序部署打包工具)，可以直接require引入之后将不同模块打包成单个js文件。同时这些工具提供各种自动化处理，让前端开发更爽。

Vue.js是数据驱动，和JQuery思路不同，你几乎不需要自己进行复杂低效的dom操作，开发简介明了。从这一点上说，可以基本抛弃JQuery了。

Vue.js开发有第三方支持的项目构建工具，vue-cli脚手架

通过上面的分析，与其说是VUE需要借助NODE开发前端项目，不如换个思路，在NODE中集成VUE开发前端项目，所以，先安装Node,使用Node的npm先安装Vue，然后再安装vue-cli脚手架，最后通过vue-cli脚手架构建前端项目。

再扩展一下思路：

上述我们解读了Vue与Node的关系，从他们之间的关系，刨根问底，这个问题的本质是前端开发思想的问题，传统前端开发只是CSS、CSS3、HTML、HTML5、传统JS、面向对象JS(类似jQuery类库)的开发，前端技术在近几年发展迅速，如今的前端开发己不再是 10 年前写个 HTML 和 css 那样简单 了，新的概念层出不穷，比如 ECMAScript 6、 Node.js、 NPM、前端工程化、轻量级模板引擎、模块化(如vue模块vue-require.js)、组件化、预编译、双向数据绑定、路由(如vue路由[vue-*route*.*js*][vue-_route_._js]、前端路由的框架通用的有 Director、Angular 的 ngRouter、React 的 ReactRouter)、状态管 理、动画、、 SSR、前后端分离开发等。这些新东西在不断 优化我们的开发模式，改变我们的编程思想。 随着这些技术的普及，出现一套可称为“万金油”的技术技被许多商业项目用于生产环境：

jQuery + RequireJS ( SeaJS ) + artTemplate (doT) +Gulp (Grunt)是一种前端开发方案

这套技术战以 jQuery 为核心，能兼容绝大部分浏览器，这是很多企业比较关心的，因为他们 的客户很可能还在用 IE7 及以下浏览器。使用 RequireJS 或 SeaJS 进行模块化开发可以解决代码依 赖混乱的问题， 同时便于维护及团队协作。使用轻量级的前端模板(如 doT)可以将数据与 HTML 模板分离。最后，使用自动化构建工具(如 Gulp)可以合并压缩代码，如果你喜欢写 Less、 Sass 以及现在流行的 ES 6，也可以帮你进行预编译。 这样一套看似完美无瑕的前端解决方案就构成了我们所说的传统前端开发模式，由于它的简 单、 高效、实用， 至今仍有不少开发者在使用。不过随着项目的扩大和时间的推移，出现了更复杂 的业务场景，比如 SPA (单页面富应用〉 、 组件解稍等。为了提升开发效率，降低维护成本，传 统的前端开发模式己不能完全满足我们的需求，这时就出现了如 Angular、 React 以及我们要介绍 的主角 Vue 。

从综合解决方案来讲，Node.js迈出第一步，为前端工程化开发奠定了基础，基于Node提供了项目脚手架、打包工具、包管理工具等等，基于Node诞生了Vue、Angular、 React等前端开发思想，以及组装搭配的前端开发方案。

在 Node.js 出现后，jQuery + RequireJS ( SeaJS ) + artTemplate (doT) +Gulp (Grunt)开发组合又有了改善，就是所谓的大前端，得益于 Node.js 和 JavaScript 的语 言特性， html 模板可以完全由前端来控制，同步或异步渲染完全由前端自由决定，并且由前端维 护一套模板，这就是为什么在服务端使用 artTemplate、 React 以及 Vue2 的原因。说了这么多，到 底怎样算是 SPA 呢？其实就是在前后端分离的基础上，加一层前端路由。

前端路由，即由前端来维护一个路由规则。实现有两种，一种是利用 url 的 hash， 就是常说的 锚点(刑， JavaScrip／通过 hashChange 事件来监听 url 的改变， IE7 及以下需要用轮询：另一种就是 HTML5 的 History 模式，它使 url 看起来像普通网站那样，以“／”分剖，没有＃，但页面并没有 跳转，不过使用这种模式需要服务端支持，服务端在接收到所有的请求后，在fl指向同一个 html 文 件，不然会出现 404。因此， SPA 只有一个 ht时，整个网站所有的内容都在这一个 html 里，通过 JavaScript 来处理。 前端路由的优点有很多，比如页面持久性，像大部分音乐网站，你都可以在播放歌曲的同时 跳转到别的页面，而音乐没有中断。再比如前后端彻底分离。前端路由的框架通用的有 Director (ht刷：／／github.com/flatiron/director )，不过更多还是结合具体框架来用，比如 Angular 的 ngRouter, React 的 ReactRouter，以及本节要介绍的 Vue 的 vue-router。 如果要独立开发一个前端路由，需要考虑到页面的可插拔、页面的生命周期、内存管理等 问题。

Node的webpack打包的核心思想就是单页面富应用(SPA) 。 SPA 通常是由一个 h恤l 文件和一堆按需 加载的 js 组成，它的 html 结构可能会非常简单，比如：  
<!DOCTYPE html>

<head>

<title>webpack app</title>

</head>

</html>  
看起来很简单是吧？只有一个＜div＞节点，所有的代码都集成在了神奇的 main扣 文件中，理论 上古可以实现像知乎、淘宝这样大型的项目。 在开始讲解 webpack 的用法前，先介绍两个 ES6 中的语法 export 和 impo此， 因为在后面会大 量使用，如果对它不了解，可能会感到很困惑。 export 和 import 是用来导出和导入模块的。 一个模块就是一个js 文件，它拥有独立的作用域， 里面定义的变量外部是无法获取的。比如将一个配置文件作为模块导出，示例代码如下：

![5c941140714fd3cc353fc98e8c6937b3.png][]

![8405c63975248ff0465809bed5f18863.png][]

以上几个示例中，导入的模块名称都是在 export 的文件中设置的，也就是说用户必须预先知道 这个名称叫什么，比如 Config、 add。而有的时候，用户不想去了解名称是什么，只是把模块的功能 拿来使用，或者想自定义名称，这时可以使用 export default 来输出默认的模块。示例代码如下：

![7827558c283d293c53b6c2db6170249d.png][]

Node+Vue+ VueRequire+VueRoute+VueCli就是流行的前端开发方案。

[Link 1]: https://baike.so.com/doc/5988965-6201932.html
[PHP]: https://baike.so.com/doc/5336503-5571942.html
[Python]: https://baike.so.com/doc/1790119-1892991.html
[Perl]: https://baike.so.com/doc/5106225-5334848.html
[Ruby]: https://baike.so.com/doc/4990463-5214197.html
[Link 2]: https://baike.so.com/doc/2874347-3033293.html
[API]: https://baike.so.com/doc/24846846-25783482.html
[Link 3]: https://baike.so.com/doc/357634-378877.html
[I_O]: https://baike.so.com/doc/3034590-3199433.html
[Gruntfile]: https://www.gruntjs.net/sample-gruntfile
[vue-_route_._js]: http://www.baidu.com/link?url=4lYQwX77R11oT1BehXzcXAkO9EFDOF9plGWn7exVdTmhzKBccFyYjVDtZfZ7ZVtX
[5c941140714fd3cc353fc98e8c6937b3.png]: /images/20221021/a5feac38bf89414b8d4d6c3aa2014076.png
[8405c63975248ff0465809bed5f18863.png]: /images/20221021/5112b8d90e7c47eb91e1a0a920c82329.png
[7827558c283d293c53b6c2db6170249d.png]: /images/20221021/5dff2a2125f946e9836ffe6d222b2847.png