• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > 怎么解决phpStorm使用vue提示"Attribute v-xxx is not allowed here"的问题

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

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了phpStorm,使用vue提示,v-xxx is not allowed here等相关知识,希望对您有所帮助

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


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


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


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

If you’re using IntelliJ IDEA Ultimate, PhpStorm, PyCharm, or RubyMine, install Vue.js plugin in Preferences | Plugins - Install JetBrains plugins.

Open your Vue project.

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提示"Attribute v-xxx is not allowed here"的问题


(这里所谓项目指的只是在phpStorm同一个窗口中打开的多个目录而已,只要这些目录中任意一个里有包含vue的node_modules就可以,比如我这里普通项目是html-project, 这个项目里vue是在html文件中通过<script>直接引入使用的。

当前phpStrom里同时包含的另一个项目vue-cli-test是vue-cli使用webpack模板新建的一个空项目,这个项目的node_modules里有vue,有了这个以后html-project项目里html文件支持vue语法提示了。)


分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 怎么解决phpStorm使用vue提示"Attribute v-xxx is not allowed here"的问题
  • 一文搞定phpstorm+laravel+phpunit的配置
  • 一张图搞定如何在PhpStorm中修改类文件头部作者

相关文章

  • 2022-04-29Phpcms V9导航循环下拉菜单实例文件分享
  • 2022-04-29AI教程巧形状生成器制作设计立体渐变数字字体设计教程
  • 2022-04-29Photoshop打造质感光效文字
  • 2022-04-29总结laravel中$request获取请求信息用法
  • 2022-04-29PHP实现腾讯短网址生成api接口实例
  • 2022-04-29Node.js设置NODE_ENV时发生错误怎么解决?
  • 2022-04-29Thinkphp5整合phpsocketio过程亲自踩的坑!
  • 2022-04-29分享封装的一个PHP微信支付的类库(扫码、H5、小程序)
  • 2022-04-29介绍Vue3中Composition API及其核心用法
  • 2022-04-29php怎么将ppt转jpg图片

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • 防止SyntaxHighlighter.js的代码高亮时闪一下的解决方法
    • Discuz! X3.4特殊字符乱码解决方案!
    • 微信小程序按顺序同步执行的两种方式分别是什么
    • 一招教你使用Node.js中iis部署运行node(附代码)
    • 帝国cms网站后台关键字自动同步TAG标签更新的方法
    • windows登陆界面制作
    • Dedecms怎么实现键盘翻页的功能
    • 浅谈bootstrap table分页的实现两种方式
    • PHP怎么去掉富文本样式
    • PhotoShop制作抽象背景立体3D字效果教程

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有