Vue.js Helper Libs

Vue.js Helpers for maintain of the application on bootstrap.

This project was generated by Vessel. For a simple and quick reference, click here.

About

Vue.js 프로젝트 부트스트래핑을 위한 라이브러리.

Installation

해당 모듈을 사용할 프로젝트에서는 아래와 같이 설치한다.

$ npm install --save @mornya/vue-helper
or
$ yarn add @mornya/vue-helper

Usage

src/main.js에서 각 router, store, plugins 등의 설정을 옵션으로 넘겨준다.

import Vue from 'vue'
import Vuex from 'vuex'
import * as appPlugins from '@/plugins'
import * as appRouter from '@/router'
import * as appModulesStore from '@/store'
import appRootStore from '@/store/root'
import App from '@/App'

const { buildEnv, router, store } = Maintainer.initialize(Vue, {
  showLogEnvs: ['local', 'dev'],
  router: {
    routes: appRouter,
    fallback: {
      // fallback to 404
      path: '/*',
      name: 'application.404',
      component: () => import(/* webpackChunkName: "application.404" */ '@/views/Application/PageNotFound.vue'),
    },
    option: {
      // Vue-Router 옵션
      base: process.env.BASE_URL,
      scrollBehavior () {
        return { x: 0, y: 0 }
      },
    },
    navigationGuards: {
      // NavigationGuards용 함수 선언
      beforeEach (to, from) {},
      beforeResolve (to, from) {},
      afterEach (to, from) {},
    },
  },
  store: {
    vuex: Vuex,
    root: appRootStore, // root에 modules 포함 가능 (단, 전체 initialState 취합 불가)
    modules: appModulesStore, // (optional)
  },
  plugins: appPlugins,
  serviceWorker: process.env.NODE_ENV === 'production' ? {
    base: '/',
    file: 'service-worker.js',
    hook: {
      ready () { console.log('완료') },
      error (error) { console.error(error) },
      ...
    },
  } : null,
  filter: null,
  prototype: null, // 정상 처리되지만 IDE에서 코드인식에 문제 있음 (Vue.prototype 사용권장).
  component: null, // 정상 처리되지만 IDE에서 코드인식에 문제 있음 (Vue.component 사용권장).
  mixin: null,
  directive: null,
})

// Maintainer.getBuildEnv() 와 동일
Vue.prototype.$env = buildEnv

// Vue 실행
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

Change Log

해당 프로젝트의 CHANGELOG.md 파일 참조.

License

해당 프로젝트의 LICENSE 파일 참조.