webstorm中vue语法的支持详解


Posted in Javascript onMay 09, 2018

俗话说,要想攻其玉,必先利其器。工作中老是在用angular开发,但慢慢会有vue的业务,所以需要学习学习vue。今天开始折腾vue,我是用webstorm开发前端的,当使用vue-cli创建好一个项目后,使用webstorm打开简直不能入目啊,倒是没有啥错误提示,倒是一大堆的各种编辑器警告,无奈,还得去搞好IDE对vue的支持啊。

前提

vue的官方文档上建议新手是先不要使用vue-cli,而是直接先用类似于JQuery一样的方式引入vue来学习。鉴于前面已经搞过了angular的cli,所以我还是直接从cli入手。

假定我们已经安装好了node和npm。

全局安装vue-cli

在终端中运行命令:

npm install --global vue-cli

全局安装vue-cli。然后使用vue-cli创建我们的项目:

vue init webpack my-project

这样我们就有个完整的项目,并且里面会有个示例的组件,运行:

npm run dev

然后在浏览器里面访问http://localhost:8081/就可以看到项目的运行情况。

折腾webstorm

在webstorm打开vue项目的时候,差点就想放弃vue了,实在不忍直视,但还是得发扬一贯的探索精神啊,遇到问题就要解决呗!

.vue类型的文件

首先得从文件类型上入手,在目前的版本中是没有.vue这种文件类型的,所以无法识别也无法高亮,就算识别了也都是乱的。查了下,有些说是在文件类型上加上*.vue就好了,但我加了反而更乱套了。

谷歌了半天,发现了这篇文章,是webstorm官方网站的文章https://www.jetbrains.com/help/webstorm/vue-js.html。webstorm已经支持vue了,但是我在本地的webstorm完全没找到这个选项啊,这是为啥?

看了下,发现webstorm的版本是2018版的,而我的webstorm是2017.2。所以我需要更新到最新版。

得,备份下webstorm的设置,然后下载最新的webstorm然后更新。顺便找了个激活码:http://hb5.s.osidea.cc:1017(热乎的,亲测可用)。

果然安装后,发现了vue的标记,的确新版的是支持的。

但是发现.vue的文件的高亮还是没有的。看来还是得加个文件支持(不知道是不是我前面操作的时候删除了):

preferences > editor > file types

拉下来选择vue.js templates,点击然后在下面的registered patterns里面点击加号,然后输入*.vue,然后点击确定,点击apply应用,然后可以看到webstorm底下有个进度条,走满后,.vue的高亮就正常了。

unused export default

在vue的组件里面的js中有个export default,上面是灰色的提醒,鼠标移上去后发现提示unused export default,这是因为没有具体的使用这个导出,是JavaScript的一个语法提示。我们可以在IDE的configure inspection检查配置中进行配置。

快速的方法是:点击右下角的小人头 》 configure inspection。在弹出的界面中选择:JavaScript 》 General。去掉选项:unused global symbol。然后点击ok,可以看到灰色的提醒消失了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript function调用时的参数检测常用办法
Feb 26 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
jquery实现拖动效果
Aug 10 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 Javascript
canvas 中如何实现物体的框选
Aug 05 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 #Javascript
Vue中使用vee-validate表单验证的方法
May 09 #Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 #Javascript
vue实现2048小游戏功能思路详解
May 09 #Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 #Javascript
vue中的provide/inject的学习使用
May 09 #Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 #Javascript
You might like
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
python如何删除文件中重复的字段
2019/07/16 Python
Python @property使用方法解析
2019/09/17 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
园林设计师自荐信
2013/11/18 职场文书
我未来的职业规划范文
2014/01/11 职场文书
网络研修随笔感言
2014/02/17 职场文书
自荐信如何制作?
2014/02/21 职场文书
通信工程求职信
2014/07/16 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
文明倡议书
2015/01/19 职场文书
公司年会开场白
2015/06/01 职场文书