WebStorm配置Vue开发环境

框架

浏览数:66

2019-9-17

AD:资源代下载服务

  虽然最新版的前端开发利器WebStorm支持了Vue,但是大部分人的WebStorm依然是默认不支持Vue的老版本(比如之前的我),所以需要手动添加WebStorm对Vue的支持。要想让WebStorm支持Vue主要分两步,第一步是安装Vue.js插件,使得WebStorm能够对Vue语法进行提示;第二步是配置Vue模板,即快速创建Vue文件。

  1.安装Vue.js插件

  点击Preferences进入WebStorm的配置页面,然后点击Plugins设置插件。

  点击Browse Repositories按钮(第二个)浏览插件仓库,搜索Vue.js插件进行安装,安装完成后如下图所示。

  

  2.配置Vue模板

  点击Preferences进入WebStorm的配置页面,按下图层级进入File and Code Templates,即文件模板配置。

  

  

  然后点击添加模板的按钮(绿色加号按钮),输入模板名Vue,Extension(即拓展名)设为vue(意为创建出来的文件是 *.vue),输入Vue标准模板,即:

<template>

</template>

<script>

</script>

<style>

</style>

  当然,按照最新WebStorm对Vue模板的设置,可以写为:

<template>
#[[$END$]]#
</template>

<script>
export default {
name: "${KEBAB_CASE_NAME}"
}
</script>

<style scoped>

</style>

  点击Apply或OK即可保存模板,下一次创建Vue文件时,不需要新建file,而可以直接新建Vue文件。

  经过以上两步,接下来的开发可以直接使用WebStorm开发Vue。

作者:格子熊