VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用
2017-05-13 15:28
579 查看
一、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功能的路由器,
到这了你可能已经对VueJs有了大体的了解,之前我还写了一篇关于:《VueJs深入浅出—常用操作手册》点击查看,希望我的文章能对你有所帮助!
祝:周末愉快!
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深入浅出—常用操作手册》点击查看,希望我的文章能对你有所帮助!
祝:周末愉快!
相关文章推荐
- android 开发笔记 使用Volley框架获取json数据出现中文乱码解决方案
- 学习笔记:使用Web Service Software Factory开发简易留言本服务以及Mobile调用实现-1.创建Service
- 使用Qt从事跨平台开发时IDE的选择
- 使用CodeIgniter来调用淘宝SDK数据进行PHP开发
- 【Cocos2d-X开发学习笔记】第02期:渲染框架之节点类(CCNode)的使用
- Android 开发笔记七 BaseAdpater 的使用及优化方法
- 【SSI开发总结.10】eclispe中使用XFire框架调用WebService
- [转]prototype.js开发笔记(针对Ajax的JS框架Prototype的使用介绍)
- [Win8]Windows8开发笔记(九):ListView的使用和数据绑定
- 学习笔记:银江数据源在.net下的使用方法(marshal类在框架下调用非框架dll中的使用)
- ASP.NET开发笔记之数据列表等控件选择【listbox VS gridview】
- java开发框架_ZK使用笔记一
- 让DBA去写数据访问层(DAL)代码--PDF.NET数据开发框架之SQL-MAP使用图解
- 算法优化,如何从120秒到0.5秒【数据结构的选择、数据类型的选择、运算优先级的选择、函数调用关系】
- 使用富盛Sbo-Addon程序开发框架轻松开发模态单据选择查询功能实例
- java开发框架_ZK使用笔记二
- 使用PDF.NET数据开发框架的实体操作语言OQL构造复杂查询条件
- 数据同步框架MS Sync Framework - IDE快速开发支持Local Database Cache
- 【Hibernate框架开发之九】Hibernate 性能优化笔记!(遍历、一级/二级/查询/缓存、乐观悲观锁等优化算法)
- SilverLight企业应用框架设计【五】客户端调用服务端(使用JSON传递数据,自己实现RESTful Web服务)