dxrfx-components v0.1.1

恒力后台系统前端统一框架(vite 版)

技术栈

vue 全家桶 + typescript + element Ui + less

编辑器插件

Prettier：安装后 .prettierrc 文件配置的代码格式化才会生效

VS code 安装：扩展 > 搜索 “Prettier” 插件。 VS code 设置保存文件时自动格式化： 1.文件>首选项>设置 ，搜索 "editor default formatter" 下拉框选中"Prettier" 2.文件>首选项>设置 ，搜索 "format on save",勾选 "format on save" Webstorm 安装：setting > plugins 搜索 “Prettier” 插件

插件

vuex-class vue-property-decorator

quill （富文本编辑器）

其他

动态菜单配置说明 vue 中 tsx 的用法 前端规范

框架使用注意事项

/src/components 下的所有组件不再作为全局组件引入，需手动引入

使用说明

• 路由懒加载

路由懒加载的方式跟原来 vue-cli(即 webpack)的使用方式不一样

参考 Vite 的 Glob 导入 框架内也封装好 src\router\model\index.ts 文件中有getComponent 方法

使用如下（src\router\index.ts）

const routes: Array<RouteConfig> = [
    {
        path: '/',
        name: 'login',
        component: getComponent(ERouteName.LOGIN),
    },
    {
        path: '/index',
        name: 'index',
        meta: { title: '首页', noCache: true },
        component: getComponent(ERouteName.INDEX),
        children: [],
    },
]

• ref 用法

import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import { Ref } from 'vue-property-decorator'
import hTable from '@/components/hTable'
@Component({
    components: {
        hTable,
    },
})
export default class HTable extends Vue {
    @Ref() readonly myRef!: HTMLDivElement //这里的只读myRef与render中的ref保持一致
    @Ref() readonly myTableRef!: hTable //如果是组件，也可以直接使用组件来定义ref

    mounted() {
        console.log(this.myRef) //直接使用
        this.myTableRef.expandAll() //可以直接使用组件内的方法
    }

    render() {
        return (
            <div>
                <div ref="myRef">哈哈哈</div>
                <hTable ref="myTableRef" />
            </div>
        )
    }
}

• 请求接口后，解构的对象怎么定义 interface

const { data }: { data: any } = await AuthService.getUserClient() //any 替换为对应的interface

• less 文件中使用图片路径变量

.login {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('@{IMG_URL}/logo.png'); // IMG_URL这个变量为全局封装的处理图片地址。如果环境变量中配置了VITE_APP_MINIO变量，则取对应的minio地址；否则为项目目录 /src/assets 目录
    background-repeat: no-repeat;
}

• tsx 文件中使用图片路径变量

<img src={this.$getMinioUrl('logo.png')} /> // 或者 import { getMinioUrl } from '@/utils' 后再使用

• 自定义装饰器 用法（防抖、节流）

import { Debounce, Throttle } from '@/decorators'
@Component({
    components: {},
})
export default class TestComponent extends Vue {
    mounted() {
        console.log(this.myRef) //直接使用
    }

    @Debounce()
    testClick() {
        console.log('默认1秒后输出')
    }

    render() {
        return <div onClick={this.testClick}>点击延迟一秒后执行</div>
    }
}

• 多个 chunk 打包合并到一个 chunk 中 在 vite.config.ts 的 build 属性中添加 rollupOptions

build: {
    sourcemap: mode !== 'production',
    rollupOptions: {
        output: {
            manualChunks: {
                // 指定合并打包后的 chuank 名，值为路由页面对应的地址
                test: [
                    '/src/views/index/index.tsx',
                    '/src/views/login/login.tsx',
                ],
            },
        },
    },
},