適於Vue的編輯器的相關操作（外掛程式安裝）_Vue

這篇文章基於將Vue的腳手架（環境配置）已經搭建完畢，之後進行的操作

看完之後對sublime text3的安裝、外掛程式管理的下載安裝、對安裝外掛程式和vue字型高亮有了一個瞭解。

找了很久，針對於Vue的編輯器 ，總的來說發現sublime Text3很不錯，

一、下載sublime Text3的安裝包

解壓安裝好之後開啟

什麼都沒有

將需要編寫的項目直接拖拽進sublime text3即可，就會出現目錄，很方便

但是，此時只是一個純的文本編譯器，可以安裝一些外掛程式來完善一下

二、安裝package control

在安裝外掛程式之前，先安裝   管理線上安裝外掛程式的Package Control的工具

開啟之後將以下代碼輸入 ----》  斷行符號

sublime text3

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

sublime text2

import urllib2 , os , hashlib ; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88' ; pf = 'Package Control.sublime-package' ; ipp = sublime . installed_packages_path (); os . makedirs ( ipp ) if not os . path . exists ( ipp ) else None ; urllib2 . install_opener ( urllib2 . build_opener ( urllib2 . ProxyHandler ()) ); by = urllib2 . urlopen ( 'http://packagecontrol.io/' + pf . replace ( ' ' , '%20' )). read (); dh = hashlib . sha256 ( by ). hexdigest (); open ( os . path . join ( ipp , pf ), 'wb' ). write ( by ) if dh == h else None ; print ( 'Error validating download (got %s instead of %s), please try manual install' % ( dh , h ) if dh != h else 'Please restart Sublime Text to finish installation' )輸完之後斷行符號

重啟sublime text3

三、安裝外掛程式

使用 Ctrl + Shift + P 調出面板，然後輸入 pci ，選中“Package Control: Install Package”並斷行符號，然後通過輸入外掛程式的名字找到外掛程式並斷行符號

------------------------常用的外掛程式--------------------------------------

1、SublimeLinter = 錯誤文法
2、JsMinifier =自動壓縮js檔案
3、Sublime CodeIntel =代碼自動提示
4、Bracket Highlighter =代碼匹配
5、CSScomb CSS =屬性排序
6、SublimeTmpl =快速組建檔案模板
7、SideBarEnhancements =設定sublime text2/3支援瀏覽器預覽
8、ColorPicker =調色盤
9、Tag = Html格式化
10、Clipboard History = 剪貼簿記錄
11、SideBarEnhancements = 側欄右鍵功能增強
12、GBK to UTF8 =GBK轉黃成UTF8
13、SFTP =ftp外掛程式
14、WordPress = WordPress函數
15、PHPTidy =排版PHP代碼
15、YUI Compressor =壓縮JS和CSS檔案
16、Alignment =代碼對齊
17、Emmet =大名鼎鼎呀
18、Prefixr =css自動添加 -webkit 等私人詞綴

---------------------------------------------------------------------------

針對vue的一個字型的高亮

地址：

https://github.com/vuejs/vue-syntax-highlight

下載檔案：

解壓並將其中的檔案ctrl+c複製

sublime text3 重啟

ctrl+shift+p------------->輸入vue-------------->選擇Set  Syntax

重啟 開啟vue的檔案

完成

**************************************************************************

模板的配置

1.安裝外掛程式 下載安裝建立檔案模板外掛程式 SublimeTmpl 下載安裝vue文法高亮外掛程式 Vue Syntax Highlight

2.配置模板

Preferences -> Browse Packages -> templates

隨便複製一項，改名為vue.tmpl,內容改成想要的。

3.增加vue選項

File -> New File(sublime tmpl) -> menu - Default

隨便複製一項，改名為vue的。此時建立中會出現vue，只是是沒有高亮的。

4.增加高亮

Preferences -> Package Settings -> SublimeTmpl -> Settings Default

隨便複製一項，改名為vue的。把sublime-text關掉重開 建立就有高亮了。

5.增加快速鍵

Preferences -> Package Settings -> SublimeTmpl -> Key Bindings - Default

複製一項，粘貼建立建立vue快速鍵為 ctrl+alt+v。

配好了。