在 WebStorm/PhpStorm 中开启对 Vue.js 的完美支持

最新推荐文章于 2024-07-09 21:40:12 发布
最新推荐文章于 2024-07-09 21:40:12 发布
阅读量1.5w 收藏 5
点赞数
分类专栏： Vue 文章标签： Vue scss phpstorm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gh254172840/article/details/79114966
版权
本文介绍了如何在WebStorm/PhpStorm中开启对Vue.js的完美支持，包括安装Vue.js插件，设置*.vue文件的代码高亮，改善HTML属性高亮，切换到ES6规范，开启SCSS支持，以及兼容Airbnb语法规范和引入Vue.js库的步骤。
摘要由CSDN通过智能技术生成

最近的一个前后端分离项目开始使用 Vue.js 进行开发，就顺便优化了一下 PhpStorm 下的开发体验（PhpStorm 版本为 2017.1）。

注：在最新的 2017.1 版本中，PhpStorm（WebStorm）已经对 Vue.js 进行了原生支持，所以不需要装第三方插件了。

安装 Vue.js 插件

PhpStorm 目前的版本还没有对 Vue.js 进行原生支持，所以需要先安装 Vue.js 插件（安装方式：「Preferences」 =>「Plugins」 => 「Browse repositories…」 => 搜索「Vue.js」）。

设置 *.vue 文件中的代码高亮

安装 Vue.js 插件后只是对 *.vue 文件有了基本的支持，但是其对需要编译的语法支持有限。

改善 HTML 属性高亮

