189 8069 5689

SublimeText新建.vue模板并高亮(图文教程)-创新互联

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

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、虚拟空间、营销软件、网站建设、仪陇网站维护、网站推广。

准备工作

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

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

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

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

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

  1. SublimeTmpl
  2. Vue Syntax Highlight

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

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

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

  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

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

1、创建vue文件模板

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

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

选项 -> 浏览程序包

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

包文件夹

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

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

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

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

vue.tmpl内容

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

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

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

新建 -> New File (SublimeTmpl)

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

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

打开菜单配置项

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

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

新增vue项

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

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

出现vue项

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

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

新建vue文件

3、模板绑定vue语法高亮

打开 Preferences -> Package Settings -> SublimeTmpl -> Settings - Default,如图

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

打开默认设置项

复制一项并修改为vue,路径如下

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

绑定vue语法

绑定语法关联文件路径请查看目录 Sublime Text3\Data\Cache,寻找vue高亮语法插件名,并打开,如图

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

Sublime Text3\Data\Cache目录

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

Sublime Text3\Data\Cache\vue-syntax-highlight

再次菜单新建vue就语法高亮了,如图

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

新建vue文件

4、绑定新建vue文件快捷键

打开 Preferences -> Package Settings -> SublimeTmpl -> Key Bindings - Default,如图

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

打开设置快捷键文件

复制一项,粘贴创建新建vue快捷键为 ctrl+alt+v,如图

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

创建快捷键

保存后,菜单新建里也有了,如图

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

新建文件菜单

试试,完美!

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

完美

最后

Preferences -> Package Settings -> SublimeTmpl -> Settings - Commands 文件好像是配置命令的,配置方法也跟上面相同,照猫画虎即可~

最后的最后

通过这种方法,其他的语言模板也可以自己去创建。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联成都网站设计公司。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


标题名称:SublimeText新建.vue模板并高亮(图文教程)-创新互联
本文网址:http://cdxtjz.cn/article/csecpc.html

其他资讯