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 相关文章推荐
根据json字符串生成Html的一种方式
Jan 09 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
JS Attribute属性操作详解
May 19 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
Web应用开发TypeScript使用详解
May 25 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基础学习小结
2011/04/17 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
vue实现文件上传功能
2018/08/13 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
Sanic框架Cookies操作示例
2018/07/17 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
Eclipse面试题
2014/03/22 面试题
办公室主任职责范文
2013/11/08 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
给公司的建议书范文
2014/05/13 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
OpenCV 图像梯度的实现方法
2021/07/25 Python
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
Win11软件图标固定到任务栏
2022/04/19 数码科技