最低0.47元/天 解锁文章
SteinKuo
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PhpStorm配置Vue
qq_36575358的博客
02-15 582
配置phpstorm下Vue配置
让在webStorm/phpstorm 支持vue文件
m0_37972548的博客
03-28 3207
1.File -> settings -> Plugins 搜索 vue.js ,点击右边的install（因为我已经下载了，所以为uninstall）,安装后，软件重启。2.File -> settings ->Editor -> File and Code Templates点击 + ，Name输入：Vue File ，Extension 输入：vue贴入模板代码...
VUE 学习一 PHPSTORM 搭建VUE项目
清流弯弯
08-15 5981
主要参考了这篇文章 https://blog.csdn.net/weixin_40760196/article/details/79952652 https://blog.csdn.net/qq_35393869/article/details/83789761 需要注意的是， 1、 node.js要安装最新版，一开始安装的版本很低，导致后面失败，所以要安装最新版的node.j...
WebStorm如何运行vue项目（新手教程）
最新发布
2301_80224944的博客
07-09 540
webstorm中如何运行vue项目
让phpstorm 支持 vue文件并且语法高亮
09-02 415
1 安装 vue.js 插件 很遗憾，我的win版本没有支持的插件 2 修改文件类型 vue本质上还是html文件，包含了css html js,用html类型文件打开就可以 给html 文件添加 *.vue即可。 ...
PHPstorm如何安装vue.js插件
weixin_34343000的博客
04-18 285
1.什么是PHPstorm？ 　　PhpStorm是一个轻量级且便捷的PHP IDE，其旨在提高用户效率，可深刻理解用户的编码，提供智能代码补全，快速导航以及即时错误检查。----来自百度百科 　　一句话：PHP代码的一个集成开发环境，提高程序开发环境的应用程序(Integrated Development Environment) 2.进入主题： 　　（1） 　　　　　　　　. ...
phpStorm2018.2.2.zip
05-08
2. **Vue.js、React 和 Angular 支持**：对于流行的前端框架，PHPStorm 提供了专门的工具，包括模板感知、组件导航、热模块替换等。 3. **WebStorm 功能集成**：作为 JetBrains 的 Web 开发 IDE，PHPStorm 吸收了 ...
PhpStorm.rar
12-20
7. **WebStorm特性**：由于PHPStorm是基于WebStorm开发的，因此它也继承了Web开发的一些特性，如对前端框架如Angular、React、Vue.js等的支持。 8. **性能优化**：PHPStorm拥有高效的代码索引和分析能力，即使面对...
PhpStorm_2019.1_r1
05-04
6. **WebStorm功能继承**：作为Web开发的全能工具，PhpStorm还包含了WebStorm的部分特性，如HTML、CSS、JavaScript的高级编辑和调试，支持Vue.js、React等前端框架。 总的来说，PhpStorm 2019.1 r1通过提供完善的...
phpStorm
03-14
10. **WebStorm功能**：作为Web开发的全能选手，phpStorm继承了WebStorm的前端开发特性，如对Vue.js、React、Angular等框架的完美支持。 **安装与配置** 下载并安装phpStorm非常简单，可以从官方网站获取最新版本...
phpstorm
02-09
作为WebStorm家族的一员，PHPStorm也包含了对前端开发的强大支持，包括HTML、CSS、JavaScript、TypeScript、Vue.js、React.js、Angular等。你可以在一个统一的环境中完成前后端的开发工作。 **自定义与扩展** ...
php element 插件_为phpstorm安装vue插件
weixin_39807954的博客
03-09 416
我是一个前端，工作中接触到phpstorm,用得顺手了，后来用vue写项目，同事推荐了vscode，觉得还不错，就换成了它，连接gitlab,提交更新代码还是蛮方便的，皮肤也多。缺点是撤销修改有次数限制，且如果编辑器关闭，只会保留当前最后一次保存的内容，最后一次保存前的那些保存与撤销，统统丢弃。坑过好几次，所以又决定启用phpstorm， 只要是编写过得代码，基本都有保存，哪怕后来又删掉。用php...
webstorm 识别vue项目中的@路径别名正确解析的配置方法
风里有诗句哈的博客
06-24 6926
根目录下新建webstorm.config.js，写入 'use strict' const path = require('path') function resolve (dir) { return path.join(__dirname, '.', dir) } module.exports = { context: path.resolve(__dirname, './'...
PhpStorm vue文件没有样式高亮
weixin_42136237的博客
04-25 129
PhpStorm Laravel Apiato VUE 设置+优化+插件+经验
dwt11的世界
09-01 388
插件: 安装位置:file->setting->Plugins 1 Laravel 2 Key Promoter X用于快捷键提示 3 Translation翻译 4 CodeGlance编辑框右侧代码地图 5 Rainbow Brackets实现配对括号相同颜色，并且实现选中区域代码高亮的功能。对增强写代码的有趣性和排错等都有一些帮助。 6 Laravelph...
phpstrom部署项目到服务器,phpstorm上传vue-cli项目到网站服务器
weixin_39760619的博客
08-06 465
phpstorm开发vue-cli并上传服务器怎么开发vue-cli项目这里不多做叙述，这里只交代完成cli项目之后怎么上传到网站服务器。1.在你使用phpstorm完成cli项目之后，打开终端，输入npm run build2.等待一段时间，它会自动帮你打包生成一个叫dist的文件夹。dist已经帮你把所有项目文件都打包好了，你要做的就是把dist上传到网站服务器就行。3.登录宝塔，添加站点，上...
vue 和 phpstorm
Dafei4的博客
12-23 580
01) phpstorm 配置npm启动vue 02) 侧边栏显示npm view--> Tool windwos -->npm 如果这里没有,那么使用下面方法, 在项目的 package.json 文件上右键,选择 show npm script ,现在在view--> Tool windwos -->npm 可以看到了 官方地址:NPM工具窗口 0...
php环境可以使用vue吗,vue项目能直接引入vue.js吗
weixin_36194102的博客
03-10 864
vue项目能直接引入vue.js，引入方法：1、是使用脚手架工具【vue-cli】；2、二是直接在项目引入【vue.js】，代码为【var vm = new Vue({el: '#accountManage',data: {},})】。【相关文章推荐：vue.js】vue项目能直接引入vue.js，引入方法：最近一个项目里用layUI做的，到我手上的时候想用vue，又不想重新搬页面，所有就引用的v...
vue.config.js，main.js,index.html,webstorm.config.js执行顺序
06-20
`vue.config.js`、`main.js`、`index.html`和`webstorm.config.js`这四个文件在Vue.js项目中的执行顺序并不像传统浏览器环境中那样线性，因为它们的功能和加载时机不同： 1. **webstorm.config.js**：这是一个WebStorm（或IntelliJ IDEA）的配置文件，用于设置开发工具的行为，比如代码提示、自动完成等，通常在IDE启动时加载，并不会影响到运行时的文件顺序。 2. **index.html**：这是项目的入口文件，HTML页面的主体。当用户首次访问网站时，浏览器会从这里开始加载内容。 3. **vue.config.js**：这个文件是在构建时使用的，它包含了Vue CLI项目的配置信息，如打包设置、路径映射等。在运行时，这个文件并不会被浏览器加载或执行。 4. **main.js**：这是Vue.js应用程序的核心入口文件，通常在这里创建应用实例并注册组件。当应用启动时，`main.js`会被Webpack或类似构建工具处理并打包到最终的JavaScript文件中，然后在浏览器中执行。 总结一下，执行顺序为： - WebStorm在启动时加载webstorm.config.js - 用户打开浏览器，浏览器加载index.html - 在构建阶段，`vue.config.js`被读取并用于配置构建过程 - 编译完成后，`main.js`作为应用入口点，在浏览器环境执行
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值