# 前端 vue 模块开发

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

# 目录结构

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

/src/cool/modules
└── demo                        // 模块名
    ├── components              // 自定义子组件
    ├── directives              // 自定义指令
    ├── filters                 // 过滤器
    ├── pages                   // 页面路由
    ├── service                 // 请求服务
    ├── static                  // 静态文件
    ├── store                   // vuex 缓存
    ├── views                   // 视图路由
    ├── utils                   // 工具方法
    ├── config.js               // 模块配置参数
    └── index.js                // 作为其他模块引入的入口

# 创建模块

安装 cl-admin-cli 脚手架:

npm install cl-admin-cli -g

创建模块:

cl create name

# 模块约定

# components 自定义子组件

└── components
    ├── avatar.vue
    └── level.vue
  • cl- 开头的组件名会被全局注册,或者配置参数:
export default defineComponent({
	cool: {
		global: true // 全局注册
	}
});
  • 不全局注册下,也可以通过 @/cool/moduless/demo/components/avatar.vue 或者 $/demo/components/avatar.vue 局部引入

# directives 自定义指令

└── directives
    └── test.js
// directives/test.js

export default {
	inserted(el, binding, vnode) {}
};

注册后,即可使用 v-test 指令

# filters 过滤器

└── filters
    └── default_avatar.js
// filters/default_avatar.js

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

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

# pages 页面路由

└── pages
    └── login.vue
// pages/login.vue

export default defineComponent({
	cool: {
		// 注入页面路由中
		route: {
			path: "/login", // 路由地址
			meta: {
				label: "登录" // 路由名称
			}
		}
	}
});

配置后浏览器 http://localhost:9000/login 可直接访问。

# views 视图路由

└── views
    └── recharge.vue
// views/recharge.vue

export default defineComponent({
	cool: {
		// 注入视图路由中
		route: {
			path: "/recharge", // 路由地址
			meta: {
				keepAlive: true, // 是否缓存路由
				label: "充值中心" // 路由名称
			}
		}
	}
});

会直接添加到 / 子路由列表中,即浏览器 http://localhost:9000/recharge 可直接访问。

# service 请求服务

└── goods // 模块
    └── service // 服务
		└── user.js
// service/user.js

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

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

export default SysUser;

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

提示

$service 的结构会根据你的 模块名 + service目录层级 来拼接

# store 缓存

└── store
    └── user.js
// store/user.js

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

提示

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

# config.js 配置

config.js 导出的参数会被缓存到模块中,使用方法如下:

computed: {
	...mapGetters(['modules'])
}

created() {
	console.log(this.modules['模块名'].options)
}

# 使用 npm 模块

提示

  • 设计模块的时候尽可能的面向所有的上层框架场景,所以我们尽可能只依赖 cl-admin
// npm
import Crud from "cl-admin-crud";

export default {
	modules: [
		// npm模块,value 必须是模块导出实例
		{
			name: "crud", // 模块名
			value: Crud, // 模块实例
			options: {} // 额外参数
		}
	]
};