# vue3-vite 更新说明

# 项目地址

# 文档

# 使用差异

# 配置文件

vite.config.ts

文档地址 (opens new window)

# 别名@

// vite.config.ts

alias: {
    "/@": resolve("src"),
    "/#": resolve("types"),
}

// "@/views" => "/@/views",以 / 开头

# 页面缓存 keep-alive

开启缓存的页面,需要在对应组件上添加 name,如:

// 页面路径 http://localhost:9000/sys/menu

// 则需要在 menu.vue 上设置:
export default defineComponent({
	name: "sys-menu"
});

// sys/menu => sys-menu 横杆拼接

# Service

// vue2.x
created() {
    // 已挂载到 this 中
    this.$service.system.user.add()
}

// vue3.x
setup() {
    // 使用注入
    const $service = inject<any>("service")
    $service.system.user.add()
}

# cl-admin, cl-admin-crud

引用方式替换

// vue2.x
import { BaseService } from "cl-admin";
import { ContextMenu } from "cl-admin-crud";

// vue3.x
import { BaseService } from "/@/core";
import { ContextMenu } from "/$/crud";

// 模块引入,如 base 模块
import base from "/$/base"; // 映射到 src/cool/modules/base

# Element-plus

// vue2.x
this.$message.success("提示");

// vue3.x
ElMessage.success("提示");

# Ref

import { useRefs } from "/@/core";

setup() {
    const { refs, setRefs } = useRefs();

    onMunted() {
        // 使用
        console.log(refs.value.name)
    }

    return {
        refs,
        setRefs
    }
}
<template>
	<div :ref="setRefs('name')">绑定 ref</div>
</template>

# 静态图片加载

使用该方式引入图片,再绑定到标签上

import Logo from "/@/assets/images/logo.png";
<img :src="Logo" />

# css 穿透问题

/* 无效 */
/deep/ .card {
	color: red;
}

/* 无效 */
:deep(.card) {
	color: red;
}

/* 有效,但会警告 */
::v-deep(.card) {
	color: red;
}

部分场景可以不添加 scoped 来解决

# 主题资源文件

必须使用 element-plus 下载,否则出现样式不兼容问题自定义主题 (opens new window)

# Types

内置说明参数

TIP

vscode 下使用会自动引入, 无需担心路径

# CrudLoad

cl-crud 回调 load 说明

onLoad({ ctx, app }: CrudLoad) {
    ctx.service().done()
    app.refresh()
}

# Form

cl-form 自定义表单参数说明

setup() {
    const options = reactive<Form>({
        title: "自定义表单",
        items: [
            {
                label: "姓名",
                prop: "name"
                component: {
                    name: "el-input"
                }
            }
        ]
    });

    onMounted() {
        // 使用 setRefs 绑定 cl-form
        refs.value.form.open(options);
    }
}
<cl-form :ref="setRefs('form')"></cl-form>

# Upsert

cl-upsert 新增, 编辑配置说明

setup() {
    const upsert = reactive<Upsert>({
        items: [
            {
                label: "姓名",
                prop: "name"
                component: {
                    name: "el-input"
                }
            }
        ]
    });

    return {
        upsert
    }
}
<cl-upsert v-bind="upsert"></cl-upsert>

# Table

cl-table 表格配置说明

setup() {
    const table = reactive<Table>({
        columns: [
            {
                label: "姓名",
                prop: "name"
            }
        ]
    });

    return {
        table
    }
}
<cl-table v-bind="table"></cl-table>

# ContextMenu

cl-context-menu 右键菜单配置说明

import { ContextMenu } from "@/crud";

setup() {
    const list = reactive<ContextMenuItem []>({
        {
            label: "刷新",
            callback: (_: any, done: Function) => {
                done()
            }
        }
    });

    function openCM(e) {
        ContextMenu.open(e, {
            list
        })
    }

    return {
        list,
        openCM
    }
}
<p @contextmenu.stop.prevent="openCM">右键打开</p>