本文介绍了 Sublime Text新建.vue模板并高亮(图文教程)，分享给大家，也给自己留个笔记。 [b]准备工作[/b] [list=1] [*]下载安装新建文件模板插件 SublimeTmpl[/*] [*]下载安装vue语法高亮插件 Vue Syntax Highlight[/*] [/list] [b]Sublime Text安装插件的方法有两种：[/b] 1、使用Sublime Text自带的安装库 Package Control 去安装 点击菜单栏的 Preferences -> Package Control 或使用快捷键 CTRL+SHIFT+P 打开终端窗口，输入Install选择Package Control: Install Package来安装 2、下载直接放入包目录 (Preferences / Browse Packages) 中文:(首选项 / 包浏览器) 文件夹里面 [list=1] [*][url=https://github.com/kairyou/SublimeTmpl]SublimeTmpl[/url][/*] [*][url=https://github.com/vuejs/vue-syntax-highlight]Vue Syntax Highlight[/url][/*] [/list] [b]创建.vue模板并让语法高亮[/b] 安装完Vue Syntax Highlight之后，你打开.vue格式的文件就已经可以高亮了，我们现在来设置用快捷键直接创建.vue格式的文件。 [b]SublimeTmpl 默认只有6种语法模板：[/b] [list=1] [*]html ctrl+alt+h[/*] [*]javascript ctrl+alt+j[/*] [*]css ctrl+alt+c[/*] [*]php ctrl+alt+p[/*] [*]ruby ctrl+alt+r[/*] [*]python ctrl+alt+shift+p[/*] [/list] [b]我们现在新增创建 vue 格式的模板[/b] [b]1、创建vue文件模板[/b] 直接打开插件包的文件夹 [code]Preferences -> Browse Packages[/code] [img]http://files.jb51.net/file_images/article/201710/2017102610583014.png[/img] 首选项 -> 浏览程序包 [img]http://files.jb51.net/file_images/article/201710/2017102610583015.png[/img] 包文件夹 打开存放模板的文件夹 templates，随便复制一项，改名为vue.tmpl [img]http://files.jb51.net/file_images/article/201710/2017102610583016.jpg[/img] 创建vue.tmplvue.tmpl内容改为你想要的模板 [img]http://files.jb51.net/file_images/article/201710/2017102610583017.png[/img] vue.tmpl内容 [b]2、修改新建菜单，增加新建vue选项[/b] SublimeTmpl新建菜单默认是没有vue的，如图 [img]http://files.jb51.net/file_images/article/201710/2017102610583018.png[/img] 新建 -> New File (SublimeTmpl) 点击上图的 Menu 选项，或者打开 Preferences -> Package Settings -> SublimeTmpl -> Settings - Menu，如图 [img]http://files.jb51.net/file_images/article/201710/2017102610583019.png[/img] 打开菜单配置项 复制一项，然后粘贴修改为 vue 项，如图 [img]http://files.jb51.net/file_images/article/201710/2017102610583020.png[/img] 新增vue项 保存修改，就会在新建菜单里面出现vue项，如图 [img]http://files.jb51.net/file_images/article/201710/2017102610583021.png[/img] 出现vue项 点击上图vue新建项，就会出现之前设置的模板内容，只不过没有语法高亮，并且是纯文本格式，如图 [img]http://files.jb51.net/file_images/article/201710/2017102610583022.gif[/img] 新建vue文件 [b]3、模板绑定vue语法高亮[/b] 打开 Preferences -> Package Settings -> SublimeTmpl -> Settings - Default，如图 [img]http://files.jb51.net/file_images/article/201710/2017102610583023.png[/img] 打开默认设置项 复制一项并修改为vue，路径如下 [img]http://files.jb51.net/file_images/article/201710/2017102610583024.png[/img] 绑定vue语法 绑定语法关联文件路径请查看目录 Sublime Text3\Data\Cache，寻找vue高亮语法插件名，并打开，如图 [img]http://files.jb51.net/file_images/article/201710/2017102610583025.png[/img] Sublime Text3\Data\Cache目录 [img]http://files.jb51.net/file_images/article/201710/2017102610583026.png[/img] Sublime Text3\Data\Cache\vue-syntax-highlight 再次菜单新建vue就语法高亮了，如图 [img]http://files.jb51.net/file_images/article/201710/2017102610583027.gif[/img] 新建vue文件 [b]4、绑定新建vue文件快捷键[/b] 打开 Preferences -> Package Settings -> SublimeTmpl -> Key Bindings - Default，如图 [img]http://files.jb51.net/file_images/article/201710/2017102610583028.png[/img] 打开设置快捷键文件 复制一项，粘贴创建新建vue快捷键为 ctrl+alt+v，如图 [img]http://files.jb51.net/file_images/article/201710/2017102610583029.png[/img] 创建快捷键 保存后，菜单新建里也有了，如图 [img]http://files.jb51.net/file_images/article/201710/2017102610583030.png[/img] 新建文件菜单 试试，完美！ [img]http://files.jb51.net/file_images/article/201710/2017102610583031.gif[/img] 完美 [b]最后[/b] [code]Preferences -> Package Settings -> SublimeTmpl -> Settings - Commands [/code]文件好像是配置命令的，配置方法也跟上面相同，照猫画虎即可~ [b]最后的最后[/b] 通过这种方法，其他的语言模板也可以自己去创建。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。