Sublime Text新建.vue模板并高亮(圖文教程)
本文介紹了 Sublime Text新建.vue模板并高亮(圖文教程)，分享給大家，也給自己留個(gè)筆記。
準(zhǔn)備工作
- 下載安裝新建文件模板插件 SublimeTmpl
- 下載安裝vue語(yǔ)法高亮插件 Vue Syntax Highlight
Sublime Text安裝插件的方法有兩種：
1、使用Sublime Text自帶的安裝庫(kù) Package Control 去安裝
點(diǎn)擊菜單欄的 Preferences -> Package Control 或使用快捷鍵 CTRL+SHIFT+P 打開(kāi)終端窗口，輸入Install選擇Package Control: Install Package來(lái)安裝
2、下載直接放入包目錄 (Preferences / Browse Packages) 中文:(首選項(xiàng) / 包瀏覽器) 文件夾里面
創(chuàng)建.vue模板并讓語(yǔ)法高亮
安裝完Vue Syntax Highlight之后，你打開(kāi).vue格式的文件就已經(jīng)可以高亮了，我們現(xiàn)在來(lái)設(shè)置用快捷鍵直接創(chuàng)建.vue格式的文件。
SublimeTmpl 默認(rèn)只有6種語(yǔ)法模板：
- 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文件模板
直接打開(kāi)插件包的文件夾 Preferences -> Browse Packages
首選項(xiàng) -> 瀏覽程序包
包文件夾
打開(kāi)存放模板的文件夾 templates，隨便復(fù)制一項(xiàng)，改名為vue.tmpl
創(chuàng)建vue.tmplvue.tmpl內(nèi)容改為你想要的模板
vue.tmpl內(nèi)容
2、修改新建菜單，增加新建vue選項(xiàng)
SublimeTmpl新建菜單默認(rèn)是沒(méi)有vue的，如圖
新建 -> New File (SublimeTmpl)
點(diǎn)擊上圖的 Menu 選項(xiàng)，或者打開(kāi) Preferences -> Package Settings -> SublimeTmpl -> Settings - Menu，如圖
打開(kāi)菜單配置項(xiàng)
復(fù)制一項(xiàng)，然后粘貼修改為 vue 項(xiàng)，如圖
新增vue項(xiàng)
保存修改，就會(huì)在新建菜單里面出現(xiàn)vue項(xiàng)，如圖
出現(xiàn)vue項(xiàng)
點(diǎn)擊上圖vue新建項(xiàng)，就會(huì)出現(xiàn)之前設(shè)置的模板內(nèi)容，只不過(guò)沒(méi)有語(yǔ)法高亮，并且是純文本格式，如圖
新建vue文件
3、模板綁定vue語(yǔ)法高亮
打開(kāi) Preferences -> Package Settings -> SublimeTmpl -> Settings - Default，如圖
打開(kāi)默認(rèn)設(shè)置項(xiàng)
復(fù)制一項(xiàng)并修改為vue，路徑如下
綁定vue語(yǔ)法
綁定語(yǔ)法關(guān)聯(lián)文件路徑請(qǐng)查看目錄 Sublime Text3\Data\Cache，尋找vue高亮語(yǔ)法插件名，并打開(kāi)，如圖
Sublime Text3\Data\Cache目錄
Sublime Text3\Data\Cache\vue-syntax-highlight
再次菜單新建vue就語(yǔ)法高亮了，如圖
新建vue文件
4、綁定新建vue文件快捷鍵
打開(kāi) Preferences -> Package Settings -> SublimeTmpl -> Key Bindings - Default，如圖
打開(kāi)設(shè)置快捷鍵文件
復(fù)制一項(xiàng)，粘貼創(chuàng)建新建vue快捷鍵為 ctrl+alt+v，如圖
創(chuàng)建快捷鍵
保存后，菜單新建里也有了，如圖
新建文件菜單
試試，完美！
完美
最后
Preferences -> Package Settings -> SublimeTmpl -> Settings - Commands 文件好像是配置命令的，配置方法也跟上面相同，照貓畫虎即可~
最后的最后
通過(guò)這種方法，其他的語(yǔ)言模板也可以自己去創(chuàng)建。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue2實(shí)現(xiàn)封裝動(dòng)態(tài)表單組件
這篇文章主要介紹了vue2實(shí)現(xiàn)封裝動(dòng)態(tài)表單組件，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
Vue中實(shí)現(xiàn)v-for循環(huán)遍歷圖片的方法
這篇文章主要介紹了Vue中實(shí)現(xiàn)v-for循環(huán)遍歷圖片的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vant是有贊前端團(tuán)隊(duì)開(kāi)源的移動(dòng)端組件庫(kù),于2017年開(kāi)源,已持續(xù)維護(hù)4年時(shí)間,下面這篇文章主要給大家介紹了關(guān)于Vue3中使用vant的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
我們有時(shí)候會(huì)碰到這種情況，需要連續(xù)發(fā)送兩個(gè)請(qǐng)求，第二個(gè)請(qǐng)求需要用第一個(gè)請(qǐng)求的某個(gè)返回值作為參數(shù)來(lái)作為第二個(gè)請(qǐng)求的請(qǐng)求參數(shù)，這篇文章主要介紹了vue請(qǐng)求如何按順序執(zhí)行,需要的朋友可以參考下2023-12-12
關(guān)于vuex的數(shù)據(jù)持久化處理方式
這篇文章主要介紹了關(guān)于vuex的數(shù)據(jù)持久化處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解VUE中的插值( Interpolation)語(yǔ)法
這篇文章主要介紹了詳解VUE中的插值( Interpolation)語(yǔ)法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件步驟解析
今天給大家介紹一款基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件，這個(gè)時(shí)鐘倒計(jì)時(shí)組件采用canvas動(dòng)畫的炫酷動(dòng)畫效果形式，根據(jù)剩余時(shí)間的多少變換顏色和旋轉(zhuǎn)扇形的速度，適合搶購(gòu)、拍賣、下注等業(yè)務(wù)場(chǎng)景，且對(duì)移動(dòng)端友好,需要的朋友可以參考下2018-11-11
這篇文章主要給大家介紹了關(guān)于Vue3中引入scss文件的方法步驟,在實(shí)際項(xiàng)目中,各種樣式往往有很多重復(fù)的情況,為了能夠使樣式的后續(xù)開(kāi)發(fā)和維護(hù)更加愜意,將這些共同的代碼進(jìn)行命名然后調(diào)用這些變量是一個(gè)很好的選擇,需要的朋友可以參考下2023-08-08
Vue實(shí)現(xiàn)批量注冊(cè)全局組件的示例代碼
在項(xiàng)目開(kāi)發(fā)中,我們經(jīng)常會(huì)封裝一些全局組件,然后在入口文件中統(tǒng)一導(dǎo)入,所以本文主要為大家詳細(xì)介紹了Vue如何批量注冊(cè)全局組件,感興趣的小伙伴可以了解下2024-01-01
這篇文章主要介紹了Vue分析同步和異步有什么區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-05-05