Vue.js init / Vue.js 프로젝트 생성하기

1. Vue 프로젝트를 생성할 위치로 이동

2. 프로젝트 생성

# vue init [템플릿 종류] [프로젝트 명]
> vue init webpack vue_study1

* 템플릿 종류에 대해 잘 설명해놔주신 분이 있습니다.

참고 : https://medium.com/witinweb/vue-cli-%EB%A1%9C-vue-js-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-browserify-webpack-22582202cd52

• 생성 후 directory 확인(아래와 같은 것들이 자동으로 생성되어졌습니다.)

3. 프로젝트 웹에 띄워보기

• vue init을 실행하여 프로젝트 생성이 완료되면 아래와 같은 글들이 보일 겁니다.
• 하단에 보면 To get started하고, 시작하기 위한 방법이 나와 있습니다.

• vue 프로젝트 실행하기

> cd vue_study1

# npm run dev = 프로젝트 실행
> npm run dev

• 페이지가 띄워지고, log 맨 밑에 접근 가능한 url이 보일 겁니다. 이 url을 브라우저 주소창에 입력해 줍니다.

• 아래와 같은 초기 상태의 vue 프로젝트 index화면을 확인할 수 있습니다.

 

* webpack template에 대한 설명 : https://vuejs-templates.github.io/webpack

Introduction · GitBook