[vue3] Vue 애플리케이션 만들기

전제 조건

• 명령줄에 대한 친숙함
• Node.js 버전 16.0 이상 설치

생성된 프로젝트는 Vite를 기반으로 빌드 설정을 사용하며 vue 싱글 파일 컴포넌트(SFC)를 사용할 수 있도록함.

최신 버전의 Node.js가 설치되어 있는지 확인한 후 명렬줄에 다음 명령을 실행함.

> npm init vue@latese

위 명령은 공식 Vue 프로젝트 스캐폴딩 도구인 create-vue를 설치 및 실행 함.
TypeScript 및 테스트 지원과 같은 몇 가지 선택적 기능에 대한 프롬프트가 표시됨.

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

옵션에 대해 확신이 서지 않는다면 일단 엔터키를 눌러 No를 선택.
프로젝트가 생성되면 지침에 따라 종속 요소를 설치하고 개발 서버를 시작.

> cd <your-project-name>
> npm install
> npm run dev

권장 IDE 설정 - Visual Studio Code + Volar extension.

CDN에서 Vue 사용

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

스크립트 태그를 통해 CDN에서 직접 Vue를 사용할 수도 있음.

CDN에서 Vue를 사용하는 경우 '빌드 단계'가 필요하지 않음. 따라서 설정이 훨씬 간단해지며 정적 HTML을 향상시키거나 백엔드 프레임워크와 통합하는 데 적합함.
하지만 싱글 파일 컴포넌트(SFC)구문은 사용할 수 없음.