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 相关文章推荐
Jquery 表格合并的问题分享
Sep 17 Javascript
JQuery触发事件例如click
Sep 11 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
JSONP之我见
Mar 24 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
vue实现登录拦截
Jun 29 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
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
php 发送带附件邮件示例
2014/01/23 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
php中session定期自动清理的方法
2015/11/12 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
Python: glob匹配文件的操作
2020/12/11 Python
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
办公室文员自荐书
2014/02/03 职场文书
xxx同志考察材料
2014/02/07 职场文书
学生安全教育材料
2014/02/14 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
银行实习推荐信
2015/03/27 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js