COOL

模块

目录结构

demo
    ├──pages // 页面路由
    ├──views // 视图路由
    ├──components // 常用组件
    ├──service // 请求服务
    ├──directives // 指令
    ├──static // 静态文件目录
    ├──store // 状态管理
    ├──config.ts // 模块配置
    └──index.ts // 入口文件

WARNING

约定的目录名称不可修改，但可自行添加或者删除。

目录说明

pages、views

  1. 页面参与权限控制，所以不主动注册目录下的路由，在通过 菜单列表 中配置注册。

也可配置 cool.route 参数手动注册：

export default defineComponent({
	cool: {
		route: {
			path: "/my/info",
			meta: {
				label: "个人中心"
			}
		}
	}
});
  1. 使页面参与路由缓存，配置 name 参数
export default defineComponent({
	name: "my-info" // 对应匹配地址 /my/info
});

components

目录下的组件，name 以 cl- 命名开头的都会被全局注册，或者配置 cool.global 全局注册。

export default defineComponent({
	name: "cl-input",

	cool: {
		global: true
	}
});

service

目录下的文件，都会以 Service 装饰器的路径参数解析成对象结构合并在 service 中。

import { Service, BaseService } from "/@/cool";

@Service("demo/test")
class Test extends BaseService {
	t1() {
		return this.request({
			url: "t1"
		});
	}
}

使用：

const { service } = useCool();

service.demo.test.t1();

directives

directives 会以目录下的文件名分别注册指令

// demo/directives/test.ts
export default {
	inserted(el, binding) {}
};

使用

<div v-test></div>

store

使用 Piniaopen in new window 的推荐写法：

import { defineStore } from "pinia";
import { ref } from "vue";

export const useTestStore = defineStore("test", function () {
	const count = ref<number>(0);

	function add() {
		count.value += 1;
	}

	return {
		count,
		add
	};
});

使用

import { useTestStore } from "/$/demo/store";

const test = useTestStore();

test.add();

console.log(test.count); // 1

config.ts

该模块支持外部的配置，如：

export default {
	// 尺寸
	size: 120,
	// 显示文案
	text: "选择文件",
	// 限制
	limit: {
		// 上传最大数量
		upload: 9,
		// 文件空间选择数
		select: 9,
		// 上传大小限制
		size: 100
	}
};

index.ts

该模块需要对外开放的变量及方法

export default {};
Last Updated: