# 前端 vue 模块开发

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

# 目录结构

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

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

/src/cool/modules
└── demo                        // 模块名
    ├── components              // 自定义子组件
    ├── directives              // 自定义指令
    ├── filters                 // 过滤器
    ├── pages                   // 页面路由
    ├── service                 // 请求服务
    ├── static                  // 静态文件
    ├── store                   // vuex 缓存
    ├── views                   // 视图路由
    ├── utils                   // 工具方法
    └── 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-testv-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 [
	{
		path: "/recharge", // 路由地址
		component: () => import("./recharge.vue"), // 路由组件
		meta: {
			keepAlive: true, // 是否缓存路由
			label: "充值中心" // 路由名称
		}
	}
];

导出的路由列表会直接添加到 / 子路由列表中,即浏览器 http://localhost:9000/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

// npm
import Crud from "cl-admin-crud";

export default {
	modules: [
		// 本地模块,只要 模块名称 与 modules/模块名称 一致即会自动导入
		"base",
		// npm模块,value 必须是模块导出实例
		{
			name: "crud", // 模块名
			value: Crud, // 模块实例
			options: {}, // 额外参数
			enable: true // 是否开启
		}
	]
};