一、IDE的选择:

  VsCode和WebStorm都是不错的选择,说一下两者的优缺点,调试便捷性来说两者不相上下.

  WebStorm缺点:性能方面VsCode远好于WebStorm;

  WebStorm优点:代码引用追踪Ws有VsCode无,控制台输出WS有着色能看出那块代码有问题,VsCode无着色控制台日志和bug查看不直观;

  综合使用来说:推荐使用WebStorm,如果你的电脑配置实在不好可以酌情使用VsCode.

  1.先说VsCode的配置:

  首先是要装VsCode的扩展插件,点击左上角最后一个图标,在搜索里面输入JavaScript (ES6) snippets/NPM/Vue 2 Snippets;

  第二步调试配置:VsCode第一次运行只需要把项目切换到项目根目录/build/dev-server.js点击运行按钮或者使用快捷键F5就可以启动项目了,第一次启动之后ide就会把启动的js记录下来,下次不管在那个页面只需要使用F5启动即可;

  2.再说WebStorm的使用优化vuejs项目的调试配置

  ①.优化WebStorm解决卡顿的问题。

    WebStorm的优化主要在设置内存上,防止ws卡死,设置步骤如下:webstorm安装主目录>bin>WebStorm.exe.vmoptions,更改第二行:-Xms526m,第三行:-Xmx1024m;

  ②.配置vuejs调试js就不需要输npm run dev 启动命令。

    

  


二、VueJs框架特性和数据调用:

  框架特性:纯前端语言,要配合后台接口才可以实现数据交换,vuejs相当于一个编译工具,把你写的代码和依赖的三方库,编译成浏览器可以识别js语言和html页面,所有的业务在用户的浏览器端执行。

  数据调用:既然是客户端语言那么如果让vuejs去做服务器端渲染(SSR)是一件极其困难的事情,官方是这样说的:

  “在 2.3 发布后我们发布了一份完整的构建 Vue 服务端渲染应用的指南。这份指南非常深入,适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读。请移步 ssr.vuejs.org。(目前只有英文版,社区正在进行中文版的翻译)”,可见vuejs在服务器端渲染是非常吃力不讨好的(当然有兴趣的朋友可以去试一下ssr的搭建和渲染,对于深入了解一门语言的原理是很有帮助的),既然vuejs不擅长做服务器端渲染,我们还是把目光聚焦在vuejs的前端操作上,那么一个前台站点去掉用后台最直接的方式就是ajax或者是rpc远程调用,ajax的使用可以使用一些优秀的框架,比如axios、zeptojs等,这些都是可以满足需求的,当然如果使用rpc的话可以使用hprose等。

  具体常用的ajax请求的调用方式和方法,我这里就不细说了,需要的请自行百度,vue官方推荐的交换框架是axios查看详情:https://npm.taobao.org/package/axios


三、VueJs路由选项以及使用

  路由选项:

  

  使用:比如我要使用启用HTML5 history功能的路由器,

var router = new VueRouter({
mode:'history'
});

到这了你可能已经对VueJs有了大体的了解,之前我还写了一篇关于:《VueJs深入浅出—常用操作手册》点击查看,希望我的文章能对你有所帮助!

 

祝:周末愉快!

  

