模块
目录结构
demo
├──pages // 页面路由
├──views // 视图路由
├──components // 常用组件
├──service // 请求服务
├──directives // 指令
├──static // 静态文件目录
├──store // 状态管理
├──config.ts // 模块配置
└──index.ts // 入口文件
WARNING
约定的目录名称不可修改,但可自行添加或者删除。
目录说明
pages、views
- 页面参与权限控制,所以不主动注册目录下的路由,在通过
菜单列表
中配置注册。
也可配置 cool.route
参数手动注册:
export default defineComponent({
cool: {
route: {
path: "/my/info",
meta: {
label: "个人中心"
}
}
}
});
- 使页面参与路由缓存,配置
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
使用 Pinia 的推荐写法:
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 {};