@newbiz/vue-maintainer-libs
Version:
Vue.js maintainer 라이브러리
97 lines (87 loc) • 3 kB
Markdown
# Vue.js Maintainer Libs
<br>Vue.js maintainer library.
> This project was generated by [Vessel](https://www.npmjs.com/package/@mornya/vessel). For a simple and quick reference, click [here](VESSEL.md).
## About
Vue.js 프로젝트 부트스트래핑을 위한 라이브러리.
## Installation
해당 모듈을 사용할 프로젝트에서는 아래와 같이 설치한다.
```bash
$ npm install --save @newbiz/vue-maintainer-libs
or
$ yarn add @newbiz/vue-maintainer-libs
```
## Usage
src/main.js에서 각 router, store, plugins 등의 설정을 옵션으로 넘겨준다.<br>
해당 모듈을 사용하는 각 프로젝트 코드를 참조 한다.
```ecmascript 6
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](CHANGELOG.md) 파일 참조.
## License
해당 프로젝트의 [LICENSE](LICENSE) 파일 참조.