3분 안에 Vue.js 프로젝트를 시작하는 방법

많은 단어를 잃지 않고 바로 시작하겠습니다. Vue CLI로 Vue.js 개발을 빠르게 시작하는 방법을 보여주는 가이드입니다. 따라서 지금 한동안 Vue.js를 사용해보고 싶었고 "많은 노력 없이 시작하는 방법"과 같은 질문에 공감할 수 있다면? — 이 게시물이 Vue.js를 더 쉽게 시작할 수 있기를 바랍니다.

Vue CLI 설정

많은 시간을 절약하려면 Vue Command-Line Interface에서 모든 작업을 수행하도록 하십시오. Vue CLI는 단순히 vue 명령을 제공하기 위해 전역적으로 설치되는 npm 패키지입니다. npm 또는 yarn을 사용하여 설치할 수 있습니다.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

참고: Vue CLI에는 Node.js 버전 8.9 이상이 필요합니다.

성공적인 설치를 확인하려면 다음을 시도하십시오.

vue --version
# 4.0.5

이제 프로젝트를 설정할 준비가 모두 끝났습니다.

새 프로젝트 만들기

새 프로젝트를 시작할 디렉터리로 이동하고 다음 명령을 실행합니다.

vue create my-vue-app

my-vue-app는 프로젝트의 제목입니다. 원하는 제목을 선택하세요.

이제 Vue CLI가 대화형 기능 선택을 시작합니다. 여기에 무엇이 있는지 살펴보겠습니다.



이 시점에서 사전 설정(위 스크린샷의 처음 두 옵션은 이전에 이미 저장한 사전 설정임) 또는 기본 구성 또는 기능 수동 선택을 선택할 수 있습니다. 지금은 화살표 키를 사용하여 기본값으로 이동하고 Enter 키를 누르면 됩니다.

결과는 다음과 유사해야 합니다.



Vue CLI가 정말 바빴던 것 같습니다. 구체적으로 무엇을 했는지 살펴보겠습니다(반드시 해당 순서는 아님).

프로덕션 및 개발을 위한 일부 종속성을 포함하는 기본값package.json을 생성합니다

.

종속 항목 설치(노드 모듈)

프로젝트 파일 및 디렉토리 생성

Git 리포지토리 초기화

몇 가지 기본 명령으로 README.md를 생성하여 프로젝트

를 개발합니다.

프로젝트 파일 구조는 다음과 같습니다.

뜨겁게 제공됩니다

이제 Vue CLI가 생성한 개요를 확인했으므로 개발 서버를 시작하여 결과를 볼 수 있습니다. 다음을 실행합니다.

yarn serve

이것은 프로젝트를 컴파일하고 hot-reload와 함께 localhost:8080에서 제공합니다. 따라서 무언가를 변경할 때마다(예: App.vue 의 4행에서 환영 메시지 조정) 브라우저에서 페이지를 다시 로드할 필요가 없으며 자동으로 업데이트됩니다.



이제 Vue.js를 가지고 놀기 시작하세요. 이 게시물은 짧은 만큼 불완전합니다. Vue.js를 시작하는 데 어려움을 겪는 사람들을 위한 시작점이 될 뿐입니다. 그리고 잊지 마세요 look into the docs, 그들은 굉장합니다 😎

언제든지 더 자세히 알고 싶다면 댓글로 알려주세요!


최초 게시: 2019년 11월 1일Medium