Vue.js 시작하기

Vue를 사용하기 위한 방법 두가지를 메모한다.

1. 간단한 script 참조 방법

<script src="https://unpkg.com/vue"></script>

2. vue-cli를 이용한 webpack, browserify로 프로젝트 생성

(node.js 설치를 통해 npm을 사용할 수 있다는 전제 하에 cmd 창에서 진행)

npm install vue-cli -global        (vue-cli 패키지  설치)

vue                                   (사용할 수 있는 명령어, 옵션 보여줌)

*vue-cli 명령어 참고*

템플릿 종류	설명
vue init webpack	고급 웹팩 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원
vue init webpack-simple	웹팩 최소 기능을 활용한 프로젝트 구성방식, 빠른 화면 프로토타이핑용
vue init browserify	고급 브라우저파리 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원
vue init browserify-simple	브라우저파이 최소 기능을 활용한 프로젝트 구성 방식, 빠른 화면 프로토타이핑용
vue init simple	최소 뷰 기능만 들어간 HTML 파일 1개 생성
vue init pwa	웹팩 기반의 프로그레시브 웹 앱(PWA, Progressive Web App) 기능을 지원하는 뷰 프로젝트

webpack이나 browserify 같은 모듈 번들러 프로젝트에는 자체적으로 Vue Loader를 포함하고 있다.

Vue Loader란 .vue 확장자 파일을 html, script, style로 변환 해주는 아이이다.

따라서 Vue Loader가 포함된 프로젝트를 생성하면 Vue 확장자 파일을 사용 가능하다.

-생성된 프로젝트 파일 모습

-프로젝트를 생성 후 초기에 npm install을 통해 라이브러리들을 다운로드 해야한다.

  => node_modules 폴더가 생성되고 내부에 라이브러리 설치됨. (npm 얘기니까 스킵)

-npm run dev : webpack-dev-server (node서버)가 자동으로 동작하며 방금 생성한 Vue 프로젝트가 열린다. index.html

코드 수정하는대로 실시간 반영되고, 개발할때 사용하는 용도이다.

- npm run build : dist 폴더가 생성되고 내부에 webpack이 빌드 결과물을 생성함.

**Webpack에 대한 개념 정리와 사용에 대해 따로 정리할 예정**

참고 링크 : https://blog.hanumoka.net/2018/08/22/vue-20180822-vue-Vue-CLI/