steps

vue-cli 설치

# vue-cli 설치

$ npm install --global vue-cli
# "webpack" 템플릿을 이용해서 새 프로젝트 생성
$ vue init webpack my-project
# 의존성을 설치하고 실행하세요!
$ cd my-project
$ npm install
$ npm run dev

sudo npm install --global vue-cli

Error: EACCES: permission denied, access '/usr/local/lib/node_modules/vue-cli/node_modules/acorn'

npm 으로 패키지 설치 시 권한 에러가 뜰 경우 sudo 로 설치 해 주세요.

sudo npm install --global vue-cli

npm run dev

Error: listen EADDRINUSE :::8080

포트번호 에러 발생시 config/index.js dev.port 정보 변경 후 실행

World.vue 생성

router.js 내에 연결

주소창에서 world 페이지 주소 입력 후 이동

 http://localhost:8080/#/world

Hello.vue 내에 router-link 넣어보기

SPA

App.vue에 전역으로 app.scss 추가

<style lang="scss">
@import '~@/assets/sass/app.scss';
..omitted..

sass loader 추가

npm install sass-loader node-sass webpack --save-dev

css scoped 속성

~@

webpack.base.conf.js

resolve: {
    ..omitted..
    alias: {
        ..omitted..
        '@': resolve('src')
    }
}

외부 컴포넌트 사용 (boostrap-vue 소개 : https://bootstrap-vue.js.org/)

yarn add bootstrap-vue

main.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue);

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

컴포넌트 써보기

b-navbar, modal

vue-fullpage 예제 (https://github.com/RohMiKwon/vue-fullpage)

v-touch, event callback, transition 명 커스텀 등

build 해보기

npm run build

html build 설정 수정

webpack.prod.conf.js
HtmlWebpackPlugin minify 설정값 삭제

index.html meta 추가 하고 build 해보기

<meta name="viewport" content="user-scalable=no,maximum-scale=1,minimum-scale=1,width=device-width,initial-scale=1">

SPA 예제로 써보면 좋은 : https://lineagem.plaync.com/guidebook/index

참고 링크

SPA와 SPA 라우팅 원리 : http://reimaginer.tistory.com/entry/spa-and-spa-routing