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 Global对象
Aug 13 Javascript
一个简单的javascript类定义例子
Sep 12 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
javascript常用的方法分享
Jul 01 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
浅谈手写node可读流之流动模式
Jun 01 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
vue实现员工信息录入功能
Jun 11 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 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中Session的概念
2006/10/09 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
php备份数据库类分享
2015/04/14 PHP
页面载入结束自动调用js函数示例
2013/09/23 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
javascript回调函数详解
2018/02/06 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Django REST framework 分页的实现代码
2019/06/19 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
先进人物事迹材料
2014/12/29 职场文书
投资意向协议书
2015/01/29 职场文书
销售经理岗位职责
2015/01/31 职场文书
烟台的海导游词
2015/02/02 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers