자습서: 초보자를 위한 Vue.js

Vue.js를 처음 사용하는 경우 이 가이드가 몇 가지 기본 사항을 시작할 수 있도록 도와줍니다.

• Vue.js HelloWorld 코드 샌드박스 사용해 보기
• Visual Studio Code에서 Node.js 사용해 보기

전제 조건

• 먼저 Windows 또는 Linux용 Windows 하위 시스템에 Vue.js를 설치해야 합니다.

Visual Studio Code를 사용하여 NodeJS 사용해 보기

VS Code가 없으면 VS Code를 설치합니다. Windows 또는 WSL에서 Vue 사용 여부와 관계 없이 Windows에 VS Code를 설치하는 것이 좋습니다.

1. 명령줄을 열어 새 디렉터리를 만듭니다(mkdir HelloVue). 그런 다음, 디렉터리를 입력합니다(cd HelloVue).

2. Vue CLI를 설치합니다(npm install -g @vue/cli).

3. Vue 앱을 만듭니다(vue create hello-vue-app).

   Vue 2 또는 Vue 3 미리 보기를 사용할지 또는 수동으로 원하는 기능을 선택할지 여부를 선택해야 합니다.

   

4. 새로운 hello-vue 앱의 디렉터리를 엽니다(cd hello-vue-app).

5. 웹 브라우저에서 새로운 Vue 앱을 실행해 봅니다(npm run serve).

   브라우저의 http://localhost:8080에 "Welcome to your Vue.js App"이 표시됩니다. Ctrl+C를 눌러 vue-cli-service 서버를 중지할 수 있습니다.

   참고 항목

   이 자습서에서 WSL(Ubuntu 또는 선호하는 Linux 배포)을 사용할 경우 VS 원격 서버를 사용하여 코드를 실행 및 편집할 수 있는 최고의 환경을 위해 원격 - WSL 확장이 설치되어 있는지 확인해야 합니다.

6. VS Code에서 Vue 앱의 소스 코드를 열어 시작 메시지를 업데이트해 보고 code .를 입력합니다.

7. VS Code가 시작하고 파일 탐색기에 Vue 애플리케이션이 표시됩니다. npm run serve를 사용하여 앱을 터미널에서 다시 실행하고 Vue 페이지 시작 페이지가 표시되도록 웹 브라우저가 localhost에 열리도록 합니다. VS Code에서 App.vue 파일을 찾습니다. "Welcome to your Vue.js App"을 "Welcome to the Jungle!"로 변경해 봅니다. 변경 내용을 저장하는 즉시 Vue 앱 "hot reload"가 표시됩니다.

   

추가 리소스

• Visual Studio Code에서 Vue 사용: Vue 구문 강조 표시, IntelliSense, 디버깅 지원 등을 제공하는 Vetur 확장을 비롯한 VS Code를 사용하여 Vue를 사용하는 방법에 대해 자세히 알아보세요.

• Vue.js 문서

• React 또는 Angular와 같은 다른 프레임워크와 Vue 비교

• Vue.js 개요

• Vue.js를 사용하여 첫 번째 단계 수행 학습 경로