Vue3
Vite
TypeScript
Ant Design Vue
AntV|echarts
lodash
i18n
colorful theme
This project is the front-end of dubbo-kube.
# add vite vue project # https://vuejs.org/guide/scaling-up/tooling.html # Vue CLI is the official webpack-based toolchain for Vue. # It is now in maintenance mode and we recommend starting new projects with Vite unless you rely on specific webpack-only features. # Vite will provide superior developer experience in most cases. # note your env version # node v18.0.0 # yarn 1.22.21 npm create vue@latest yarn yarn format # run it yarn dev # main com yarn add ant-design-vue@4.x
if a function is not complete but show the entry in your page, please use notification.todo to mark it
/** * this function is showing some tips about our Q&A * TODO */ function globalQuestion() { devTool.todo("show Q&A tips") }
global css var
// if you want use the global css var, such as primary color // create a reactive reference to a var by 'ref' export const PRIMARY_COLOR = ref('#17b392') // In js import {PRIMARY_COLOR} from '@/base/constants' // In CSS, use __null for explicit reference to prevent being cleared by code formatting. let __null = PRIMARY_COLOR
provide and inject
must define in
ui-vue3/src/base/enums/ProvideInject.ts
icon: https://icones.js.org/
<Icon icon="svg-spinners:pulse-ring" />
api
Agreement: if your api's path starts with mock, you will get a mock result
Declear api
import request from '@/base/http/request' export const getClusterInfo = (params: any):Promise<any> => { return request({ url: '/metrics/cluster', method: 'get', params }) }
Declear mock api
// define a mock api import Mock from 'mockjs' Mock.mock('/mock/metrics/cluster', 'get', { code: 200, message: '成功', data: { all: Mock.mock('@integer(100, 500)'), application: Mock.mock('@integer(80, 200)'), consumers: Mock.mock('@integer(80, 200)'), providers: Mock.mock('@integer(80, 200)'), services: Mock.mock('@integer(80, 200)'), versions: ["dubbo-golang-3.0.4"], protocols: ["tri"], rules: [], configCenter: "127.0.0.1:2181", registry: "127.0.0.1:2181", metadataCenter: "127.0.0.1:2181", grafana: "127.0.0.1:3000", prometheus: "127.0.0.1:9090" } }) // import in main.ts import './api/mock/mockCluster.js'
invoke api
onMounted(async () => { let {data} = await getClusterInfo({}) })
decide where the request is to go : request.ts
// request.ts const service: AxiosInstance = axios.create({ // change this to decide where to go baseURL: '/mock', timeout: 30 * 1000 })
In html template
<div> {{$t(stringVar)}} </div>
In ts
if you want to make your var to i18n, make sure your var is a computed
let label = 'foo' let labelWithI18n = computed(() => globalProperties.$t(label))
Define a router
// router/defaultRoutes { path: '/home', name: 'homePage', component: () => import('../views/home/index.vue'), meta: { icon: 'carbon:web-services-cluster' } }
Config route meta
// you can config your route with this struct export interface RouterMeta extends RouteMeta { icon?: string hidden?: boolean skip?: boolean // icon: Show as your menu prefix // hidden: Do not show as a menu include its children routes // skip: Do not show this route as a menu, but display its child routes.
Config a tab route
Note: /tab is a middle layer for left-menu-item: must use LayoutTab as component; meta.tab must be true
{ path: '/tab', name: 'tabDemo', component: LayoutTab, redirect: 'index', meta: { tab_parent: true }, children: [ { path: '/index', name: 'applications_index', component: () => import('../views/resources/applications/index.vue'), meta: { // hidden: true, } }, { path: '/tab1', name: 'tab1', component: () => import('../views/common/tab_demo/tab1.vue'), meta: { icon: 'simple-icons:podman', tab: true, } }, ] },
Build
yarn build
Deploy
Copy the dist
folder to the path app/dubbo-ui/dist/
# run the following command in the root path of the project rm -rf app/dubbo-ui/dist cp -r dist/ app/dubbo-ui/