2018-07-29 Vue JS 시작

Vue JS 시작

1.Vue JS ?

- 구글 크리에이티브 랩스에서 일했던, Even You(에번 유)가 개발
- client 애플리케이션을 위한, 프레임워크(Angualr랑 같은 사상)

2.Vue JS 프로젝트 구성

- NodeJS 설치하기 (https://nodejs.org/ko/download/)
- NodeJS 설치하면서, NPM도 자동으로 설치된다.(Node Package Manager)
- 설치를 완료하였다면, console창에서 node -v / npm -v 명령어를 입력해서, 버전이 출력되는지 확인
- vue-cli 설치 -> npm install -g vue-cli
- 설치를 했다면, vue -V / vue --version 을 통해서, 버전이 출력되는지 확인.
- vue-cli 명령어는 vue 로 시작한다.
- vue 프로젝트 생성 시, 환경별 템플릿을 제공해준다.
* 제공되는 셋팅 템플릿을 확인하려면, vue list 명령어로 확인
★ 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
★ 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.

- vue init webpack vue-sample-project
? Project name vue-sample-project
? Project description A Vue.js project
? Author phpbae
? 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 karma
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

명령어를 입력하면, 위와 같은 초기셋팅에 대한 옵션들이 더 나오는데.. 필요한거에 따라 알맞게 구성하면 된다.

구성이 완료되었으면, 실행해 보자
- cd vue-sample-Project
- npm run dev
- 브라우저에서,  http://localhost:8080