여기 글을 그대로 따라하면서 내가 필요하다고 생각한 것만 정리한 내용
https://jinblog.kr/192?category=654421
#. 개발환경
node.js: v10.15.0
1. npm 을 통해 vue-cli 모듈 설치
$ npm install vue-cli -g
2. vue 프로젝트 생성 (webpack 사용)
$ vue init webpack vue-example-project
이렇게 실행하면 몇가지 물어보는데 기본값은 그냥 엔터로 넘어가고 그외 필요하다고 생각되는 건 아래와 같이 입력해줬다.
? Project name vue-example-project
? Project description A Vue.js project
? Author uyeon <eykim@imgr.co.kr>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) yarn
vue-cli · Generated "vue-example-project".
# Installing project dependencies ...
# ========================
yarn install v1.13.0
.
.
.
To get started:
cd vue-example-project
npm run dev
3. 생성된 프로젝트 확인
$ cd vue-example-project
$ npm run dev
정상적으로 빌드가 되면 http:localhost:8080 에서 Vue.js HTML 시작화면을 확인할 수 있다.
#. 생성된 vue-example-project 구조 설명
build: 배포시 관련 설정들이 들어있는 디렉토리
config: webpack관련 설정들이 포함되어 있는 디렉토리
package.json: npm 의존성 모듈 목록들과 개발/테스트/배포할 수 있는 명령어들이 포함되어 있다.
src: 여기에서 Vuejs로 개발을 진행할 수 있으며 vue-router까지 이미 설정되어 있는 것을 확인할 수 있다.
static: Vuejs와 관련없이 정말 공통으로 사용해야할 정적파일들을 이 곳에 보관할 수 있다.
test: 개발하면서 유닛테스트를 진행할 수 있도록 준비되어 있는 test 디렉토리
dist: 빌드 후 생성되는 디렉토리로 빌드를 완료하게 되면 dist 디렉토리에 모든 파일과 index.html 까지 포함되어 있다. 이 디렉토리 안에 있는 모든 파일을 배포공간에 넣어두면 서비스를 운영할 수 있다.