쏘니의 개발블로그

Vue EventBus

// 이벤트버스 생성
var EventBus = new Vue()
// 이벤트 발행
EventBus.$emit('message', 'hello world');
// 이벤트 구독
EventBus.$on('message', function(text) {
    console.log(text);
});

EventBus 를 전역으로 사용한다면 $off 도 등록을 해야함.
안하면 이벤트 구독이 계속 생겨나서 계속 이벤트가 발생됨.

참고문헌

http://vuejs.kr/jekyll/update/2017/02/13/vuejs-eventbus/

import Vue from 'vue'
import Router from 'vue-router'
import ExampleRouter from './modules/example'

import Login from '@/components/common/Login'

import store from '@/vuex/store'

const requireAuth = () => (from, to, next) => {
  let auth = store.getters.getIsAuth
  if (auth) {
    return next() // isAuth === true면 페이지 이동
  }
  next('/') // isAuth === false면 다시 로그인 화면으로 이동
}
const loginDup = () => (from, to, next) => {
  let auth = store.getters.getIsAuth
  if (auth) {
    return location = '/main'
  }
  next()
}

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [{
    path: '/',
    name: 'login',
    beforeEnter: loginDup(), // 로그인 이후 '/' path 접근 redirect
    component: Login
    },
    ExampleRouter 
  ]
})

ExampleRouter 코드

/** When your routing table is too long, you can split it into small modules **/

import List from '@/components/List'
import Create from '@/components/Create'
import Detail from '@/components/Detail'

import store from '@/vuex/store'

const exampleRouter = {
  path: '/exam',
  component: User,
  redirect: '/exam/list',
  name: 'exam',
  children: [{
    path: 'list',
    component: List,
    name: 'list'
  },
  {
    path: 'create',
    component: Create,
    name: 'create'
  },
  {
    path: 'detail/:no',
    component: Detail,
    name: 'detail'
  }

  ]
}

export default exampleRouter

하나의 체크박스는 단일 boolean 값을 가짐
하지만, true false 외 다른값 가지도록 설정 가능

true 및 false 값 설정

:true-value="1" :false-value="0"

일반 예제

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> 
<input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> 
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> 
<br> 
<span>체크한 이름: {{ checkedNames }}</span> 
//checkedNames -> ["Jack", "Mike", "John"]
new Vue(
  { 
    el: '...', 
    data: { 
      checkedNames: [] 
      } 
    }
  )

참고문헌

https://takeuu.tistory.com/39

스프링부트 프로젝트 일단 생성

vue 프로젝트 생성

스프링부트 제일 상위 루트 terminal 에서 명령어 작성

vue-cli 2.X

vue init webpack frontend

vuecli-2.X시작하기

프로젝트 구조

├── src/ # Spring 소스코드 디렉터리
│ └── main/ │
│            ├── java/  
│            └── resources/  
│               ├── static/
│               ├── templates/
│               └── application.properties
├── target/ # Spring 빌드 디렉터리
│ └── ...
├── frontend/ # Vue.js 루트 디렉터리
│ ├── src/
│ └── ...
└── pom.xml

빌드

vue 빌드 파일 설정

파일명
frontend/config/index.js

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../../src/main/resources/static/index.html'),
  // Assets Paths
  assetsRoot: path.resolve(__dirname, '../../src/main/resources/static'), }

cd frontend
npm run build

빌드를 하게되면 index.js 에서 설정해준 경로로 빌드된 파일이 떨어지고, 스프링부트를 실행해서 해당 static 파일 경로로 접속하면 화면이 뜬다.

3.X configure

vue.config.js 파일을 제일 상위 폴더 frontend 아래에 만든다.
assetsDir 폴더명이 outputDir 과 같아 static 이면 build 할때마다 해당 dir 파일 다 지우고 다시 만든다.
outputDir 가 root dir 이고, assetsDir 이 outputDir 하위에 생성되는 vue 에서 생성되는 build dir 이다.

//vue.config.js
module.exports = {
   assetsDir: "vuestatic",
  outputDir: "../src/main/resources/static",
  indexPath: "../templates/index.html",
  devServer: {
    proxy: "http://localhost"
  },
  chainWebpack: config => {
    const svgRule = config.module.rule("svg");

    svgRule.uses.clear();

    svgRule.use("vue-svg-loader").loader("vue-svg-loader");
  }
};

참고문헌

https://itstory.tk/entry/Spring-Boot-Vuejs-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0

vue cli 2.X

// vue-cli 전역 설치
npm install -g vue-cli

프로젝트 생성

// vue init <template-name> <project-name>
vue init webpack my-project

//실행
npm install
npm run dev 로 실행

vue-cli 에서는 미리 세팅된 몇가지 템플릿을 제공한다.
제공되는 템플릿은 vuejs-templates 에 각각의 레퍼로 저장되어 있다.
vue list 명령어를 통해서 제공되는 템플릿 리스트를 확인할 수 있다.

vue cli 3.X

//설치
npm install -g @vue/cli

버젼으로 설치

npm install -g @vue/cli@^3.1.0
npm r -g vue-cli --지우고 다시 설치 

//시작하기
vue create my-project

//실행
npm run serve

//관리자 vue 페이지
vue ui

참고문헌

http://vuejs.kr/vue/vue-cli/2018/01/27/vue-cli-3/

npm 설명

// vue-cli 전역 설치
{
  "name": "@ashnamuh/vue-npm-example",
  "version": "0.1.0",
  "private": false,
  "main": "dist/ash.common.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name ash src/index.js",
    "lint": "vue-cli-service lint"
  },
  ...
}

name은 npm에 배포할 패키지명입니다. 반드시 유일해야합니다.

version은 semver versioning에 따른 버전입니다.

private를 false로 설정해야 npm에 배포가 가능합니다.

main은 패키지를 사용했을 때 진입지점이 됩니다. 빌드 후 생기는 파일을 설정했습니다.

build 스크립가 중요합니다.

원래 webpack 등을 사용해서 별도의 빌드 코드를 작성해야 합니다.

이젠 vue-cli-service에서 자체적으로 빌드 기능을 지원합니다.

빌드 target을 lib으로 지정하면 npm 배포용으로 빌드됩니다.

진입점 파일인 src/index.js를 빌드했습니다.

—name 옵션은 빌드된 결과물 파일명을 의미합니다.

npm 등록(https://www.npmjs.com/)은 배포는 아래 참고문헌 링크

참고문헌

https://velog.io/@ashnamuh/Vue-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A5%BC-%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4%EB%A1%9C-npm%EC%97%90-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-dxjxfg5v7e [Vue 컴포넌트를 오픈소스로 npm에 배포하기]