Vuex作為Flux思想的一種實(shí)現(xiàn)，并且與Vue框架緊密結(jié)合，被廣泛應(yīng)用于Vue項(xiàng)目中。而在Vue項(xiàng)目中，對(duì)SFC（single file component）的支持，也是一個(gè)很值得稱贊的特性。SFC讓我們?cè)诰帉慥ue組件時(shí)更加靈活，文件結(jié)構(gòu)清晰。Sublime Text是一個(gè)非常優(yōu)秀的文本編輯器，本文將介紹如何在Sublime Text中實(shí)現(xiàn)Vue文件的語法高亮、自動(dòng)補(bǔ)全等功能。

為了實(shí)現(xiàn)對(duì)Vue文件的識(shí)別，我們需要在Sublime Text中找到相應(yīng)的插件。Vue Syntax Highlight和Vue Syntax Coloring兩個(gè)插件是較為出名的兩個(gè)Vue文件插件，下面我們來一一介紹。

Vue Syntax Highlight

$ cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages
$ git clone https://github.com/vuejs/vue-syntax-highlight.git

安裝完成后，我們需要修改默認(rèn)的文件類型關(guān)聯(lián)。打開任意一個(gè).vue文件，然后按下快捷鍵‘Cmd + Shift + P’，輸入‘Set Syntax: Vue Syntax Highlight’，選擇Vue Syntax Highlight即可。這樣，我們就可以看到Vue文件的語法高亮了。

Vue Syntax Coloring

$ cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages
$ git clone https://github.com/OrestF/vue-syntax-coloring.git

安裝完成后，前往菜單欄中的‘Preferences =>Package Settings =>Vue Syntax Coloring =>Setting - User’，打開文件后，將以下內(nèi)容復(fù)制到其中：

{
"color_scheme": "Packages/Vue Syntax Coloring/VueDark.tmTheme"
}

然后，再按下快捷鍵‘Cmd + Shift + P’，輸入‘Set Syntax: Vue Syntax Coloring’，選擇Vue Syntax Color即可。這樣，我們就可以看到Vue文件的語法顏色了。

Vue Auto Completions

$ cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages
$ git clone https://github.com/BrainBuzzer/vue-auto-completions.git

安裝完成后，我們就可以在Vue組件編寫時(shí)，使用自動(dòng)補(bǔ)全了。

以上就是本文介紹的三款Sublime Text插件，它們分別提供了Vue文件的語法高亮、語法顏色、自動(dòng)補(bǔ)全等功能。在Vue項(xiàng)目中，使用Sublime Text編輯器進(jìn)行開發(fā)，這些插件能夠顯著提升我們的開發(fā)效率，同時(shí)增加開發(fā)樂趣。相比較于其他主流文本編輯器，Sublime Text有著更加豐富的插件庫和非常友好的用戶界面，我們強(qiáng)烈推薦Vue項(xiàng)目開發(fā)者嘗試使用Sublime Text。