프로젝트 시작 준비
프로젝트 생성(Vite 빌드 도구를 사용하여 프로젝트 템플릿 생성)
npm init vue@latest
- 프로젝트 생성 후 npm install만 하면 됩니다.
카탈로그 소개
플러그인 설치
- vscode에서 추천하는 플러그인 살펴보기
- 더 나은 유형 감지를 위해 권장 플러그인을 설치하세요.
별칭 만들기
컴파일 지침
프로젝트 구성
아이콘 및 제목 구성
프로젝트 별칭 구성
ts.config.json 구성
vscode 플러그인이 구성되어 있는지 확인하세요
프로젝트 코드 사양 구성
통합 편집기 구성 구성
- 여러 IDE 편집기에서 동일한 프로젝트를 작업하는 여러 개발자의 일관된 코딩 스타일을 유지하는 데 도움이 됩니다.
- Vscode는 플러그인을 설치해야 합니다: VS Code용 EditorConfig
더 예쁜 도구 라이브러리
- 빈 줄도 삭제할 수 있는 강력한 코드 서식 지정 도구입니다.
- 이 프로젝트를 생성하면 설치할 것인지 묻는 메시지가 나타나며, 그렇지 않은 경우 다음 명령어를 통해 직접 설치할 수도 있습니다.
- 1. 설치
npm install prettier
- 2. 구성
- 3. 파일을 무시하도록 .prettlerignore를 구성할 수도 있습니다. (위 설치가 완료되었습니다.)
- 4. prettler가 효과적인지 테스트하고 저장한 후 빈 줄이 삭제되지 않는지 확인합니다.
- 5. package.json에서 스크립트를 구성합니다(이 방법을 사용할 필요는 없습니다. 아래가 더 쉽습니다).
"prettier":"prettier --write", 하지만 작업이 번거롭고 npm이 항상 더 예쁘게 실행될 수는 없습니다.- 6. vscode 플러그인 사용
- 7. 먼저 구성을 확인하세요
- 8. 방법 1, ctrl +p 다음을 눌러 포맷을 한번 해주세요
- 9. 하지만 설정해서 저장하고 싶으면 포맷하면 됩니다.
10. 효과가 적용되므로 저장해서 더 예쁜 스타일에 맞춰 최적화하시면 됩니다.
ESLint 감지 구성
- 불규칙한 코드를 감지하고 팁이나 경고를 제공하는 데 사용됩니다.
- 그들 사이의 갈등을 해결하기 위해
- 이 솔루션이 설치됩니다(프로젝트 생성 시 활성화된 경우 여기에서 구성할 필요가 없습니다).
npm install eslint-pluugin-prettier eslint-config-prettier -D
CSS 스타일 재설정
- 정규화.css
- 재설정.css
npm install normalize.css
단계: main.ts 내부
import 'normalize.css'
1단계, 새 CSS 폴더를 만듭니다.
2단계: index.less를 main.ts로 가져오기
3단계: 직접 사용하세요. less가 인식되지 않으면 less를 가져오세요.
- Less를 찾을 수 없다는 메시지가 나타나면 less를 가져오십시오.
npm install less -D
- CSS가 적용됩니다
