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

一、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深入浅出—常用操作手册》点击查看,希望我的文章能对你有所帮助!

 

 

祝:周末愉快!

  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/547125.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MFC新建文件夹、打开文件夹的实现方法

一、 MFC新建文件夹到指定路径的实现方法 典例: 二、 MFC保存文件到指定路径的实现方法 典例: 三、 MFC打开指定路径的文件夹的实现方法 典例: 注意:ShellExecute函数还可以打开指定路径的普通文件或者可执行文件。

VueJs生产环境部署

VueJs为客户端语言,所以部署的时候是不需要基于nodejs或其他服务器运行环境,只需要像其他静态站点的方式发布就可以了,下面介绍一下VueJs具体发布的流程还有需要注意的点。 先来看VueJs最终生成的文件目录: 具体的步骤如下&#x…

a20隐藏底部按钮及隐藏状态栏和虚拟按键栏

2019独角兽企业重金招聘Python工程师标准>>> 隐藏RecentButton按钮: 在源码android4.2/frameworks/base/packages/SystemUI/src/com/android/systemui/statusbar/tablet/TabletStatusBar.java的makeStatusBarView()方法中添加(这是全志androi…

如何计算一个网段的子网掩码,网络ID,广播地址和可用IP地址数

1.判断两个IP在不在一个网段,主要看这两个IP的网络ID,如果网络ID相同则这两个IP在同一网段 示例:判断192.168.0.11/26 和 192.168.0.111/26在不在同一网段 首先计算两个IP的网络ID: 192.168.0.11/26 子网掩码(2进…

WebApi开启CORS支持跨域POST

概念:CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。 现象:如请…

MFC中CString类字符串与长整型、浮点型、字符数组char数据之间的相互转换

一、长整型数据与CString类字符串相互转换 1.将长整型数据转换为CString字符串类 CString str; long ld; str.Format(_T("%ld"),ld); 2.将CString字符串类转换为长整型数据 CString str; long ld; ld_wtol(str); _wtol()在<stdlib.h> and <wchar.h>…

SSH2 后端编程思路总结

课程快结束了&#xff0c;那我就总结一下利用SSH2框架设计网站后端的思路吧。网站的后端设计大部分操作都是数据的存取&#xff0c;那么就总结一下Strut2中后端操作以及几点要注意的事项吧。后端操作&#xff1a;后端的操作基本上都是在Model、Action以及Service中完成的&#…

如何给APP开发属于自己的小程序

前言 工欲善其事&#xff0c;必先利其器。 首先&#xff0c;我们需要知道微信小程序是什么&#xff1f;微信小程序内核是什么&#xff1f;微信小程序的开发语言什么&#xff1f;这样才能更好的开发微信小程序&#xff0c;以及解决遇到的问题。 一、微信小程序是什么 微信小程…

Xamarin开发笔记—WebView双项事件调用

1.Xamarin调用WebView&#xff1a; 原理&#xff1a;Xamarin.Forms WebView内置方法xx.Eval(..)可以调用到页面里面的js函数。 WebView展示的代码如下&#xff1a; var htmlSource new HtmlWebViewSource();htmlSource.Html "<html><head><meta charse…

数据仓库入门(实验10)在Excel中查询层次结构

一、连接到SSAS二、导入数据三、选择数值、行标签、列标签1. 选择数值2. 选择行标签3. 选择列标签四、过滤五、完成转载于:https://blog.51cto.com/jimshu/1339522

MFC中CString类字符串用法小结

一、 赋值运算 二、 比较运算 注意&#xff1a;如果s1小于s2;则z等于-1&#xff1b;如果s1大于s2;则z等于1&#xff1b;如果s1等于s2;则z等于0&#xff1b; 三、 删除函数 四、 插入函数 五、 计算字符总个数函数 更加详细内容参考VS2010 MSDN

设置 Google Analytics(分析)全局网站统计代码

设置 Google Analytics&#xff08;分析&#xff09;全局网站统计代码 本文包含的主题&#xff1a; 基本说明根据您的网站类型设置数据收集验证您的全局网站代码是否正常工作相关资源 基本说明 无论您要从哪些网站收集数据&#xff0c;如果您尚未为每个目标网站分别创建 Goog…

Xamarin开发笔记—百度在线语音合成

续《是时候开始用C#快速开发移动应用了》刷屏之后&#xff0c;把C#开发移动应用的技术 > Xamarin&#xff0c;在这里和大家做一个分享&#xff01; 语音合成&#xff1a;也被称为文本转换技术&#xff08;TTS&#xff09;&#xff0c;它是将计算机自己产生的、或外部输入的…

《Oracle comment on注释信息方法论》

更多精彩内容尽在leonarding.blog.51cto.com《Oracle comment on注释信息方法论》引言&#xff1a;在DBA日常工作中写注释信息可能会经常有&#xff0c;但用Oracle命令来写和使用我想应该不是很多&#xff0c;其实Oracle给我们提供了非常丰富的语言表述语法&#xff0c;而我们日…

利用MFC按钮使能(或禁用)属性使按钮变正常色(或灰色)

利用MFC按钮使能&#xff08;或禁用&#xff09;属性使按钮变正常色&#xff08;或灰色&#xff09; GetDlgItem(IDC_XXX)->EnableWindow(FALSE)//IDC_XXX为你想变灰的按钮的ID 利用你找到的handle&#xff0c;或者窗体&#xff08;按钮也是一个窗体&#xff09;指针&#…

js处理16进制hex转str出现的中文乱码问题

昨天從FB下載了一份包含所有對話紀錄的JSON檔&#xff0c;但裡面的中文字編碼有問題&#xff0c;通通變成下面這個樣子 "\u00e7\u0094\u009f\u00e6\u0097\u00a5"本來想說這種事情應該很簡單&#xff0c;就把他每個字元當成char轉存不就得了&#xff0c;結果轉出來的東…

CentOS 6.2 本地安装YUM

一般学习linux的同学都是先学习的Red hat吧&#xff0c;小编也是如此&#xff0c;但是在生产环境中&#xff0c;大多数企业用的是基于redhat 内核的 centos &#xff0c;小编最近在接触centos时&#xff0c;就发现了不少问题&#xff0c;今天先从本地YUM说起。 redhat配置本地Y…

MFC设置对话框背景色及控件颜色

MFC设置对话框背景色及控件颜色 一、使用背景图片更改对话框背景色 在对话框源文件void CxxDlg::OnPaint()函数中 if (IsIconic()) { (这里省略) } else { CDialogEx::OnPaint(); } else里面添加下列代码&#xff1a; 效果如下图所示&#xff1a; 二、使用颜色更改对话…

Stacked Hourglass Networks 人体姿态检测

本文是人体关键点中非常经典的一篇文章&#xff1a;Stacked Hourglass Networks for Human Pose Estimation 论文地址&#xff1a; https://arxiv.org/abs/1603.06937​arxiv.org 代码地址&#xff1a; wbenbihi/hourglasstensorlfow​github.com​编辑 论文框图&#xff1…

Xamarin开发笔记—设备类amp;第三方弹窗的使用和注意事项

一、设备类是Xamarin重要开发组成部分&#xff0c;下面介绍一下设备类的主要用法&#xff1a; //唤醒打电话Device.OpenUri(new Uri("tel:180xxxxxxxx"));//打开网页Device.OpenUri(new Uri("http://vipstone.cnblogs.com/"));//判断当前运行平台Device.Ru…