Sublime Text新建.vue模板并高亮(圖文教程)
本文介紹了 Sublime Text新建.vue模板并高亮(圖文教程)，分享給大家，也給自己留個筆記。
準(zhǔn)備工作
- 下載安裝新建文件模板插件 SublimeTmpl
- 下載安裝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) 中文:(首選項 / 包瀏覽器) 文件夾里面
創(chuàng)建.vue模板并讓語法高亮
安裝完Vue Syntax Highlight之后，你打開.vue格式的文件就已經(jīng)可以高亮了，我們現(xiàn)在來設(shè)置用快捷鍵直接創(chuàng)建.vue格式的文件。
SublimeTmpl 默認(rèn)只有6種語法模板：
- 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
我們現(xiàn)在新增創(chuàng)建 vue 格式的模板
1、創(chuàng)建vue文件模板
直接打開插件包的文件夾 Preferences -> Browse Packages
首選項 -> 瀏覽程序包
包文件夾
打開存放模板的文件夾 templates，隨便復(fù)制一項，改名為vue.tmpl
創(chuàng)建vue.tmplvue.tmpl內(nèi)容改為你想要的模板
vue.tmpl內(nèi)容
2、修改新建菜單，增加新建vue選項
SublimeTmpl新建菜單默認(rèn)是沒有vue的，如圖
新建 -> New File (SublimeTmpl)
點擊上圖的 Menu 選項，或者打開 Preferences -> Package Settings -> SublimeTmpl -> Settings - Menu，如圖
打開菜單配置項
復(fù)制一項，然后粘貼修改為 vue 項，如圖
新增vue項
保存修改，就會在新建菜單里面出現(xiàn)vue項，如圖
出現(xiàn)vue項
點擊上圖vue新建項，就會出現(xiàn)之前設(shè)置的模板內(nèi)容，只不過沒有語法高亮，并且是純文本格式，如圖
新建vue文件
3、模板綁定vue語法高亮
打開 Preferences -> Package Settings -> SublimeTmpl -> Settings - Default，如圖
打開默認(rèn)設(shè)置項
復(fù)制一項并修改為vue，路徑如下
綁定vue語法
綁定語法關(guān)聯(lián)文件路徑請查看目錄 Sublime Text3\Data\Cache，尋找vue高亮語法插件名，并打開，如圖
Sublime Text3\Data\Cache目錄
Sublime Text3\Data\Cache\vue-syntax-highlight
再次菜單新建vue就語法高亮了，如圖
新建vue文件
4、綁定新建vue文件快捷鍵
打開 Preferences -> Package Settings -> SublimeTmpl -> Key Bindings - Default，如圖
打開設(shè)置快捷鍵文件
復(fù)制一項，粘貼創(chuàng)建新建vue快捷鍵為 ctrl+alt+v，如圖
創(chuàng)建快捷鍵
保存后，菜單新建里也有了，如圖
新建文件菜單
試試，完美！
完美
最后
Preferences -> Package Settings -> SublimeTmpl -> Settings - Commands 文件好像是配置命令的，配置方法也跟上面相同，照貓畫虎即可~
最后的最后
通過這種方法，其他的語言模板也可以自己去創(chuàng)建。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue todo-list組件發(fā)布到npm上的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了Sublime Text新建.vue模板并高亮(圖文教程)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
今天小編就為大家分享一篇對vue中v-if的常見使用方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue計算屬性中reduce方法實現(xiàn)遍歷方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
最近發(fā)現(xiàn)很多要求Vue3的技術(shù)了,不得不說it技術(shù)的更新真的太快了,作為vue2老用戶,我們在學(xué)習(xí)Vue3前應(yīng)該了解他們的區(qū)別以及背后的原因,下面這篇文章主要給大家介紹了關(guān)于vue2和vue3區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02
關(guān)于ElementUI el-table 鼠標(biāo)滾動失靈的問題及解決辦法
這篇文章主要介紹了關(guān)于ElementUI el-table 鼠標(biāo)滾動失靈的問題及解決辦法,本文給大家分享問題所在原因及解決方案,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
vue+elementUI實現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時顯示省略號
這篇文章主要介紹了vue+elementUI實現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時顯示省略號,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3?實現(xiàn)驗證碼倒計時功能(刷新保持狀態(tài))
倒計時的運用場景是需要經(jīng)常用到的，但是根據(jù)業(yè)務(wù)的不同，好比手機驗證碼或者是郵箱驗證碼之類的，即使用戶跳轉(zhuǎn)到其它頁面或者刷新，再次回到登錄也，驗證碼的倒計時也得保持狀態(tài),下面通過本文給大家分享Vue3?驗證碼倒計時功能實現(xiàn)，感興趣的朋友一起看看吧2022-08-08
這篇文章主要介紹了Vue子組件調(diào)用父組件方法案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別
這篇文章主要介紹了vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別,幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10