어떻게 완전한 Vue 3.0+ts 프로젝트 절 차 를 만 듭 니까?

9 월 18 일 에 특히 Vue 3.0 에 대한 발표 에 많은 관심 이 있 을 것 이 라 고 믿 습 니 다.현재 Vue 3.0 도 RC 단계(최종 제품 후보 버 전,문제 가 없 으 면 정식 버 전 으로 발표 할 수 있 습 니 다)에 들 어 섰 습 니 다.그래서 Vue 3.0 의 학습 은 우리 의 필연 적 인 추세 입 니 다.오늘 은 Vue 3.0 의 상세 한 구축 과정 을 공유 하고 Vue 3 에 처음 들 어 온 파트너 에 게 도움 이 되 기 를 바 랍 니 다.
저희 가 이제 오늘 의 콘 셉 트 로 넘 어가 보도 록 하 겠 습 니 다.
설치 하 다
1.nodejs 설치
nodejs 다운로드 주 소 를 제공 합 니 다:https://nodejs.org/zh-cn/download/
여러분 은 자신의 컴퓨터 설정 에 따라 적합 한LTS（ 을 선택 하여 다운로드 하고 설치 하면 됩 니 다.여 기 는 설치 절 차 를 생략 합 니 다.
 2.이전 버 전 마 운 트 해제
만약 당신 이 지금 구 판Vue-cli1.x또는Vue-cli2.x을 사용 하고 있다 면 먼저 마 운 트 해제 해 야 합 니 다.없 으 면 이 절 차 를 무시 하 십시오.
명령 창 을 열 고 다음 명령 으로 마 운 트 해제 하기:

npm uninstall vue-cli -g

3.Vue-cli 3.x 설치
Vue 3.0 프로젝트 를 만 들 려 면Vue-cli 3.0이상 의 버 전에 의존 해 야 합 니 다.명령 창 을 열 고 다음 명령 을 통 해 버 전 번 호 를 설치 하고 확인 해 야 합 니 다.

//       vue-cli
npm install -g @vue/cli  
//      
vue -V    

2.프로젝트 구축 과정
1.새 항목,아래 my-demo 라 는 항목 을 새로 만 듭 니 다.

vue create my-demo

2.enter 이후 항목 알림 에 따라 다음 설정 을 선택 할 수 있 습 니 다.

newts:프로젝트 생 성 이 끝 난 마지막 에 이번 설정 을 유지 할 필요 가 있 는 지 물 어보 고 다음 에 직접 사용 할 수 있 도록 합 니 다.이 new Ts 는 제 가 이전에 저장 한 설정 입 니 다

Default:기본 설정 설정 으로 프로젝트 를 빠르게 구축 하여 babel 과 eslint 지원

을 제공 합 니 다.

Manually selectfeatures:수 동 으로 프로젝트 설정 을 할 수 있 습 니 다.프로젝트 의 수요 에 따라 적당 한 의존 도 를 선택 할 수 있 고 더 많은 선택성 을 가 질 수 있 습 니 다.다음 절 차 는 이 방식 을 사용 하 겠 습 니 다.

3.Vue-cli3.x 는 다음 과 같은 기능 을 제공 합 니 다.항목 에 따라 추 가 된 설정 항목 을 선택 할 수 있 습 니 다.
상하 키 를 통 해 설정 항목 을 전환 하고 선택 할 설정 항목 에 대해 스페이스 바 를 사용 하여 선택/반 선택 합 니 다.

Babel:babel 을 사용 하면 우리 소스 코드 를 쉽게 바 꿀 수 있 습 니 다(es6=>es5)

TypeScript:TypeScript 를 사용 하여 원본 코드 를 작성 합 니 다.ts 를 사용 하면 강력 한 유형의 js 를 작성 할 수 있 습 니 다.개발 에 큰 도움 이 됩 니 다

Progressive Web App(PWA):점진 적 인 웹 애플 리 케 이 션 사용(PWA)

라 우 터:vue-router 사용

Vuex:vuex 상태 관리자 사용

CSS 전처리 기:less,sas 등

CSS 전처리 기 를 사용 합 니 다.

Linter/Formatter:코드 스타일 검사 와 포맷 사용

