解决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"这样的提示，如下图这样

参考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代码也支持高亮了。

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

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• PHP7中mysql的扩展模块安装要注意什么，怎么做

  本篇文章给大家介绍一下PHP7中安装mysql的扩展模块的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

• swoole中task进程应用场景有什么，能处理什么问题

  swoole中有两大进程，分别是master主进程和manager管理进程。其中master主进程中会有一个主reactor线程和多个reactor线程，主要的作用就是用来维护TCP连接，处理网络IO，收发数据。

• PHP中怎样把正数转负数，代码怎样写

  1、创建一个PHP示例文件。2、定义一个正数变量。3、通过“$number *= -1;”方式实现正数转负数即可。

• swoole心跳机制是什么，如何用于判断连接正常或断开

  swoole使用心跳机制判断fd是否连接，客户端定时发送一个心跳包，告诉服务器我还活着，服务器定时检测所有客户端列表，看他们最后一个心跳包的时间是否过长，如果过长，则认为已无心跳，判定为死连接，主动关闭这个连接。

• PHP缓存技术有哪些，实现方式是怎样的

  1、全页面静态化缓存也就是将页面全部生成html静态页面，用户访问时直接访问的静态页面，而不会去走php服务器解析的流程。此种方式，在CMS系统中比较常见，比如dedecms；...