프레임워크 설정

최신브랜치 fetch

git fetch

framework branch 이동

git checkout feature/framework

node module 설치

npm install

개발서버 작동

npm run dev

코드 플로우

package.json

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  }

• npm run dev 명령어로 webpack.dev.conf.js 를 참조 한다.

build/webpack.dev.conf.js

const baseWebpackConfig = require('./webpack.base.conf');

• webpack.base.conf 를 include 한다.

build/webpack.base.conf

  entry: {
    app: './src/main.js'
  }

• entry point 로 /src/main.js 를 지정 한다.

/src/main.js

import App from './App';
import router from './router';

new Vue({
    el: '#app',
    data: {
        globalState: store,
    },
    router,
    template: '<App/>',
    components: { App },
    mounted() {
    }
});

• App.vue 를 템플릿/컴포넌트로 사용하며 라우터를 지정한다.

src/App.vue

<template>
    <v-app>
        <v-content>
            <v-container style="padding:0px;" fluid>
                <router-view>
                    <!-- <v-container fluid></v-container> -->
                </router-view>
            </v-container>
        </v-content>
    </v-app>
</template>

• router의 의해 렌더링될 view 영역을 선언한다.

router/index.js

import Home from '@/components/Home';

routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]

• 요청 path 에 따라 라우터에 의해 분기 된다.