当前位置: 首页 > news >正文

【vue】vue.js不就是一个文件吗?安装vue是什么意思?

还有就是要安装node.js环境,我有点疑惑,为什么要装它,js脚本不是在浏览器运行吗,以前我接触juery的时候,调试的时候是用Hbuilder的,边写边用浏览器同步看效果。
这里为什么还要安装node.js呢?
总结:
1、教程里的安装vue.js ,这个vue.js是一个脚本文件吗?安装到哪里呢?
2、为什么要安装node.js环境?

答:

1、安装是构建环境安装依赖,就是把vue.js从npm上下载到node_modules里,这就是安装的含义

2、不同开发模式,可以用html+js来开发,也可以用.vue文件+node.js环境来开发

3、你既可以用<script>引入vue,这样是一个最小化的引入。也可以使用vue全家桶,叫做vue-cli,这是一套官方出的工具,描述一下就是vue+一套构建工具。安装也是指这玩意,这玩意需要nodejs。全家通和你用Hbuilder以及“边写边用浏览器同步看效果”并不冲突。至于这玩意有啥用,这一套给你提供了vue开发中许多问题的标准解决方案,包括不仅限于,0成本让你用上最新的语法进行开发,解决前后端分离的许多问题,立刻开始单页面应用开发,提供一个vue项目的文件结构组织形式等等

     现代前端的发展已经超乎了所有人的想象,曾几何时我们还在手撸HTML,CSS,JS,然而时过境迁,那样的时代几乎已经一去不返了。

     jQuery在前端全面进入编译化的时代里渐渐受到了冷落。而vue,这样一个本该全面拥抱新时代的新生儿,却在骨子里保留着那一份传统,以悲壮而孤傲的态度向世人(主要是Angular和React)宣布:只有我,还坚持着引入JS文件方式支持传统开发模式。现在大部分前端开发vue,不,开发所有前端产品,不再是手撸HTML了,他们会先安装node.js,用npm,用webpack,用yarn,用各种cli。

      调试时也不再是用浏览器打开静态html调试了,直接yarn serve后在本地就会形成http://localhost:xxx的标准网站结构,而且页面内容热重载,任何代码改动,页面都会自动更新。数据交互时也不再需要与后端工程师面对面交流,也不再需要学习任何一种后端语言,或者模板语言(类似于freemarker这类的),直接就是API文档沟通彼此了。产品发布时,也不再是各种js,css,img文件夹了,而是对各种js、vue、ts源代码进行编译打包,最后形成了一个dist文件夹,里面拥有打包混淆好鬼都没法理解的最终文件,直接扔进nginx中就能跑。

   以上,是大多数情况。对于另一部分以传统后端工程师为主的前端需求者来说,是不是觉得好复杂,技术栈又要扩充插槽了,脑插显然不太够用。于是,VUE的作者 @尤雨溪 同志,发誓要将vue打造成永远像jQuery一样好用的传统js库,即使是即将迎来的vue3.0时代,也同样如此。于是我们还可以一边用着vue,一边愉快地手撸HTML,愉快地用<script src="">的方式引入vue。如果你能力不弱,完全可以用传统JS的方式,配合VUE构造出一个同样模块化的前端产品出来,甚至可以用它构造出SEO友好的、多页应用的、支持不同语言SSR(服务器端渲染)的前端产品。这么一来,node.js,webpack什么的,见鬼去吧。(注意,这里我的言下之意是:使用node.js、webpack之流很难构建出SEO友好的、多页应用的、支持不同语言SSR的前端产品,因此技术选型确实需要慎重考量。)当然,精力富裕的话,webpack开发模式也建议学一下的,可以打开一个新的世界。

讨论贴:https://bbs.csdn.net/topics/395965179

vue.js开发方式,用html+js和.vue文件+node.js环境开发的区别是什么?

作者:j小鑫
链接:https://www.zhihu.com/question/375249640/answer/1053111698

html+js的vue开发一般就是指每个页面创建夜歌vue实例,来管理该html页面的数据和时间绑定。

而.vue+node.js的话是利用基于webpack构建的vue脚手架vue-cli来开发vue的单页应用(spa)。

前者是没有脱离传统意义的原生html开发,就是有几个页面建几个html文件。

后者是利用内存将所有的dome元素存储在js变量中,需要的时候就拿出来渲染到页面上。根本来说是只有一个html文件的,但是使用的时候看上去是有多个页面的。这么做的优点是,所有的页面都放在内存中,只需要加载一次,调用的时候也特别高效。用户在做切换的时候非常的流畅,体验非常好。但是缺点就是,因为没有事先渲染dome元素,所以seo非常的差劲。

其实这种单一html文件的模式在html+js的开发方法里面也是可以做到的。但是这里复杂的组件定义和调用,还有各种不同的实例混淆策略,都要手写在一个html或者js文件中。这样的代码别说写了,给你一个现成的让你看你都害怕。(当然你可以说一个js文件存放一个vue实例的代码,但是当项目组件达到几十甚至上百个的时候,生命周期都会把你搞崩溃)。

所以这么说来的话,借助vue-cli来开发。你就可以将每个组件建一个.vue文件来管理,所有的混淆策略都已经帮你做好了。路由也可以用vue-router来控制开发,非常的方便。让你轻松的构建拥有上百个页面的大型前端项目!

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 【Vue】Vue引入bootstrap的方法
  • 【vue】vue发布
  • 阿里云ECS端口8080访问不了问题排查
  • 【网络】ECS 8080端口连接拒绝问题排查(服务器外网无法访问原因)
  • 【springBoot】SpringBoot入门最详细教程---研习
  • 【springBoot】controller,service,dao,mapper,model层的作用
  • 【springboot】什么是依赖注入
  • 【java】Java bean 是个什么概念?
  • 【web】Postman 使用教程详解
  • 【vue】vue项目结和start
  • 【vue】vue项目结构-2
  • 【vue】vue + springboot 简单登录代码
  • 【Maven 】Maven 错误 Failure to transfer ...was cached in the local repository...
  • 【Maven】Eclipse自带Maven增加setting.xml
  • 【springboot】springboot 错误集合
  • CSS盒模型深入
  • ECMAScript6(0):ES6简明参考手册
  • javascript数组去重/查找/插入/删除
  • js操作时间(持续更新)
  • JS基础之数据类型、对象、原型、原型链、继承
  • leetcode378. Kth Smallest Element in a Sorted Matrix
  • Python socket服务器端、客户端传送信息
  • RxJS: 简单入门
  • 多线程 start 和 run 方法到底有什么区别?
  • 前端性能优化--懒加载和预加载
  • 前端之React实战:创建跨平台的项目架构
  • 使用Tinker来调试Laravel应用程序的数据以及使用Tinker一些总结
  • 正则学习笔记
  • 06-01 点餐小程序前台界面搭建
  • UI设计初学者应该如何入门?
  • ​iOS实时查看App运行日志
  • ​VRRP 虚拟路由冗余协议(华为)
  • ​如何在iOS手机上查看应用日志
  • ​用户画像从0到100的构建思路
  • ###项目技术发展史
  • #我与Java虚拟机的故事#连载13:有这本书就够了
  • $ is not function   和JQUERY 命名 冲突的解说 Jquer问题 (
  • %check_box% in rails :coditions={:has_many , :through}
  • (html转换)StringEscapeUtils类的转义与反转义方法
  • (带教程)商业版SEO关键词按天计费系统:关键词排名优化、代理服务、手机自适应及搭建教程
  • (二)测试工具
  • (非本人原创)史记·柴静列传(r4笔记第65天)
  • (附源码)springboot太原学院贫困生申请管理系统 毕业设计 101517
  • (三)Kafka 监控之 Streams 监控(Streams Monitoring)和其他
  • (中等) HDU 4370 0 or 1,建模+Dijkstra。
  • (转)利用PHP的debug_backtrace函数,实现PHP文件权限管理、动态加载 【反射】...
  • **CI中自动类加载的用法总结
  • *2 echo、printf、mkdir命令的应用
  • .Net Redis的秒杀Dome和异步执行
  • .so文件(linux系统)
  • /etc/motd and /etc/issue
  • /etc/sudoer文件配置简析
  • @font-face 用字体画图标
  • [20170705]lsnrctl status LISTENER_SCAN1
  • [android] 请求码和结果码的作用