유닛 테스트:유닛 테스트 사용

E2E Testing:E2E 테스트 를 사용 합 니 다.end to end(끝 에서 끝까지)는 블랙 박스 테스트 의 일종

입 니 다.
4.그리고 선택 한 모든 설정 항목 을 설정 합 니 다.
Use class-style component syntax? (Y/n)
클래스(클래스)스타일 장식 기 를 사용 할 지 여부 입 니 다.export default class Home extends Vue{}을 통 해 Vue 인 스 턴 스 를 만 듭 니 다.
 
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
Babel 을 전의 로 사용 하여 TypeScript 와 함께 자동 검색 에 사용 합 니 다.
 
Use history mode for router?
경로 모드,history 모드 를 선택 할 지 여부,history 모드 를 사용 할 지 여부,프로젝트 build 이후 페이지 공백 이 발생 할 수 있 습 니 다.
 
Pick a CSS pre-processor?
css 프로세서 선택,여기 서 less 선택
 
Pick a linter / formatter config?
코드 포맷 검사 도 구 를 선택 하 십시오.

TSLint:ts 형식 검사 도구
ESLint with error prevention only:ESLint 는 오류 알림 만 수행 합 니 다.
ESLint+Airbnb config:ESLint Airbnb 표준
ESLint+Standard config:ESLint Standard 표준
ESLint+Prettier:ESLint(코드 품질 검사)+Prettier(코드 포맷 도구)
Pick additional lint features?
코드 검사 방식:저장 할 때 검사 하거나 제출 할 때 검사 합 니 다.저장 할 때 검사 하기
 
Pick a unit testing solution?
유닛 테스트 방안 을 선택 하 십시오.현재 Vue 공식 추천 도 jest 입 니 다.설정 이 간단 하고 쉽게 시작 되 므 로 Jest 를 선택 하 는 것 을 권장 합 니 다.
 
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
Babel,PostCSS,ESLin 등 프로필 을 어떻게 저장 합 니까?별도의 프로필 에 넣 습 니까?아니면 package.json 에서?여 기 는 설정 이 뚜렷 하고 보기 좋 습 니 다.저 는 모든 설정 의 단독 파일 을 선택 하 겠 습 니 다.
 
Save this as a preset for future projects?
현재 설정 을 저장 해 야 합 니까?다음 항목 에서 빠르게 구축 할 수 있 습 니까?저장 후 다음 항목 을 만 들 때 이 설정 을 직접 선택 할 수 있 습 니 다.따로 설정 하지 않 아 도 됩 니 다.
 
5.설정 완료 후 설치 에 의존 할 때 까지 기 다 립 니 다.

6.구축 완료 후 프로젝트 디 렉 터 리 구 조 는 다음 과 같다.
 
Vue 2.x 에 비해 Vue 3.0 디 렉 터 리 가 많이 간소화 되 었 습 니 다.그리고 Vue 3.0 은 웹 팩.config.js 설정 이 없 는 것 은 Vue 3.0 이 플러그 인@vue/cli-service 를 통 해 웹 팩 을 추상 적 으로 처리 하고 웹 팩 설정 을 기본 으로 하기 때 문 입 니 다.그러나 프로젝트 개발 에 있어 서 우 리 는 웹 팩 을 조정 해 야 하 는 특별한 수요 가 있 을 것 입 니 다.물론 이것 도 문제 가 없습니다.Vue 3.0 에서 프로젝트 의 루트 디 렉 터 리 에 vue.config.js 를 만들어 웹 팩 을 사용자 정의 설정 할 수 있 습 니 다.
vue.config.js 설정 에 대해 서 는 따로 글 을 써 서 공유 하 겠 습 니 다.
3.시작 항목:

cd my-demo
npm run serve

이로써 Vue 3.0 의 완전한 프로젝트 구축 과정 이 완 료 됩 니 다.그 다음 에 저 는 Vue 3.0 중의 vue.config.js 설정 을 따로 공유 하 겠 습 니 다.글 에 잘못된 부분 이 있 습 니 다.지적 해 주 셔 서 감사합니다. 더 많은 Vue 3.0+ts 프로젝트 절차 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!