前端开发 Vue Vue.js和Node.js的关系

您所在的位置:网站首页 vue需要html吗 前端开发 Vue Vue.js和Node.js的关系

前端开发 Vue Vue.js和Node.js的关系

2023-06-06 23:02| 来源: 网络整理| 查看: 265

三、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呢?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、前端路由的框架通用的有 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 结构可能会非常简单,比如:

webpack app

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

 

 

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

 

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3