`

webstorm添加vue模板支持

 
阅读更多

在 Vue 中,可以利用一个 .vue 文件实现组件化,而不需要对每个组件分别建立 style, scripts 和 view。
这样做的好处是使组件能更加直观,而坏处是目前有些 editor 对 .vue 的语法支持还是不太好。
我用 Atom 写 .vue 的时候,<style> 的那一块并不能自动补全。不过我个人不依赖 css 的补全,所以没有太大的影响。如果你比较依赖这个,建议你还是把这些代码分离出来。

引用自djyde博客-vuejs-and-webpack-3
Atom没用过,我是webstorm的死忠,所以还是可以so easy的添加对.vue的提示支持;
默认情况编辑器会把.vue文件作为.txt文件的提示方式处理,这对开发纵然是不便利的;乍一看.vue文件的编写结构

  • <style>css-样式
  • <template>html-模板
  • <script>js-脚本

这是什么?这不就是一个内联样式带有JS脚本的html文件吗!
通过webstorm中的File Types配置 将.vue格式的文件注册为HTML文件类型,这样html中的代码提示也会被用到.vue上;
设置演示:



 
演示动画

2016-6-29更新:

  1. 这两个月有两款vue的插件可以在ws上使用,一款叫vue-for-idea 一款就叫vue;不过有个问题 我建议大家升级到ws2016版本 不然插件容易出问题;
  2. 再一个就是es6语法报错的问题,大家在设置中找javascript 在framework里将其设定为ECMAScript6.0即可

2016-10-12更新:
评论区童鞋反馈vue-for-idea无法在idea的plugin资源中搜索到。因为已经被移除了,可能是被反馈用着不好?看作者也很久没有todo了



作者:懒先森
链接:https://www.jianshu.com/p/142dae4f8b51
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 大小: 1.3 MB
分享到:
评论

相关推荐

    详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

    在本文中,我们将深入探讨如何在WebStorm中为Vue.js单文件组件添加高亮显示和语法支持,这对于Vue开发者来说是非常实用的技巧。Vue.js是一个流行的前端框架,而WebStorm是一款强大的JavaScript集成开发环境(IDE),...

    webstorm和.vue中es6语法报错的解决方法

    2. 粗暴方法:直接在标签中添加 type="text/ecmascript-6",.vue 里面的代码会高亮并支持 ES6。 3. 将 script 标签添加,然后打开 Settings =&gt; Language Injections,添加 XML Tag Injection,内容如下图。 补充新...

    webstrom Debug 调试vue项目的方法步骤

    - 下载Vue.js支持插件:可以通过插件市场安装专门支持Vue.js的插件,这有助于WebStorm理解Vue组件和模板。 - 配置运行/调试配置:在WebStorm中设置运行/调试配置,选择运行或调试Vue项目。 - 设置断点:在代码中设置...

    webstorm+vue初始化项目的方法

    下面我们将详细讨论如何使用WebStorm和Vue CLI初始化一个新的Vue项目。 首先,确保你的开发环境已经准备好。这包括安装Node.js,因为Vue CLI和npm(Node包管理器)都是基于Node.js的。你可以从Node.js官方网站下载...

    【JavaScript源代码】基于vue项目设置resolves.alias '@'路径并适配webstorm.docx

    10. **Vue模板配置与WebStorm代码格式规范设置**:了解如何在WebStorm中设置符合个人习惯的代码格式化规则。 通过以上内容的学习,相信你已经掌握了如何在基于Vue.js的项目中配置路径别名以及如何在WebStorm中有效...

    WebStorm 10.0.4汉化包

    5. **框架和库的支持**:WebStorm对Angular、React、Vue.js等现代前端框架提供了专门的集成,包括代码提示、模板智能感知、自动完成以及框架特定的重构工具。 6. **代码格式化与重构**:WebStorm可以帮助开发者保持...

    eslintpluginvue一个自定义的eslintparser可以直接处理vue文件并检查模板里的语法错误

    6. **集成开发环境(IDE)支持**:许多流行的 IDE 和代码编辑器(如 Visual Studio Code、WebStorm 等)都有 ESLint 集成,配合 `eslint-plugin-vue` 可实现实时的代码检查和错误高亮。 7. **与其他工具的兼容性**...

    谷歌浏览器-vue插件-5.3.4-0.zip

    2. **代码高亮与提示**:插件可能提供了Vue语法的代码高亮和智能提示,使开发者在浏览器中直接编辑Vue模板时有更好的体验。 3. **性能分析**:某些Vue插件可以帮助分析Vue应用的性能瓶颈,如组件渲染速度、内存占用...

    VUE简要开发教程.pdf

    10. **IDE支持**:Vue.js开发可以使用各种IDE,如IDEA、WebStorm、VS Code等,它们提供了丰富的Vue.js插件和功能,提高开发效率。 通过学习和实践这些基础知识,你就能开始使用Vue.js进行前端开发。Vue.js的官方...

    vue初始化项目.txt

    1、初始化项目模板: vue init webpack-simple yunshi-approve 或者 vue init webpack yunshi-approve 2、安装npm cd yunshi-approve 3、安装项目所需要的依赖: npm install 或 cnpm install 4、运行看效果...

    vue+vue-router+webpack框架搭建.pdf

    7. **vue-resource配置**:为了与后端进行数据交互,需要添加vue-resource依赖,使用`npm install vue-resource --save`。在`main.js`中引入并配置,然后可以在Vue实例中使用`http`方法进行API请求。 这些步骤完成...

    VUE Cli的基础文档

    Vue CLI的默认配置已经很完善,但开发者可以根据需要在vue.config.js中添加或修改Webpack配置,例如设置别名、调整输出路径、添加自定义Loader或Plugin等。 “DAY02-VUE Cli基础-02.pdf”和“DAY02-VUE Cli基础-02....

    基于vue-element-admin开发的cms-rbac权限管理系统后台前端源码

    【解析】Vue-element-admin是一款基于Vue.js和Element-UI的后台管理界面模板,它为开发者提供了丰富的预设组件和功能,便于快速构建高效且易维护的企业级后台系统。RBAC(Role-Based Access Control)权限管理是系统...

    VUE+element后台管理系统.rar

    6. **增删改查**:基本的CRUD操作,使用Vue的数据绑定和事件处理,结合Element UI的表单组件完成数据的添加、删除、修改和查询。 项目中的目录结构大致如下: - `index.html`:主入口文件,包含Vue实例的挂载点。 ...

    VUE多应用项目搭建源码

    6. **WebStorm集成**:WebStorm是一款强大的JavaScript IDE,提供了对Vue的出色支持,包括代码提示、自动完成、调试等。在WebStorm中,可以方便地管理和运行Vue项目。 7. **项目结构**:一个典型的Vue多应用项目...

    基于Vue+Vant+SSM图书管理系统

    程序开发软件:Eclipse或者Idea + WebStorm 数据库:mysql api接口采用技术:Vue(前端框架) + Vant(前端轻量级ui库) + SSM框架,可以升级Springboot 基于Vue图书管理app技术要点: 1 此系统web端接口采用java语言...

Global site tag (gtag.js) - Google Analytics