解决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"这样的提示,如下图这样
webStorm使用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语法提示了。)

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
PHPStorm中开发Vue应用的方法有很多。一种常见的方法是使用webpack来构建Vue开发环境。首先,你需要安装Node.js和npm来管理你的项目依赖。然后,在你的Vue项目根目录下创建一个package.json文件,可以运行npm init命令来生成。在package.json文件中,你需要添加一些必要的依赖,比如webpackvue-loader等。这些依赖可以在引用提供的链接中找到详细的安装和配置步骤。 另一种方法是使用PHPStorm的插件来支持Vue开发。PHPStorm有一个名为Vue.js的插件,它提供了代码高亮、语法检查、智能提示等功能,使得在PHPStorm中编写Vue代码更加方便。你可以在PHPStorm的插件市场中搜索并安装这个插件。 除了安装插件,PHPStorm还提供了一些其他的Vue开发工具。例如,它支持使用ESLint进行代码规范检查,可以在项目设置中配置并启用ESLint。此外,PHPStorm还支持使用Git进行版本控制,可以将你的Vue项目与Git仓库进行集成。 总之,PHPStorm提供了多种方式来支持Vue开发,包括使用webpack构建开发环境、安装Vue.js插件、配置ESLint和Git等。你可以根据自己的需求选择适合的方式来进行Vue开发。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [VUE 学习一 PHPSTORM 搭建VUE项目](https://blog.csdn.net/shuilan0066/article/details/99634424)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [从零搭建Vue开发环境](https://download.csdn.net/download/weixin_39841848/11524400)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值