From f7df579225172bfd338e83a345e164931ada8d45 Mon Sep 17 00:00:00 2001 From: Simon He <13917107469@163.com> Date: Wed, 30 Nov 2022 13:17:33 +0800 Subject: [PATCH 1/3] refactor: tidy up typeof --- .../_hooks/use-message/index.ts | 6 +-- .../_hooks/use-update-input/index.ts | 6 +-- .../fighting-design/_utils/utils/index.ts | 47 +++++++++---------- packages/fighting-design/avatar/src/props.ts | 5 +- .../fighting-design/checkbox/src/checkbox.vue | 4 +- packages/fighting-design/slider/src/drag.ts | 18 +++---- .../tabs/src/components/tabs-nav/index.vue | 4 +- .../fighting-design/tabs/src/utils/index.ts | 10 ++-- .../fighting-playground/src/store/index.ts | 10 ++-- 9 files changed, 52 insertions(+), 58 deletions(-) diff --git a/packages/fighting-design/_hooks/use-message/index.ts b/packages/fighting-design/_hooks/use-message/index.ts index aeb50ed741..ebd0dc7fea 100644 --- a/packages/fighting-design/_hooks/use-message/index.ts +++ b/packages/fighting-design/_hooks/use-message/index.ts @@ -2,7 +2,7 @@ import messageVue from '../../message/src/message.vue' import notificationVue from '../../notification/src/notification.vue' import { render, createVNode } from 'vue' import { useMassageManage } from '../../_hooks' -import { runCallback } from '../../_utils' +import { runCallback, isString } from '../../_utils' import type { ComponentInternalInstance, VNode } from 'vue' import type { DefaultOptionsInterface, @@ -41,7 +41,7 @@ export const useMessage: UseMessageInterface = ( const container: HTMLDivElement = document.createElement('div') const id = `message-${seed}` - if (typeof options === 'string') { + if (isString(options)) { options = { message: options } as MessageOptions @@ -74,7 +74,7 @@ export const useMessage: UseMessageInterface = ( id, vm, close: (): void => { - ( + ;( (vm as ComponentInternalInstance).exposed as MessageInstance ).close() }, diff --git a/packages/fighting-design/_hooks/use-update-input/index.ts b/packages/fighting-design/_hooks/use-update-input/index.ts index 19d3edb867..adee8522db 100644 --- a/packages/fighting-design/_hooks/use-update-input/index.ts +++ b/packages/fighting-design/_hooks/use-update-input/index.ts @@ -1,4 +1,4 @@ -import { runCallback } from '../../_utils' +import { runCallback, isNumber } from '../../_utils' import type { UseUpdateInputInterface, UseUpdateInputEmitInterface, @@ -29,7 +29,7 @@ export const useUpdateInput: UseUpdateInputInterface = ( const onInput: HandleEventInterface = (evt: Event): void => { emit( 'update:modelValue', - prop.type === 'number' + isNumber(prop.type) ? Number((evt.target as HTMLInputElement).value) : (evt.target as HTMLInputElement).value ) @@ -51,7 +51,7 @@ export const useUpdateInput: UseUpdateInputInterface = ( */ const onClear: OrdinaryFunctionInterface = (): void => { if (prop.disabled) return - emit('update:modelValue', prop.type === 'number' ? 0 : '') + emit('update:modelValue', isNumber(prop.type) ? 0 : '') } return { diff --git a/packages/fighting-design/_utils/utils/index.ts b/packages/fighting-design/_utils/utils/index.ts index b4c4ee94ba..1674b59238 100644 --- a/packages/fighting-design/_utils/utils/index.ts +++ b/packages/fighting-design/_utils/utils/index.ts @@ -8,9 +8,11 @@ import type { UtilsIsStringInterface, UtilsSizeToNumInterface, UtilsIsObjectInterface, - UtilsIsArrayInterface + UtilsIsFunctionInterface } from './interface' +const _toString = Object.prototype.toString + /** * 保留小数点后 no 位 * @@ -59,10 +61,7 @@ export const debounce: UtilsDebounceInterface = ( export const isNumber: UtilsIsNumberInterface = ( target: unknown ): target is number => { - return ( - typeof target === 'number' && - Object.prototype.toString.call(target) === '[object Number]' - ) + return typeof target === 'number' } /** @@ -74,10 +73,7 @@ export const isNumber: UtilsIsNumberInterface = ( export const isBoolean: UtilsIsBooleanInterface = ( target: unknown ): target is boolean => { - return ( - typeof target === 'boolean' && - Object.prototype.toString.call(target) === '[object Boolean]' - ) + return typeof target === 'boolean' } /** @@ -89,10 +85,7 @@ export const isBoolean: UtilsIsBooleanInterface = ( export const isString: UtilsIsStringInterface = ( target: unknown ): target is string => { - return ( - typeof target === 'string' && - Object.prototype.toString.call(target) === '[object String]' - ) + return typeof target === 'string' } /** @@ -104,27 +97,29 @@ export const isString: UtilsIsStringInterface = ( export const isObject: UtilsIsObjectInterface = ( target: unknown ): target is Object => { - return ( - typeof target === 'object' && - Object.prototype.toString.call(target) === '[object Object]' - ) + return _toString.call(target) === '[object Object]' } /** - * 判断一个值是否为 array 类型 + * 判断一个值是否为 function 类型 * * @param target 要检测的值 * @returns { boolean } */ -export const isArray: UtilsIsArrayInterface = ( +export const isFunction: UtilsIsFunctionInterface = ( target: unknown -): target is [] => { - return ( - typeof target === 'object' && - Object.prototype.toString.call(target) === '[object Array]' - ) +): target is Function => { + return typeof target === 'function' } +/** + * 判断一个值是否为 array 类型 + * + * @param target 要检测的值 + * @returns { boolean } + */ +export const isArray = Array.isArray + /** * 给数字小于 10 的数字前面加 0 * @@ -153,7 +148,7 @@ export const sizeChange: UtilsSizeChangeInterface = ( target = 'px' ): string => { if (!size) return '' - return typeof size === 'string' ? size : size + target + return isString(size) ? size : size + target } /** @@ -169,7 +164,7 @@ export const sizeToNum: UtilsSizeToNumInterface = ( size: string | number ): number => { if (!size) return 0 - if (typeof size === 'number') return size + if (isNumber(size)) return size return Number.parseFloat(size) || 0 } diff --git a/packages/fighting-design/avatar/src/props.ts b/packages/fighting-design/avatar/src/props.ts index a5da0f15e5..e94fee4e04 100644 --- a/packages/fighting-design/avatar/src/props.ts +++ b/packages/fighting-design/avatar/src/props.ts @@ -1,6 +1,7 @@ import type { PropType, ExtractPropTypes, VNode, Component } from 'vue' import type { AvatarFitType, AvatarSizeType } from './interface' import type { HandleEventInterface } from '../../_interface' +import { isString, isNumber } from 'packages/fighting-design/_utils' export const Props = { /** @@ -78,9 +79,9 @@ export const Props = { type: [String, Number] as PropType, default: (): AvatarSizeType => 'middle', validator: (val: AvatarSizeType | number): boolean => { - if (typeof val === 'string') { + if (isString(val)) { return (['large', 'middle', 'small', 'mini'] as const).includes(val) - } else if (typeof val === 'number') { + } else if (isNumber(val)) { return val >= 1 } return false diff --git a/packages/fighting-design/checkbox/src/checkbox.vue b/packages/fighting-design/checkbox/src/checkbox.vue index 60193870bf..57936c0fda 100644 --- a/packages/fighting-design/checkbox/src/checkbox.vue +++ b/packages/fighting-design/checkbox/src/checkbox.vue @@ -1,7 +1,7 @@ diff --git a/packages/fighting-design/submenu/src/submenu.vue b/packages/fighting-design/submenu/src/submenu.vue index d9918d8a9c..a9b5124234 100644 --- a/packages/fighting-design/submenu/src/submenu.vue +++ b/packages/fighting-design/submenu/src/submenu.vue @@ -38,12 +38,12 @@
  • From 0b9a1e7597203aaa184c48a110f38e683fc1e20c Mon Sep 17 00:00:00 2001 From: Simon He <13917107469@163.com> Date: Wed, 30 Nov 2022 13:27:18 +0800 Subject: [PATCH 3/3] chore: lint --- docs/docs/.vitepress/utils/sidebar.ts | 5 ++- .../_hooks/use-avatar/index.ts | 36 +++++++++---------- .../_hooks/use-avatar/interface.d.ts | 2 +- .../fighting-design/_hooks/use-list/index.ts | 25 +++++++------ .../_hooks/use-list/interface.d.ts | 9 +++-- .../_hooks/use-message/index.ts | 2 +- .../_utils/utils/interface.d.ts | 11 ++++++ packages/fighting-design/avatar/src/props.ts | 2 +- .../button-group/src/interface.d.ts | 2 +- .../fighting-design/button-group/src/props.ts | 2 +- packages/fighting-design/global.d.ts | 2 +- .../fighting-design/menu/src/interface.d.ts | 4 +-- packages/fighting-design/menu/src/props.ts | 5 +-- packages/fighting-design/radio/src/radio.vue | 4 +-- packages/fighting-design/slider/src/drag.ts | 12 +++---- .../fighting-design/tabs/src/utils/index.ts | 4 +-- .../fighting-design/up-load/src/up-load.vue | 2 +- .../fighting-playground/src/store/index.ts | 2 +- start/src/global.d.ts | 2 +- start/src/main.ts | 5 +-- 20 files changed, 77 insertions(+), 61 deletions(-) diff --git a/docs/docs/.vitepress/utils/sidebar.ts b/docs/docs/.vitepress/utils/sidebar.ts index 53a7eeab8e..ce13f16a2b 100644 --- a/docs/docs/.vitepress/utils/sidebar.ts +++ b/docs/docs/.vitepress/utils/sidebar.ts @@ -114,7 +114,10 @@ export const sidebar = { { text: 'Watermark 水印', link: '/components/watermark' }, { text: 'Ripple 涟漪', link: '/components/ripple' }, { text: 'Calendar 日历', link: '/components/calendar' }, - { text: 'CollapseAnimation 折叠动画', link: '/components/collapse-animation' } + { + text: 'CollapseAnimation 折叠动画', + link: '/components/collapse-animation' + } ] } ] diff --git a/packages/fighting-design/_hooks/use-avatar/index.ts b/packages/fighting-design/_hooks/use-avatar/index.ts index f694cfc504..531e82a5bf 100644 --- a/packages/fighting-design/_hooks/use-avatar/index.ts +++ b/packages/fighting-design/_hooks/use-avatar/index.ts @@ -7,7 +7,7 @@ import type { UseAvatarReturnInterface } from './interface' /** * useAvatar 内部样式 - * + * * @param prop props 列表 * @returns { UseAvatarReturnInterface } */ @@ -46,24 +46,22 @@ export const useAvatar = (prop: AvatarPropsType): UseAvatarReturnInterface => { /** * 样式列表 */ - const styleList: ComputedRef = styles( - [ - 'background', - 'fontColor', - 'fontSize', - /** - * size 配置项需要进行检查是否需要过滤 - * - * 只有是数字的时候才需要过滤，是数字代表是自定义的尺寸 - * - * 字符串代表内部尺寸，用于类名拼接 - */ - { - key: 'size', - callback: (): boolean => isNumber(prop.size) - } - ] - ) + const styleList: ComputedRef = styles([ + 'background', + 'fontColor', + 'fontSize', + /** + * size 配置项需要进行检查是否需要过滤 + * + * 只有是数字的时候才需要过滤，是数字代表是自定义的尺寸 + * + * 字符串代表内部尺寸，用于类名拼接 + */ + { + key: 'size', + callback: (): boolean => isNumber(prop.size) + } + ]) return { nodeClassList, diff --git a/packages/fighting-design/_hooks/use-avatar/interface.d.ts b/packages/fighting-design/_hooks/use-avatar/interface.d.ts index 722c78df10..ed1eeac8e0 100644 --- a/packages/fighting-design/_hooks/use-avatar/interface.d.ts +++ b/packages/fighting-design/_hooks/use-avatar/interface.d.ts @@ -3,7 +3,7 @@ import type { ClassListInterface } from '../../_interface' /** * useAvatar 内部样式 hook 方法返回值类型接口 - * + * * @param nodeClassList img 元素的类名列表 * @param classList 类名列表 * @param styleList 样式列表 diff --git a/packages/fighting-design/_hooks/use-list/index.ts b/packages/fighting-design/_hooks/use-list/index.ts index 9d44e58bca..59ec50365b 100644 --- a/packages/fighting-design/_hooks/use-list/index.ts +++ b/packages/fighting-design/_hooks/use-list/index.ts @@ -13,9 +13,9 @@ import type { FilterParamsInterface } from '../use-props/interface' /** * 自动计算组件所需要的类名列表和样式列表 - * + * * 类名和样式首先通过传入属性列表数组，使用过滤 hook 进行过滤 - * + * * 过滤后的 prop 对象再进行样式或者类名处理 * * @param prop prop 列表 @@ -26,12 +26,11 @@ export const useList: UseListInterface = ( prop: T, name: string ): UseListReturnInterface => { - /** * 过滤 props - * + * * 虽然说 classes 和 styles 都接受一个数组参数可以直接遍历 - * + * * 但是有些参数需要传入特殊的回调进行判断，只能是先过滤后再遍历 */ const { filter } = useProps(prop) @@ -69,7 +68,9 @@ export const useList: UseListInterface = ( * 否则使用值拼接 */ classList.value.push( - `f-${name}__${isBoolean(propList[key]) ? convertFormat(key) : propList[key]}` + `f-${name}__${ + isBoolean(propList[key]) ? convertFormat(key) : propList[key] + }` ) } } @@ -99,16 +100,18 @@ export const useList: UseListInterface = ( if (propList[key]) { /** * @description 为什么要进行 isNumber 判断？ - * + * * 因为很多属性是同时支持 number 和 staring 类型的参数 - * + * * 所以这里要进行判断，如果是数字类型，则需要使用 sizeChange 方法进行转换标注单位 - * + * * @description convertFormat 方法描述 - * + * * 因为 prop 参数的键都是驼峰命名法，所以这里要转换为短横线连接命名 */ - styleList[`--f-${name}-${convertFormat(key)}`] = isNumber(propList[key]) + styleList[`--f-${name}-${convertFormat(key)}`] = isNumber( + propList[key] + ) ? sizeChange(propList[key] as number) : propList[key] } diff --git a/packages/fighting-design/_hooks/use-list/interface.d.ts b/packages/fighting-design/_hooks/use-list/interface.d.ts index fda8481fe6..5aa563b69b 100644 --- a/packages/fighting-design/_hooks/use-list/interface.d.ts +++ b/packages/fighting-design/_hooks/use-list/interface.d.ts @@ -27,12 +27,15 @@ export interface UseListInterface { /** * 类名列表方法类型接口 - * - * @param list 类名所需要的 prop 参数 + * + * @param list 类名所需要的 prop 参数 * @param className 其它所需要的类名 */ export interface ClassesInterface { - (list: FilterParamsInterface, className?: string): ComputedRef + ( + list: FilterParamsInterface, + className?: string + ): ComputedRef } /** diff --git a/packages/fighting-design/_hooks/use-message/index.ts b/packages/fighting-design/_hooks/use-message/index.ts index ebd0dc7fea..a082d15ed1 100644 --- a/packages/fighting-design/_hooks/use-message/index.ts +++ b/packages/fighting-design/_hooks/use-message/index.ts @@ -74,7 +74,7 @@ export const useMessage: UseMessageInterface = ( id, vm, close: (): void => { - ;( + ( (vm as ComponentInternalInstance).exposed as MessageInstance ).close() }, diff --git a/packages/fighting-design/_utils/utils/interface.d.ts b/packages/fighting-design/_utils/utils/interface.d.ts index ee0ac69c6c..69425cc1e7 100644 --- a/packages/fighting-design/_utils/utils/interface.d.ts +++ b/packages/fighting-design/_utils/utils/interface.d.ts @@ -64,6 +64,17 @@ export interface UtilsIsObjectInterface { (target: unknown): target is Object } +/** + * 检测一个数据是否为 function 类型方法类型接口 + * + * 传入一个未知的类型，返回布尔值 + * + * @param target 未知参数 + */ +export interface UtilsIsFunctionInterface { + (target: unknown): target is Function +} + /** * 检测一个数据是否为 Array 类型方法类型接口 * diff --git a/packages/fighting-design/avatar/src/props.ts b/packages/fighting-design/avatar/src/props.ts index e94fee4e04..fbde5f08ae 100644 --- a/packages/fighting-design/avatar/src/props.ts +++ b/packages/fighting-design/avatar/src/props.ts @@ -1,7 +1,7 @@ import type { PropType, ExtractPropTypes, VNode, Component } from 'vue' import type { AvatarFitType, AvatarSizeType } from './interface' import type { HandleEventInterface } from '../../_interface' -import { isString, isNumber } from 'packages/fighting-design/_utils' +import { isString, isNumber } from '../../_utils' export const Props = { /** diff --git a/packages/fighting-design/button-group/src/interface.d.ts b/packages/fighting-design/button-group/src/interface.d.ts index 12869ffbaa..29740d81f1 100644 --- a/packages/fighting-design/button-group/src/interface.d.ts +++ b/packages/fighting-design/button-group/src/interface.d.ts @@ -3,4 +3,4 @@ export type { ButtonGroupPropsType } from './props' /** * 排列方式 */ -export type ButtonGroupDirectionType = 'horizontal' | 'vertical' +export type ButtonGroupDirectionType = 'horizontal' | 'vertical' diff --git a/packages/fighting-design/button-group/src/props.ts b/packages/fighting-design/button-group/src/props.ts index 43fabe9a50..62857b61c4 100644 --- a/packages/fighting-design/button-group/src/props.ts +++ b/packages/fighting-design/button-group/src/props.ts @@ -18,7 +18,7 @@ export const Props = { }, /** * 排列方向 - * + * * @values horizontal vertical * @defaultValue horizontal */ diff --git a/packages/fighting-design/global.d.ts b/packages/fighting-design/global.d.ts index 7848585893..0bbf44f568 100644 --- a/packages/fighting-design/global.d.ts +++ b/packages/fighting-design/global.d.ts @@ -84,4 +84,4 @@ declare module '@vue/runtime-core' { } } -export { } +export {} diff --git a/packages/fighting-design/menu/src/interface.d.ts b/packages/fighting-design/menu/src/interface.d.ts index 5cb95e2444..8b978557b1 100644 --- a/packages/fighting-design/menu/src/interface.d.ts +++ b/packages/fighting-design/menu/src/interface.d.ts @@ -7,7 +7,7 @@ export type MenuModeType = 'horizontal' | 'vertical' | 'inline' /** * 修改选中 name 回调类型接口 - * + * * @param name 需要设置的 name */ export interface MenuSetActiveNameInterface { @@ -16,7 +16,7 @@ export interface MenuSetActiveNameInterface { /** * 注入的依赖项类型接口 - * + * * @param mode 导航栏模式 * @param defaultActive 默认选中的 name * @param setActiveName 修改选中 name diff --git a/packages/fighting-design/menu/src/props.ts b/packages/fighting-design/menu/src/props.ts index 5b9bd84d70..7076a13393 100644 --- a/packages/fighting-design/menu/src/props.ts +++ b/packages/fighting-design/menu/src/props.ts @@ -4,7 +4,7 @@ import type { MenuModeType } from './interface' export const Props = { /** * 导航栏模式 - * + * * 水平的 垂直的 内联的 * * @values horizontal vertical inline @@ -28,4 +28,5 @@ export const Props = { export type MenuPropsType = ExtractPropTypes -export const MENU_PROVIDE_KEY: InjectionKey = Symbol('menu-provide-key') +export const MENU_PROVIDE_KEY: InjectionKey = + Symbol('menu-provide-key') diff --git a/packages/fighting-design/radio/src/radio.vue b/packages/fighting-design/radio/src/radio.vue index 585bd64caf..1e9ca9a0a5 100644 --- a/packages/fighting-design/radio/src/radio.vue +++ b/packages/fighting-design/radio/src/radio.vue @@ -27,13 +27,13 @@ * 如果父组件有依赖注入则使用 * 否则使用之身 props 参数 */ - get () { + get() { return (INJECT_DEPEND && INJECT_DEPEND.modelValue) || prop.modelValue }, /** * 设置值 */ - set (val) { + set(val) { if (INJECT_DEPEND && !INJECT_DEPEND.disabled) { INJECT_DEPEND.changeEvent(val) return diff --git a/packages/fighting-design/slider/src/drag.ts b/packages/fighting-design/slider/src/drag.ts index 8e3ee67817..65d5bdf4b0 100644 --- a/packages/fighting-design/slider/src/drag.ts +++ b/packages/fighting-design/slider/src/drag.ts @@ -1,6 +1,6 @@ import { isFunction } from 'packages/fighting-design/_utils' -function supportTouch(): boolean { +function supportTouch (): boolean { return !!( 'ontouchstart' in window || (window.navigator && @@ -10,7 +10,7 @@ function supportTouch(): boolean { ) } -function getTouchEvents(): Record { +function getTouchEvents (): Record { const touch = supportTouch() return { touchstart: touch ? 'touchstart' : 'mousedown', @@ -21,7 +21,7 @@ function getTouchEvents(): Record { // ================ const { touchstart, touchmove, touchend } = getTouchEvents() -function getEventXY(e: TouchEvent & MouseEvent): { x: number; y: number } { +function getEventXY (e: TouchEvent & MouseEvent): { x: number; y: number } { const xy = touchstart === 'touchstart' ? { @@ -36,7 +36,7 @@ function getEventXY(e: TouchEvent & MouseEvent): { x: number; y: number } { return xy } -function getTransformXY(dom: HTMLElement): { x: number; y: number } { +function getTransformXY (dom: HTMLElement): { x: number; y: number } { let ntf = [0, 0] const tf = dom.style.transform.match(/([+-\d.]+(?=px))/g) if (tf) ntf = [Number(tf[0]) || 0, Number(tf[1]) || 0] @@ -54,7 +54,7 @@ class Drag { oldPosition = { x: 0, y: 0 } oldEposition = { x: 0, y: 0 } - constructor( + constructor ( target: HTMLElement, callback: ( e: TouchEvent & MouseEvent, @@ -110,7 +110,7 @@ class Drag { } export default { - beforeMount( + beforeMount ( el: HTMLElement, binding: { value: ( diff --git a/packages/fighting-design/tabs/src/utils/index.ts b/packages/fighting-design/tabs/src/utils/index.ts index fa718afbca..61b2a8b8b1 100644 --- a/packages/fighting-design/tabs/src/utils/index.ts +++ b/packages/fighting-design/tabs/src/utils/index.ts @@ -5,7 +5,7 @@ import type { ComponentInternalInstance, Component } from 'vue' -import { isArray, isObject } from 'packages/fighting-design/_utils' +import { isArray, isObject } from '../../../_utils' /** * 将所有子的组件扁平化 @@ -36,7 +36,7 @@ export const flattedChildren = ( * @param root * @param component */ -export function getChildrenComponent( +export function getChildrenComponent ( root: ComponentInternalInstance, component: string ): VNode[] { diff --git a/packages/fighting-design/up-load/src/up-load.vue b/packages/fighting-design/up-load/src/up-load.vue index 6df80771f9..22da2aa462 100644 --- a/packages/fighting-design/up-load/src/up-load.vue +++ b/packages/fighting-design/up-load/src/up-load.vue @@ -89,7 +89,7 @@ * @param index 需要删除的文件索引 */ const removeFile: UpLoadRemoveFileInterface = (index: number): void => { - (fileList.value as File[]).splice(index, 1) + ;(fileList.value as File[]).splice(index, 1) } /** diff --git a/packages/fighting-playground/src/store/index.ts b/packages/fighting-playground/src/store/index.ts index bf30ceeb54..95f9fa36ff 100644 --- a/packages/fighting-playground/src/store/index.ts +++ b/packages/fighting-playground/src/store/index.ts @@ -22,7 +22,7 @@ export class ReplStore implements Store { initialOutputMode: OutputModes = 'preview' private readonly defaultVueRuntimeURL: string - constructor({ + constructor ({ serializedState = '', defaultVueRuntimeURL = `https://unpkg.com/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.js`, showOutput = false, diff --git a/start/src/global.d.ts b/start/src/global.d.ts index 3e4d1f9f13..d8cfb971ae 100644 --- a/start/src/global.d.ts +++ b/start/src/global.d.ts @@ -84,4 +84,4 @@ declare module 'vue' { } } -export { } +export {} diff --git a/start/src/main.ts b/start/src/main.ts index 723c887a66..1e43d2ba6d 100644 --- a/start/src/main.ts +++ b/start/src/main.ts @@ -16,7 +16,4 @@ import '@fighting-design/fighting-theme' // import FightingDesign from '../../dist' // import '../dist/dist/index.css' -createApp(App) - .use(FightingDesign) - .use(router) - .mount('#start') +createApp(App).use(FightingDesign).use(router).mount('#start')