VueJs开发笔记—IDE选择和WebStorm性能优化、框架特性和数据调用、路由选项以及使用的更多相关文章

  1. VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用

    一.IDE的选择: VsCode和WebStorm都是不错的选择,说一下两者的优缺点,调试便捷性来说两者不相上下. WebStorm缺点:性能方面VsCode远好于WebStorm: WebStorm ...

  2. Android群英传笔记——第十章:Android性能优化

    Android群英传笔记--第十章:Android性能优化 随着Android应用增多,功能越来越复杂,布局也越来越丰富了,而这些也成为了阻碍一个应用流畅运行,因此,对复杂的功能进行性能优化是创造高质 ...

  3. 【SQL Server性能优化】删除大量数据的方法比较

    原文:[SQL Server性能优化]删除大量数据的方法比较 如果你要删除表中的大量数据,这个大量一般是指删除大于10%的记录,那么如何删除,效率才会比较高呢? 而如何删除才会对系统的影响相对较小呢? ...

  4. Java高级开发必会的50个性能优化细节

    在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身.养成良好的编码习惯非常重要,能够显著地提升程序性能. 1. 尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时 ...

  5. Java高级开发必会的50个性能优化的细节(珍藏版)

      在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身.养成良好的编码习惯非常重要,能够显著地提升程序性能. ● 1. 尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短 ...

  6. 前端开发,页面加载速度性能优化,如何提高web页面加载速度

    一个网页访问速度的快慢,  不仅看它服务器的配置,这里除去你空间主机配置很烂的情况以外,我们从网站开发方面来探讨,前端技术需要从哪些方面提高访问的速度,需要用到哪些技术手段. 文件的加载 图标的加载: ...

  7. MongoDB学习笔记(四)--索引 && 性能优化

    索引                                                                                             基础索引 ...

  8. Java开发笔记(一百四十八)通过JDBC查询数据记录

    前面介绍了通过JDBC如何管理数据库,当时提到Statement专门提供了executeQuery方法用于查询操作,为什么查询操作这么特殊呢?这是因为其它语句跑完一次就了事了,顶多像insert.up ...

  9. Android之ListView性能优化——一行代码绑定数据——万能适配器

    如下图,加入现在有一个这样的需求图,你会怎么做?作为一个初学者,之前我都是直接用SimpleAdapter结合一个Item的布局来实现的,感觉这样实现起来很方便(基本上一行代码就可以实现),而且也没有 ...

随机推荐

  1. ThreadLocal本地线程变量的理解

     一般的Web应用划分为展现层.服务层和持久层三个层次,在不同的层中编写对应的逻辑,下层通过接口向上层开放功能调用.在一般情况下,从接收请求到返回响应所经过的所有程序调用都同属于一个线程.       ...

  2. 机器学习:形如抛物线的散点图在python和R中的非线性回归拟合方法

    对于样本数据的散点图形如函数y=ax2+bx+c的图像的数据, 在python中的拟合过程为: ##最小二乘法 import numpy as np import scipy as sp import ...

  3. PRINCE2的价值是什么?

    很多学员在进行培训的过程中或者培训后,都会对于PRINCE2带来的价值有各种各样的看法.但是从更加官方一点的角度来说,PRINCE2会有一部分比较通用 的观点. PRINCE2 可以应用到任何类型的项 ...

  4. PT20150801隆重开班

    PT20150801隆重开班 伴随着秋天的的脚步,带着对梦想的憧憬,POPTEST1508期学员步入正式学习阶段:POPTEST的课程内容吸收了互联网公司先进技术的特点,同时坚持深入浅出的教育特点,完 ...

  5. 自动化测试培训:设计和实现分布式QTP调用

    自动化测试培训:设计和实现分布式QTP调用   自动化测试的过程中一个很核心的需求就是执行效率,单位时间里要执行更多的测试用例.为了完成该要求,我们开发一个调度工具,让qtp运行在不同的机器上,通过C ...

  6. JavaWeb总结(八)—EL表达式

    一.EL表达式简介 EL全名Expression Language.主要有以下作用. 1.获取数据 EL表达式主要用于替换JSP页面的脚本表达式,以及各种类型的Web域中检索Java对象.获取数据.( ...

  7. HTML5基础学习

    分享一下html5的一些基础,小白上路! 一.html5基本结构 <!DOCTYPE html> ↑声明文档类型为HTML5文件. 文档声明,在HTML文档必不可少.且必须放在文档第一行 ...

  8. AngularJS1.X学习笔记14-动画(解读文档)

    最近在看算法分析,那个大O啊,小o啊,分治法啊(目前就看到这里),真是搞死了.这回呢休息一下,学学AngularJS动画,上一篇文章根据自由男人的书简单谈到了动画的话题,发现反响很大(好吧,我说慌了, ...

  9. qq面板/ 好友列表

    效果如下:依次为图一---图二----图三----图四 主要实现效果: 点击主标题显示下拉好友,再点击收起下拉好友:鼠标移到好友上背景颜色改变:选中的好友背景颜色也要改变: 代码如下: <!DO ...

  10. org.gradle.api.internal.tasks.DefaultTaskInputs$TaskInputUnionFileCollection cannot be cast to org.gradle.api.internal.file.collections.DefaultConfigurableFileCollection

    转载请注明出处:http://www.cnblogs.com/cnwutianhao/p/6709758.html Android Studio导入项目报错: org.gradle.api.inter ...