IntelliJ IDEA编辑器配置vue高亮显示

本文实例为大家分享了IntelliJ IDEA编辑器配置vue高亮显示的具体实现方法，供大家参考，具体内容如下

1.查找IntelliJ IDEA是否已经安装vue.js

注:之前有写过关于使用cmd命令搭建vue项目的全部过程，详情在此

打开IDEA编辑器，快捷键Ctrl+Alt+S打开Settings(设置)------>Plugins------>搜索vue.js（图中已经安装，没有安装的点击Install JetBrains plugins...进行安装即可），安装成功后重启IDEA。

2.IDEA安装好vue.js后，接着Ctrl+Alt+S打开设置------>Editor------>File Types------>HTML，点击右侧+号，添加*.vue，最后点击Apply。

3.设置JS

继续Ctrl+Alt+S(Settings)------>Language & Frameworks------>JavaScript选择ECMAScript 6和Prefer Strict mode。

4.用vue-cli构建和运行项目

打开命令行工具cmd(Window+R)，或者在IDEA中的Terminal里面进入想要构建项目的目录，输入vue init webpack mypro(mypro是自己想要构建的项目名称)，回车后如下图：

5.进入构建之后的项目文件夹：cd mypro，输入npm install ，项目文件夹中会出现node_modules文件夹。

6.最后执行npm run dev(运行项目之前记得把config文件夹中的index.js中的autoOpenBrowser设置为true,这样的话npm run dev浏览器会自动打开项目)。运行结果如下图：

7.在IDEA中新建.vue格式的文件

开发的时候IDEA编辑器中是没有.vue格式文件的，所以需要在编辑器中设置。

接着Ctrl+Alt+S(Settings)------>Editor------>File and Code Templates

设置完成后就可以直接在项目中新建.vue格式文件了~~~

新建的home.vue结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

    本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾 能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持 这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt

  • Sublime Text新建.vue模板并高亮(图文教程)

    Sublime Text新建.vue模板并高亮(图文教程)

    本文介绍了 Sublime Text新建.vue模板并高亮(图文教程),分享给大家,也给自己留个笔记. 准备工作 下载安装新建文件模板插件 SublimeTmpl 下载安装vue语法高亮插件 Vue Syntax Highlight Sublime Text安装插件的方法有两种: 1.使用Sublime Text自带的安装库 Package Control 去安装 点击菜单栏的 Preferences -> Package Control 或使用快捷键 CTRL+SHIFT+P 打开终端窗口,输

  • vue实现a标签点击高亮方法

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--<link hre

  • Vue 菜单栏点击切换单个class(高亮)的方法

    步骤: 遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index) 添加点击事件toggle(),传入下标参数:@click="fn1();fn2()" 动态切换classname::class="{'active':index ==checkindex }"> (class赋予对应下标值的DOM) ps:该方法直接切换class,不需要手动添加清除其他非动态DOM的class html <ul> <li v-for=&qu

  • 基于Vue实现关键词实时搜索高亮显示关键词

    最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github上,可以clone下来直接看代码 https://github.com/IT0315/real-time-search.git 下面是demo运行的效果图 好了闲话不多说直接上代码 实时搜索 实时搜索通过触发input事件和定时器来实现 <input v-model="keyWords&quo

  • vuejs 切换导航条高亮(路由菜单高亮)的方法示例

    vuejs 切换导航条高亮(路由菜单高亮)的方法示例

    我的GitHub前端经验总结,喜欢的话请点star:Thanks.: https://github.com/liangfengbo/frontend-develop vuejs导航条高亮我的做法: 用一个数组存导航条,用v-for循环它,这样可以减少代码,二可以使用它的下标来判断高亮,三还可以获取后端的导航信息来遍历 重点是在:routerLink(index, path)函数,传入当前点击的下标,自定义一个下标,判断是否相等就用三元符号判断多给一个高亮样式 如何解决刷新就不高亮或第一个高亮了,

  • Vue-路由导航菜单栏的高亮设置方法

    如下所示: 默认情况下,路由的导航菜单,会自动给当前菜单添加router-link-exact-active 和router-link-active 类. 我们可以通过 linkActiveClass 来修改 router-link-active 这个类名, 在路由规则配置中添加配置项linkActiveClass: 'mui-active',通过'mui-active'来自定义控制菜单栏切换样式 以上这篇Vue-路由导航菜单栏的高亮设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,

  • vue结合Echarts实现点击高亮效果的示例

    本文主要介绍如何在vue中使用Echarts实现点击高亮效果. 1.首先看一下官方网站上的介绍: http://echarts.baidu.com/api.html#action.graph.focusNodeAdjacency 2.在初始化的时候绑定这两个事件.需要绑定的事件是鼠标的点击事件和右键点击事件. mounted: function () { let that = this; let myChart = this.$echarts.init(document.getElementBy

  • vue实现点击当前标签高亮效果【推荐】

    vue实现点击当前标签高亮效果【推荐】

    实现点击按钮使当前按钮高亮,其他按钮复原的效果 实现思路 •在data中定义即将渲染的数据,及active data() { return { wpList: [ { name: '食品饮料' }, { name: '鲜花' }, { name: '蛋糕' }, { name: '水果生鲜' }, { name: '服装鞋帽' }, { name: '其它' } ], active:'' } } ... •定义高亮的标签类名 .active { background: #fd7522; bord

  • 详解让sublime text3支持Vue语法高亮显示的示例

    详解让sublime text3支持Vue语法高亮显示的示例

    让sublime text3支持Vue语法高亮显示 1.准备语法高亮插件vue-syntax-highlight. 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vue-syntax-highlight-master,其内所有文件备用. 2.将vue-syntax-highlight植入sbulime. 进入sublime,选择菜单项"Preferences->Browse Packages...&quo

随机推荐