Vue.js Maintainer Libs

Vue.js maintainer library.

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

About

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

Installation

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

$ npm install --save @newbiz/vue-maintainer-libs
or
$ yarn add @newbiz/vue-maintainer-libs

Usage

src/main.js에서 각 router, store, plugins 등의 설정을 옵션으로 넘겨준다. 해당 모듈을 사용하는 각 프로젝트 코드를 참조 한다.

import Vue from 'vue'
import Vuex from 'vuex'
import { Maintainer } from '@newbiz/vue-maintainer-libs'
import * as appPlugins from '@/plugins'
import * as appRouter from '@/router'
import * as appModulesStore from '@/store'
import appMixin from '@/mixins'
import appDirective from '@/directive'
import appRootStore from '@/store/root'
import App from '@/App'

const { buildEnv, router, store } = Maintainer.initialize(Vue, {
  showLogEnvs: ['local'],
  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: {
      // Navigation Guard용 함수선언
      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,
  mixin: appMixin,
  directive: appDirective,
  prototype: null, // 정상 처리되지만 IDE에서 코드인식에 문제 있음 (Vue.prototype 사용권장).
  component: null, // 정상 처리되지만 IDE에서 코드인식에 문제 있음 (Vue.component 사용권장).
})

// 해당 라이브러리 내에서 설정하므로 별도로 아래처럼 선언할 필요는 없다.
// Vue.prototype.$env = buildEnv

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

Change Log

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

License

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