cool-admin 模块开发

前端 vue 模块开发

模块的本质是一堆代码复用的集合，你可以将复用的业务代码，或者功能模块都放到模块中进行维护。

目录结构

模块的目录结构没有特别明确的规范，导出参数保持一致即可。

推荐的模块目录结构如下：

.
└── demo                        // 模块名
    ├── components              // 自定义子组件
    ├── directives              // 自定义指令
    ├── filters                 // 过滤器
    ├── pages                   // 页面路由
    ├── service                 // 请求服务
    ├── static                  // 静态文件
    ├── store                   // vuex 缓存
    ├── views                   // 视图路由
    ├── utils                   // 工具方法
    ├── node_modules            // 依赖包
    ├── package.json            // 描述文件
    └── index.js                // 入口导出文件

创建模块

安装 cl-admin-cli 脚手架：

npm install cl-admin-cli -g

创建模块：

cl create name

模块约定

components 自定义子组件

└── components
    ├── avatar.vue
    ├── level.vue
    └── index.js

// components/index.js

import Avatar from "./avatar.vue";
import Level from "./level.vue";

export default {
	Avatar,
	Level
};

• 导出的组件会根据 name 全局注册

• 也可以通过 cool/moduless/demo/components/avatar.vue 局部引入

directives 自定义指令

└── directives
    └── index.js

// directives/index.js

export default {
	test: {
		inserted(el, binding, vnode) {}
	},
	copy: {
		bind(el, binding, vnode) {}
	}
};

注册后，即可使用 v-test 、v-copy 指令

filters 过滤器

└── filters
    └── index.js

// filters/index.js

export default {
	default_avatar(url) {
		return url ? url : require("../static/avatar.png");
	}
};

注册后，即可使用 default_avatar 过滤器

pages 页面路由

└── pages
    ├── login.vue
    └── index.js

// pages/index.js

export default [
	{
		path: "/login",
		component: () => import("./login.vue")
	}
];

注册的路由会直接添加到路由列表中，即浏览器 http://localhost:9000/login 可直接访问。

views 视图路由

└── views
    ├── recharge.vue
    └── index.js

// views/index.js

export default [
	{
		moduleName: "recharge", // 模块名
		label: "充值中心", // 路由名称
		path: "/recharge", // 路由地址
		component: () => import("./recharge.vue"), // 路由组件
		keepAlive: true, // 是否缓存路由
		icon: "icon-menu" // svg 图标
	}
];

• 带有 moduleName 参数的路由，会被缓存起来，用于动态路由的匹配
• 不带 moduleName 参数的路由，会直接添加到路由列表中，则可直接访问 /recharge

service 请求服务

└── service
    ├── user.js
    └── index.js

// service/user.js

import { BaseService, Service } from "cl-admin";

@Service("sys/user")
class SysUser extends BaseService {}

export default SysUser;

// service/index.js

import SysUser from "./user";

export default {
	// 对象层级、结构没有限制，可自由扩展
	system: {
		user: new SysUser()
	}
};

注册后，即可使用 this.$service.system.user.{add|update|save|page|list|info} 调用接口

注册的 service 结构重复时，前者会被覆盖！！

store 缓存

└── store
    ├── user.js
    └── index.js

// store/user.js

export default {
	state: {
		info: null
	},
	getters: {
		userInfo: state => state.info
	},
	actions: {},
	mutations: {}
};

// store/index.js

import user from "./user";

export default {
	user
};

系统注册 vuex 模块时，会以 模块名-缓存模块名 的方式命名。建议直接使用 getters 的方式获取值

index.js 入口导出文件

import components from "./components";
import filters from "./filters";
import pages from "./pages";
import views from "./views";
import store from "./store";
import service from "./service";
import directives from "./directives";

// 导出配置方式 1
export default {
	components,
	filters,
	pages,
	views,
	store,
	service,
	directives
};

// 导出配置方式 2，与 vue 插件注册方式一致
export default {
	install(Vue, options) {
		return {
			components,
			filters,
			pages,
			views,
			store,
			service,
			directives
		};
	}
};

// 自定义方法
function checkPerm() {}

// 自定义参数
const info = {
	version: "1.0.0",
	author: "icssoa"
};

// 导出自定义
export { checkPerm, info };

调用模块

• 调用模块导出的参数可使用：

import { 参数名 } from "cool/modules/模块名";

• 调用模块全局配置参数：

import { mapGetters } from "vuex";

export default {
	computed: {
		...mapGetters(["modules"])
	},

	mounted() {
		console.log(this.modules["模块名"].options);
	}
};

使用模块

• 模块可以本地加载，也可以加载一个 npm 包。

• 设计模块的时候尽可能的面向所有的上层框架场景，所以我们尽可能只依赖 cl-admin。

// cool/index.js

// 本地模块
import Base from "./modules/base";
// npm
import Crud from "cl-admin-crud";

export default {
	modules: [
		// 方式1
		["base", Base],
		// 方式2
		{
			name: "crud", // 模块名
			value: Crud, // 模块实例
			options: {}, // 额外参数
			enable: true // 是否开启
		}
	]
};