Vue CLI

1. Vue-cli

https://github.com/vuejs/vue-cli

# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm run dev

2. Webpack

https://vuejs-templates.github.io/webpack/

npm run dev

npm run build

npm run unit

npm run e2e

npm run lint

1) 프로젝트 구조 (https://vuejs-templates.github.io/webpack/structure.html)

2) API Proxying During Development (https://vuejs-templates.github.io/webpack/proxy.html)

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

3) Integrating with Backend Framework(https://vuejs-templates.github.io/webpack/backend.html)

3. Vue Loader

https://vue-loader.vuejs.org/kr/

4. Vue Component 스펙

https://vue-loader.vuejs.org/kr/start/spec.html

src 속성을 사용해 language block을 위한 외부 파일을 가져올 수 있습니다.<== 우선 첫 단계로 이와 같이 사용

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

5. Vuex (https://vuex.vuejs.org/en/structure.html)

Vuex is a state management pattern + library for Vue.js applications.

extract the shared state out of the components, and manage it in a global singleton

integrates with Vue's official devtools extension

https://github.com/vuejs/vue-devtools

vue-devtool을 통하여, time-travel debugging을 할 수 있다.

6. vue-router (https://router.vuejs.org/en/)
1) App.vue가 진입점이며, 빌드를 진행하면 하기와 같이 build된 app.js가 index.html에 auto-inject된다.

<script type="text/javascript" src="/app.js"></script>

2) App.vue에 포함되어 있는 <router-view/> 태그가 해당 url 에 match되는 component를 추가해 준다.

3) 새로 component를 추가하면, vue-router에 등록해 준다.

vue-router를 사용하지 않을 경우는 하기와 같이 추가해 주어야 한다.

https://youtu.be/aoWqFLGCK60?t=89

https://vuejs.org/v2/guide/components-registration.html

4) Dynamic Route Matching 도 참조하자.

7. Advanced Templates

현재는 web-pack simple을 사용하였지만, 추후에는

다른 고급 template을 더 사용할 수 있다.

https://github.com/vuejs-templates