반응형

이번 블로그 포스팅은 Vue-cli를 이용하여 Vue 프로젝트를 생성해 보도록 하겠습니다. vue-cli 는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있습니다.

 

Vue-cli를 이용한 프로젝트 생성

 

1. 프로젝트 폴더생성

이제 Vue프로젝트를 생성해 보도록 하겠습니다. 

우선 프로젝트를 생성할 폴더를 하나 만듭니다. 저는 바탕화면에 VueProject라는 폴더를 만들었습니다.

 

2. Visual Studio Code를 실행

Visual Studio Code를 실행시킵니다. 기존 프로젝트가 나오시는 분들은 파일 -> 새창을 클릭하시면 새창을 열 수 있습니다.

 

3. Visual Studio Code에 폴더 추가

바탕화면에 만튼 새폴더를 Visual Studio Code에 끌어다 놓습니다. 아래와 같이 폴더가 추가 되면 터미널을 엽니다.

 

4. [터미널을 통한 Veu-cli설치]

터미널을 통해 Vue-cli를 설치합니다. Vue-cli설치시 npm이 설치되어있어야 합니다.

 

5. [Vue --version 설치확인]

설치가 끝나면 vue --version 명령어로 설치를 확인하실 수 있습니다.

 

6. [Vue-cli를 이용한 프로젝트 생성]

vue-cli로 프로젝트를 생성해 보도록 하겠습니다. 프로젝트의 명령어는 아래와 같습니다.

vue create 프로젝트명

저는 아래와 같이 test-vue라는 이름으로 프로젝트를 생성하도록 하겠습니다.

프로젝트 생성을 하면 아래와 같은 화면이 나옵니다. 기본적으로 Vue 2, Vue 3의 default (babel, eslint) 가 주어지고 Manually 라는 여러 필요 라이브러리를 선택할 수 있는 세 가지의 선택지가 주어집니다. 기본 Default Vue2로 설치합니다.(Vue3는 안정화 되지 않아 추후 Vuetify 설치시 각 모듈간 의존성 에러를 발생시킬 수 있습니다.)

vue 패키지 선택화면

* 참고(Manually select Features 선택시 화면)

Manually select Features 선택화면

 

7. [default Vue 3 선택]

default Vue 3를 선택하셔서 vue 프로젝트를 생성합니다.

 

8. [프로젝트 생성완료]

프로젝트가 생성되면 아래의 화면과 같이 test-vue 프로젝트가 생성됩니다.

 

9. 프로젝트 실행

프로젝트 생성이후 터미널에서 생성된 프로젝트로 이동한 후 프로젝트를 실행시킵니다.

해당프로젝트로 이동후 프로젝트 실행

 

프로젝트 실행후 아래와 같은 화면이 뜨면 해당하는 URL을 복사해서 사이트에 붙여넣거나 Ctrl키를 누르고 마우스를 클릭하시면 생성된 웹페이지를 실행할 수 있습니다.

프로젝트 실행화면

아래의 화면이 나오면 Vue-cli로 프로젝트를 성공적으로 생성한것 입니다.

 

여기까지 Vue-cli를 이용한 Vue 프로젝트 생성에 대한 포스팅을 마무리리 하도록 하겠습니다.

반응형

+ Recent posts