前端开发VueVue.js和Node.js的关系
浅谈为什么vue前端项⽬要使⽤nodejs
⼀、传统的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 运⾏在的开发平台，它让 JavaScript 成为与、、、等服务端语⾔平起平坐的。发布于2009年5⽉，由Ryan Dahl 开发，实质是对Chrome V8引擎进⾏了封装。
Node对⼀些特殊⽤例进⾏优化，提供替代的，使得V8在⾮浏览器环境下运⾏得更好。V8引擎执⾏Javascript的速度⾮常快，性能⾮常好。Node是⼀个基于Chrome JavaScript运⾏时建⽴的平台，⽤于⽅便地搭建响应速度快、易于扩展的⽹络应⽤。Node 使⽤，⾮阻塞模型⽽得以轻量和⾼效，⾮常适合在分布式设备上运⾏数据密集型的实时应⽤。
官⽹上对其特点描述为：
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）（即，代码模块），使⽤包的结构使您能够轻松跟踪依赖项和版本。  官⽹：　www.npmjs/
webpack是基于 Node.js的前端项⽬部署打包⼯具。
grunt是基于 Node.js的前端ＪａｖａＳｃｒｉｐｔ语⾔项⽬构建⼯具，即脚⼿架。⼀句话：构建项⽬⾃动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，⾃动化⼯
具可以减轻你的劳动，简化你的⼯作。当你在⽂件正确配置好了任务，任务运⾏器就会⾃动帮你或你的⼩组完成⼤部分⽆聊的⼯作。官⽹：untjs/
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路由、前端路由的框架通⽤的有 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/flatiron/director ），不过更多还是结合具体
框架来⽤，⽐如 Angular 的 ngRouter, React 的 ReactRouter，以及本节要介绍的 Vue 的 vue-router。如果要独⽴开发⼀个前端路由，需要考虑到页⾯的可插拔、页⾯的⽣命周期、内存管理等问题。
Node的webpack打包的核⼼思想就是单页⾯富应⽤（SPA）。 SPA 通常是由⼀个 h恤l ⽂件和⼀堆按需加载的 js 组成，它的 html 结构可能会⾮常简单，⽐如：
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8”>
<title>webpack app</title>
<link rel＝” stylesheet” href＝”dist/mai⼝ .css ”>
</head>
<body>
<div id=” app”></div> <script type=”text/javascript” src=”dist/main.j s ”></lcript>
</body>
</html>
看起来很简单是吧？只有⼀个＜div＞节点，所有的代码都集成在了神奇的 main扣⽂件中，理论上古可以实现像知乎、淘宝这样⼤型的项⽬。在开始讲解 webpack 的⽤法前，先介绍两个 ES6 中的语法 export 和 impo此，因为在后⾯会⼤量使⽤，如果对它不了解，可能会感到很困惑。 export 和 import 是⽤来导出和导⼊模块的。⼀个模块就是⼀个js ⽂件，它拥有独⽴的作⽤域，⾥⾯定义的变量外部是⽆法获取的。⽐如将⼀个配置⽂件作为模块导出，⽰例代码如下：
以上⼏个⽰例中，导⼊的模块名称都是在 export 的⽂件中设置的，也就是说⽤户必须预先知道这个名称叫什么，⽐如 Config、 add。⽽有的时候，⽤户不想去了解名称是什么，只是把模块的功能拿来使
⽤，或者想⾃定义名称，这时可以使⽤ export default 来输出默认的模块。⽰例代码如下：jquery框架搭建
Node+Vue+ VueRequire+VueRoute+VueCli就是流⾏的前端开发⽅案。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。