[Javascript] vue-cli example

vue-CLI: vue Command Line Interface

vue project를 init/build/run 하는데에 사용한다 (특히 webpack template으로)

npm install -g vue-cli # 오래걸림

vue init webpack vueapp01 # webpack template으로 vue project init # 오래걸림2

(unit test와 e2e tests는 사용하지 말자. 다운로드 시간 줄이게)

cd vueapp01

npm install # dependencies install

npm run dev # package.json-script-dev 실행

npm run build # package.json-script-build 실행 -> dist directory에 production build

src/main.js에서 import문을 사용하는데, 이것은 ES6 syntax이며 브라우저에서도 사용할수 있다고한다

그에 대한 내용은 아래 사이트 참고

https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7

ES6의 import문은 CommonJS의 require()와 비교된다

그에 대한 내용은 아래 사이트

https://blueshw.github.io/2017/05/16/ES-require-vs-import/

참고:

https://medium.com/codingthesmartway-com-blog/vue-js-2-quickstart-tutorial-2017-246195cfbdd2

---

<vue single file component>

src/App.vue를 보면 <template>, <script>, <style> 3개의 block으로 이루어져있는 걸 확인할 수 있다

이것은 vue의 single file component이다

javscript 프로젝트 규모가 클 경우, 모듈(컴포넌트)를 분리해서 관리 해야하므로 single file component을 사용한다

<vue-loader>

이 컴포넌트는 vue-loader를 통해 CommonJS module로 변환된다 (webpack에서 사용하기 위해)

<webpack>

이 CommonJS module은 webpack(build tool)에 의해서 사용된다

webpack을 통해서 모듈들을 사용하여 프로젝트를 빌드할수 있다

simple project부터 시작하고 싶을 경우

webpack 템플릿 대신, webpack, vue-loader만을 사용하는 webpack-simple tempalte으로 vue init하자

<conclusion>

vue+webpack이 처음이라면 vue init webpack-simple을 사용하자

vue 파일은 single file component이며, vue-loader를 통해서 webpack build에 사용될수 있다

<template>, <script>, <style> 3개의 block으로 이루어져있다

---

vue-cli를 이용하면

 - vue --- vue-loader --- webpack을 통해 코드를 모듈별로 관리할 수 있다 (코드관리 효율적)

 - hot reload를 통해 빠른 개발이 가능하다

 - Flask(Jinja2), Django(Django Template)에서 vue를 사용할 때 template syntax conflict 문제를 피할 수 있다

(production build해보면 암)