网站建设资讯

NEWS

网站建设资讯

webstorm中vue语法的示例分析-创新互联

这篇文章给大家分享的是有关webstorm中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,可以看到灰色的提醒消失了。

感谢各位的阅读!关于“webstorm中vue语法的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文名称:webstorm中vue语法的示例分析-创新互联
网站URL:http://cdweb.net/article/dipedc.html