1. 프로젝트 생성하기(vue-cli)

 1) vue-cli 설치하기.

 - Global로 설치하기

npm install  -g vue-cli


 2) project 생성하기.

mkdir {PROJECT_NAME}


cd {PROJECT_NAME}


vue init webpack-simple


 - vue 명령어

 

 설명

 비고

 init

 generate a new project from a template

 vue init {project template type} {PROJECT_NAME}

 list

 list available official templates

 vue list <-- 아래 내용 참고

 build

 prototype a new project

 

 help

 display help for [cmd] 


 - vue template

 

 설명

비고 

 browserify

 A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

 

 browserify-simple

 A simple Browserify + vueify setup for quick prototyping.

 

 pwa

 PWA template for vue-cli based on the webpack template

 

 simple

 The simplest possible Vue setup in a single HTML file

 하나의 index.html 파일만 생성해줌.

 webpack

 A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

 

 webpack-simple

 A simple Webpack + vue-loader setup for quick prototyping.

 


2. 프로젝트 분석하기

 1) 기본 구조 설명


 2) 상세설명

  (1) main.js

- 프로젝트의 기본이 되는 파일입니다. 프로젝트의 Entry Point 이기도 하다.

  (2) App.vue

- Root 컴포넌트

- Vue를 로드하고 해당 파일을 로드하면서 어플리케이션을 초기화한다.

- 참고로 *.vue 파일은 "HTML 템플릿", 단일 vue 컴포넌트를 정의하는 javascript, 특정 스타일 css 의 조합이다.


  (3) assets

- 외부 자원들에 대한 폴더이다. image, css 등이 들어간다.


 3) 그외 설명

  (1) components

- vue 파일을 저장하는 곳.

- 입맛에 따라 알아서 변경해서 쓰면 된다.


  (2) route

-backend에서 제공하는 라우팅 기능을 제공함.

- index.js 관련해서는 추후 설명할 예정


3. 프로젝트 시작하기

 1) 위에서 생성한 프로젝트 내에서

 2) 우선 npm으로 라이브러리들을 설치해야한다.

npm install


 3) 개발버전으로 프로젝트를 시작하자.

  - compile, ESLint 를 진행하고, 로컬 서버를 동작시켜준다.

  - ESLint, hot-reload 동작(변경된 상태만 변경)

npm run dev


 4) 실서비스 시

  - webpack 설정등에 따라 달라지겠지만, /dist 폴더로 hash 값이 포함된 파일명으로 파일들이 생성됨.

npm run build



참고링크

 - 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

 - https://blog.storyg.co/vue-js-posts/todos-tutorial

+ Recent posts