# Vue Site Core

## install

```sh
npm i  @luban-ui/vue-site-core vue vue-router vue-i18n pinia pinia-di axios qs
```

## Start App

```ts
// app.ts
import { LubanApp } from '@luban-ui/vue-site-core';

const luban = new LubanApp({
  // routes
  routes: [
    {
      path: '/',
      name: 'Layout',
      component: () => import('@/pages/Layout/index.vue'),
      children: [
        {
          path: '',
          name: 'Home',
          component: () => import('@/pages/Home/index.vue')
        },
        {
          path: ':pathMatch(.*)*',
          name: 'NotFound',
          component: () => import('@/pages/404/index.vue')
        }
      ]
    }
  ],
  // baseURL for router
  baseURL: '/',
  // global stores
  stores: [],
  // i18n
  i18n: {
    languageKey: 'language',
    languages: ['zh-CN', 'en-US'],
    defaultLanguage: 'zh-CN',
    languagesMap: languagesMap = [
      [/^en$/i, 'en-US'],
      [/^en-[a-z-]+$/i, 'en-US'],
      [/^zh$/i, 'zh-CN'],
      [/^zh-[a-z-]+$/i, 'zh-CN']
    ],
    langTypes: ['path'],
    loadMessages: (lang: string) => import(`@/i18n/locales/${lang}.json`)
  },
  // auto apply internal directives
  useDirectives: true,
  // on setup
  onSetup: (args: { getStore: GetStore }) => {},
  // on mounted
  onMounted: (args: { getStore: GetStore }) => {}
});

const app = luban.app;
const i18n = luban.i18n;

export { app, i18n };
```

```ts
// main.ts
import { app } from './app';

// app.use(xxx)
// app.use(xxx)
// app.use(xxx)

app.mount('#app');
```

## LubanApp instance (app)

- `app.app`: vue app instance.
- `app.globalStore`: global store.
- `app.router`: vue router.
- `app.i18n`: vue i18n instance.
- `app.language`: current language.

## helpers

### request

```ts
export interface ProgressEvent {
  loaded: number;
  total?: number;
  progress?: number;
  bytes?: number;
  estimated?: number;
  rate?: number;
}

export interface RequestOptions {
  url: string | URL | Request;
  baseURL?: string | URL;
  method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'OPTIONS' | 'HEAD';
  query?: Record<string, string> | URLSearchParams;
  data?: string | FormData | Record<string, any> | File | Blob | URLSearchParams | BufferSource;
  headers?: Headers | Record<string, string>;
  mode?: 'cors' | 'no-cors' | 'same-origin';
  credentials?: 'omit' | 'same-origin' | 'include';
  cache?: 'default' | 'no-store' | 'reload' | 'no-cache' | 'force-cache' | 'only-if-cached';
  redirect?: 'follow' | 'error' | 'manual';
  referrer?: string | 'no-referrer' | 'client' | URL;
  referrerPolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'unsafe-url';
  integrity: string;
  responseType?: 'json' | 'blob' | 'text' | 'stream' | 'arraybuffer';
  timeout?: number;
  onProgress?: (event: ProgressEvent) => void;
  validateStatus?: (status: number) => boolean;
}

export interface RequestResponse<T> {
  data: T;
  status: number;
  statusText: string;
  headers: Headers | Record<string, string>;
}

export declare const request: <T>(opts: RequestOptions) => {
  cancel: () => void;
  response: Promise<{
    status: number;
    statusText: string;
    data: T;
    headers: Record<string, string> | Headers;
  }>;
};
```