첫째, 프로젝트를 생성
사용하여 npm 설치를 vue-cli 3 하고typescript
npm i -g @vue/cli typescript
사용은 vue create신속하게 새 프로젝트를위한 발판을 구축하는 명령
vue create vue-ts
VUE-TS는 위의 명령을 실행 한 후, 다음과 같은 옵션이 표시, 우리의 프로젝트의 이름입니다
여기 누르면, 단일 선택 上/下键, 옵션 스위치를 눌러 enter다음 단계를. 이 두 옵션 대표 :
default기본 옵션은, 뒤에babel,eslint이 두 가지의 도입을 나타냅니다Manully select features수동으로 선택되어
우리가 사용하기 때문에 Vue+TypeScript, 그래서 선택 Manully select features.
눌러 enter다음 단계를 입력 :
다음 옵션 번호, 항있는 上/下键스위칭 옵션 空格键이 옵션이 선택되면, enter键다음 단계는. 당신은 프로젝트의 실제 상황에 따라 적절한 옵션을 선택할 수 있습니다.
여기 뒤에하는 방법을 배우고 계속하는 VUE-TS 연구 노트를 만들려고 TypeScript사용 vuex 및 router선택하므로, Babel, Typescript, Router, Vuex, CSS Pre-processors, Linter/ Formatter 거기에 이러한 항목.
눌러 enter다음 단계를 입력 :
여기가의 사용 여부를 요청하는 것입니다 class风格쉽게 사용할 수 있도록하기 위해, 문법의 구성 요소 TypeScript우리는 Y.을 선택했다,
우리는 옵션을 선택하면, 당신은, Enter 키를 누릅니다 기본 옵션을 사용할 수 있습니다 모른다.
눌러 enter다음 단계를 입력 :
여기가 무엇을 의미하는지 취소 생략되지 않으며, Enter 키를 눌러 기본 옵션을 사용하여 입력합니다.
눌러 enter다음 단계를 입력 :
여기에 사용할지 여부를 묻는 당신이 선택하는 경우 프로덕션 환경에서, 모델, 서버는 적절한 구성을 대체 인덱싱 할 필요가있다. 이것은 동일한에 따라, 우리의 데모에 영향을주지 않습니다 기본 옵션.routerhistoryenter
눌러 enter다음 단계를 입력 :
여기에 선택은 CSS预处理器자기가 선택 될 수있다.
눌러 enter다음 단계를 입력 :
여기에 도구를 검사하는 선택 코드는 제가 개인적으로 사용하고자한다 ESLint + Prettier. 때문에 Prettier 전용 포맷 할 수 없습니다 js代码, 당신은 또한 포맷 할 수 있습니다 css 와 vue의 템플릿 파일 template 코드 섹션.
눌러 enter다음 단계를 입력 :
여기에, 서식을 코드를 선택하는 선택입니다 Lint on save.
눌러 입력하고 다음 단계를 입력 :
여기에 어떤 구성에서 요구되는 Babel，PostCSS, ESLint 등
In dedicated config files특별한 구성 파일에서In package.json구성에서package.json파일
우리는 선택했다 In dedicated config files ,
눌러 enter다음 단계를 입력
여기가 요청하는 것입니다 : 선택 현재 구성, 당신은 재사용 프로젝트를 촉진하기 위해 설정 한 다음 시간을 절약 할 수 있는지 여부.
우리는에 의해, 건너 뛰기 enter，를 초기화 할 수있는 프로젝트의 완성을 기다리고.
둘째, 구성 .prettierrc
코드 도구 선택 체크 ESLint + Prettier, 시간 ESLint과 Prettier충돌하는 항목이 사용하여 구성을 폐쇄 Prettier구성 항목을. 이 문서는 나열 구성 항목 충돌.ESLintPrettier
개인은에 익숙해 져 있기 때문에 작은 따옴표 문자열의 사용 없이 세미콜론 문장,하지만 문자열 명 Prettier 큰 따옴표로 포맷, 자동으로 문장의 끝을 세미콜론, 따라서 별도로 구성 할 필요가있다. 구성도 매우 간단하다 :
(package.json 같은 디렉토리와 함께) 프로젝트 루트 디렉토리에 .prettierrc.js 파일을 생성하고 다음과 같은 구성이 될 수 추가 :
파일을 수정 .Eslintrc.js, 거기에 코드의 다음 줄을 추가합니다 :
이제 구성이 성공하면 보자. 먼저 열린 SR / main.ts :
그것은 세미콜론으로 볼 수있는 두 번 인용 문자열은 단순히 당신이 자동으로 모든 오류를 수정할 수, 저장 클릭률 + S를 누르면, 문장의 끝을 부여하고있다.
