这次给大家带来webstorm中vue语法使用详解，webstorm中vue语法使用的注意事项有哪些，下面就是实战案例，一起来看一下。
俗话说，要想攻其玉，必先利其器。工作中老是在用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官方网站的文章注意事项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，这是因为没有具体的使用这个导出，是注意事项的一个语法提示。我们可以在IDE的configure inspection检查配置中进行配置。
快速的方法是：点击右下角的小人头 》 configure inspection。在弹出的界面中选择：JavaScript 》 General。去掉选项：unused global symbol。然后点击ok，可以看到灰色的提醒消失了。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
注意事项
注意事项
以上就是webstorm中vue语法使用详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2759545.html
