快速开始

安装依赖

# NPM
$ npm i @vancone/console-component --save

# Yarn
$ yarn add @vancone/console-component

加载样式

// main.ts

// 引入组件样式
import "element-plus/dist/index.css";
import '@vancone/console-component/style.css';

主界面

// App.vue
<template>
  <ConsoleApp title="Demo" helpDocUrl="https://docs.vancone.com/demo" />
</template>

<script setup lang="ts">
import { ConsoleApp } from 'vancone-console-component';
</script>

路由

// src/router/index.ts
import { DetailPage, NoPermission, TablePage } from '@vancone/console-component';


export const routes: Array<RouteRecordRaw> = [
  {
    path: '/:model?',
    name: 'ModelTable',
    component: TablePage,
    meta: {
      title: 'User',
      hidden: true,
      activeMenu: '{model}',
    }
  },
  {
    path: '/:model/detail',
    name: 'ModelDetail',
    component: DetailPage,
    meta: {
      title: 'User',
      hidden: true,
      activeMenu: '{model}',
    }
  },
  {
    path: '/no-permission',
    name: 'NoPermission',
    component: NoPermission,
    meta: {
      title: 'No Permission',
      hidden: true,
    }
  },
  ...
]

国际化

首先检查项目中是否已经引入 vue-i18n 依赖，如果没有需要先安装。

# NPM
$ npm i vue-i18n --save

# Yarn
$ yarn add vue-i18n

// src/main.ts
import { i18n } from '@vancone/console-component';
import '~/i18n/index';

app.use(i18n);

// src/i18n/index.ts
import { en, zh } from '@vancone/console-component';

import enJson from './langs/en.json';
import zhJson from './langs/zh.json';

Object.assign(en, enJson);
Object.assign(zh, zhJson);

低代码

// src/main.ts
import '~/config/index';

// src/config/index.ts
import { modelList, menuList, activeMenuMapping } from '@vancone/console-component';

import dataSourceModel from "./models/data-source";
import dataModelModel from "./models/data-model";
import agentModel from "./models/agent";

import assetSvg from '~/assets/svg/asset.svg';
import appSvg from '~/assets/svg/service.svg';

modelList.value = {
    'agent': agentModel,
    'data-asset': dataSourceModel,
    'data-source': dataSourceModel,
};

Object.assign(activeMenuMapping, {
    'data-source': 'data-asset',
    'data-model': 'data-asset',
});

menuList.value = [
    {
        path: '/data-asset',
        title: 'menu.dataAsset.dataAsset',
        icon: assetSvg,
    },
    {
        path: '/data-app',
        title: 'menu.dataService',
        icon: appSvg,
    },
];