怎么解决phpStorm使用vue提示"Attribute v-xxx is not allowed here"的问题


本文摘自PHP中文网,作者藏色散人,侵删。

下面由phpstorm教程栏目给大家介绍解决phpStorm使用vue提示"Attribute v-xxx is not allowed here"的方法,希望对需要的朋友有所帮助!

解决phpStorm使用vue提示"Attribute v-xxx is not allowed here"的问题

jetbrains家族的新版webStorm、phpStorm等工具都已支持vue,不需要自己再安装Vue.js插件,对vue单文件组件支持挺好。
但是在html文件中直接<script>引入的方式使用vue时IDE可能默认不支持vue的代码提示补全,还会有 "Attribute v-xxx is not allowed here"这样的提示,如下图这样
f6f0d5bbcdae61499f8d04377982323.png

参考jetbrains的vue.js插件源码说明里面这段话:

  1. If you’re using IntelliJ IDEA Ultimate, PhpStorm, PyCharm, or RubyMine, install Vue.js plugin in Preferences | Plugins - Install JetBrains plugins.
  2. Open your Vue project.
  3. Make sure that you have Vue.js library files in your project (for example, in the node_modules folder).

看上面第3条,就是说当前IDE项目里需要有vue的库文件,比如在node_modules目录里。
我们分别使用下面两种方法实现:

1.下载vue源文件,适合本机没有git,npm,vue-cli环境的
前往github下载vue源文件, 放到项目目录里就可以了。(如果下载的是zip请先解压)

2.新建一个vue-cli项目,适合本机有npm, vue-cli环境的
新建一个vue-cli项目, 比如:vue init webpack vue-cli-test,根据提示创建完并npm install完成之后在同一个ide窗口中打开刚刚新建的vue-cli项目即可。

不管哪种方法目的都是为了让当前ide窗口中有vue库文件,然后问题就解决了,v-xxx属性不支持的提示已经没有了,v-for之类的指令里的js代码也支持高亮了。

3a700222395480e2eedee35d1bcb638.png

(这里所谓项目指的只是在phpStorm同一个窗口中打开的多个目录而已,只要这些目录中任意一个里有包含vue的node_modules就可以,比如我这里普通项目是html-project, 这个项目里vue是在html文件中通过<script>直接引入使用的。当前phpStrom里同时包含的另一个项目vue-cli-test是vue-cli使用webpack模板新建的一个空项目,这个项目的node_modules里有vue,有了这个以后html-project项目里html文件支持vue语法提示了。)

以上就是怎么解决phpStorm使用vue提示"Attribute v-xxx is not allowed here"的问题的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

如何解决phpstorm cannot find declaration to go to的问题

phpstorm中怎么限制加载文件

解决mac下phpstorm开启过多项目导致异常卡顿到奔溃的问题

分享phpstorm常用快捷键

phpstorm常用快捷键总结

神器phpstorm配置服务器(server)详解

phpstorm xdebug如何配置

phpstorm怎么用js

phpstorm怎么移除项目

phpstorm如何连接ftp

更多相关阅读请进入《phpstorm》频道 >>



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...