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


Posted in Javascript onSeptember 26, 2019

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

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

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

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

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

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

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

3.设置JS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新建的home.vue结果:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 #Javascript
Vue项目环境搭建详细总结
Sep 26 #Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 #Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 #Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 #Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 #Javascript
Vue 刷新当前路由的实现代码
Sep 26 #Javascript
You might like
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
yii数据库的查询方法
2015/12/28 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
python基于opencv实现人脸识别
2021/01/04 Python
pip install命令安装扩展库整理
2021/03/02 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
软件工程师岗位职责
2013/11/16 职场文书
好的演讲稿开场白
2013/12/30 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
五一手机促销方案
2014/03/08 职场文书
班班通校本培训方案
2014/03/12 职场文书
爱我中华教学反思
2014/04/28 职场文书
迎新晚会策划方案
2014/06/13 职场文书
财务部岗位职责范本
2015/04/14 职场文书
保护环境的宣传语
2015/07/13 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
python的html标准库
2022/04/29 Python