Sublime Text.vue 템 플 릿 을 새로 만 들 고 강조 합 니 다(그림 튜 토리 얼)

본문 소개 Sublime Text 는.vue 템 플 릿 을 새로 만 들 고 하 이 라이트(그림 튜 토리 얼)를 공유 하 며 자신 에 게 도 메 모 를 남 깁 니 다.
준비 작업
새 파일 템 플 릿 플러그 인 설치 하기 SublimeTmplvue 문법 하 이 라이트 플러그 인 Vue Syntax 하 이 라이트 설치Sublime Text 에 플러그 인 을 설치 하 는 방법 은 두 가지 가 있 습 니 다.
1.Sublime Text 자체 설치 라 이브 러 리 Package Control 을 사용 하여 설치
메뉴 표시 줄 의 Preferences->Package Control 을 클릭 하거나 단축 키 CTRL+SHIFT+P 를 사용 하여 터미널 창 을 열 고 Install 을 입력 하여 Package Control:Install Package 를 선택 하여 설치 합 니 다.
2.패키지 디 렉 터 리 에 직접 다운로드(환경 설정/패키지 탐색)중국어:(첫 번 째 옵션/패키지 브 라 우 저)폴 더 에

SublimeTmpl

Vue Syntax Highlight

.vue 템 플 릿 을 만 들 고 문법 을 강조 합 니 다.
Vue Syntax Highlight 를 설치 한 후에.vue 형식의 파일 을 열 면 밝 아 집 니 다.단축 키 로.vue 형식의 파일 을 직접 만 드 는 것 을 설정 합 니 다.
SublimeTmpl 은 기본적으로 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

vue 형식의 템 플 릿 을 새로 만 듭 니 다.
1.vue 파일 템 플 릿 만 들 기
플러그 인 패키지 의 폴 더 를 직접 엽 니 다Preferences -> Browse Packages
첫 번 째 옵션->탐색 패키지

패키지 폴 더
템 플 릿 을 저장 할 폴 더 templates 를 열 고 아무 거나 복사 하여 vue.tmpl 로 이름 을 바 꿉 니 다.

vue.tmplvue.tmpl 내용 을 원 하 는 템 플 릿 으로 변경 합 니 다.

vue.tmpl 내용
2.새 메뉴 수정,새 vue 옵션 추가
SublimeTmpl 새 메뉴 는 기본적으로 vue 가 없습니다.그림 과 같 습 니 다.

새로 만 들 기->새 파일(SublimeTmpl)
위의 Menu 옵션 을 클릭 하거나 Preferences->Package Settings->SublimeTmpl->Settings-Menu 를 엽 니 다.그림 참조

메뉴 설정 항목 열기
하 나 를 복사 한 다음 붙 여 넣 기 를 vue 항목 으로 변경 합 니 다.그림 과 같 습 니 다.

vue 항목 추가
수정 사항 을 저장 하면 새 메뉴 에 vue 항목 이 나타 납 니 다.그림 참조

vue 항목 나타 나 기
위의 그림 vue 새 항목 을 누 르 면 이전에 설정 한 템 플 릿 내용 이 나타 납 니 다.문법 이 밝 지 않 고 일반 텍스트 형식 일 뿐 입 니 다.그림 과 같 습 니 다.

새 vue 파일
3.템 플 릿 바 인 딩 vue 문법 하 이 라이트
기본 설정 열기->패키지 설정->SublimeTmpl->설정-기본 값,그림 참조

기본 설정 열기
하 나 를 복사 하고 vue 로 변경 합 니 다.경 로 는 다음 과 같 습 니 다.

바 인 딩 vue 문법
문법 관련 파일 경 로 를 바 인 딩 하려 면 디 렉 터 리 Sublime Text 3\Data\Cache 를 보고 vue 하 이 라이트 문법 플러그 인 이름 을 찾 아 열 어 주 십시오.그림 참조

Sublime Text 3\\Data\Cache 디 렉 터 리

Sublime Text3\Data\Cache\vue-syntax-highlight
다시 메뉴 를 만 들 면 vue 문법 이 밝 아 집 니 다.그림 과 같 습 니 다.

새 vue 파일
4.새 vue 파일 단축 키 바 인 딩
기본 설정 열기->패키지 설정->SublimeTmpl->키 바 인 딩-기본 값,그림 참조

단축 키 설정 파일 열기
복사,붙 여 넣 기 새 vue 단축 키 를 ctrl+alt+v 로 만 듭 니 다.그림 참조

단축 키 만 들 기
저장 후 메뉴 새로 만 들 기 에 도 있 습 니 다.그림 참조

새 파일 메뉴
해 봐,완벽 해!

완전무결 하 다
마지막.
4Preferences -> Package Settings -> SublimeTmpl -> Settings - Commands 파일 은 명령 을 설정 하 는 것 같 습 니 다.설정 방법 도 위 와 같 습 니 다.고양이 가 호 랑 이 를 그리 면 됩 니 다~
마지막 마지막
이런 방법 을 통 해 다른 언어 템 플 릿 도 스스로 만 들 수 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.