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

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

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

本文介绍了 Sublime
Text新建.vue模板并高亮(图文教程),分享给大家,也给自己留个笔记。

  1.安装Vue.js插件

准备工作

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

  1. 下载安装新建文件模板插件 SublimeTmpl
  2. 下载安装vue语法高亮插件 Vue Syntax Highlight

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

Sublime Text安装插件的方法有两种:

  美高梅59599 1

1、使用Sublime Text自带的安装库 Package Control 去安装

 

点击菜单栏的 Preferences -> Package Control 或使用快捷键 CTRL+SHIFT+P
打开终端窗口,输入Install选择Package Control: Install Package来安装

  2.配置Vue模板

2、下载直接放入包目录 (Preferences / Browse Packages) 中文:(首选项 /
包浏览器) 文件夹里面

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

  1. SublimeTmpl
  2. Vue Syntax
    Highlight

  美高梅59599 2

创建.vue模板并让语法高亮

  

安装完Vue Syntax
Highlight之后,你打开.vue格式的文件就已经可以高亮了,我们现在来设置用快捷键直接创建.vue格式的文件。

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

SublimeTmpl 默认只有6种语法模板:

<template>

</template>

<script>

</script>

<style>

</style>
  1. html ctrl+alt+h
  2. javascript ctrl+alt+j
  3. css ctrl+alt+c
  4. php ctrl+alt+p
  5. ruby ctrl+alt+r
  6. python ctrl+alt+shift+p

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

我们现在新增创建 vue 格式的模板

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

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

<style scoped>

</style>

1、创建vue文件模板

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

直接打开插件包的文件夹 Preferences -> Browse Packages

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

美高梅59599 3

首选项 -> 浏览程序包

美高梅59599 4

包文件夹

打开存放模板的文件夹 templates,随便复制一项,改名为vue.tmpl

美高梅59599 5

创建vue.tmplvue.tmpl内容改为你想要的模板

美高梅59599 6

vue.tmpl内容

2、修改新建菜单,增加新建vue选项

SublimeTmpl新建菜单默认是没有vue的,如图

美高梅59599 7

新建 -> New File (SublimeTmpl)

点击上图的 Menu 选项,或者打开 Preferences -> Package Settings ->
SublimeTmpl -> Settings – Menu,如图

美高梅59599 8

打开菜单配置项

复制一项,然后粘贴修改为 vue 项,如图

美高梅59599 9

新增vue项

保存修改,就会在新建菜单里面出现vue项,如图

美高梅59599 10

出现vue项

点击上图vue新建项,就会出现之前设置的模板内容,只不过没有语法高亮,并且是纯文本格式,如图

admin

网站地图xml地图