Vue2在实际项目中的应用——命名规范概览

vue的官方网站现在有了一个风格指南（https://cn.vuejs.org/v2/style-guide/），当时写这个项目的时候，这个指南还不是很完整，所以项目并没有完全遵循这个指南。指南终究是指南，也没必要完全遵循，只要项目组内大家根据使用习惯达成一致就行。

目录命名：一般以小写+中划线命名，比较易读

文件命名：项目中采取了和目录命名基本一致的规则，但是会加一个表示不同组件的后缀。比如service文件会以.service.js结尾；路由文件会以.router.js结尾，工具类文件会以.utils.js结尾。普通文件就是.vue结尾了。当然，现在有的规范推荐组件类文件以大写英文命名，比如ToDo.vue，ToDoItem.vue等。个人觉得大写英文没有小写英文+中划线易读，所以更喜欢后者的命名方式。

组件命名：

组件内name的命名基本遵循通用的规范，其实这个name也没啥用，因为用export default导出的组件，在import时候可以比较容易重命名，但是对于代码维护来说，有个name还是比较好。

拦截器命名：

服务命名：

指令命名：

工具类命名：

总结：这些其它辅助组件还是不要用export default为好，这样可以一定程度上限制import时候随意起名，导致代码很难统一维护。上面的工具类其实写法不是很好，采用了export default方式。同时export的对象最好以相应的组件类型为后缀，比如Hook，Srv等

 

还有一点，通用组件类，需要一个前缀，比如像element-ui的前缀就是el，所有组件在模板html中都是以el打头，这是一个很好的模式。

看一下library项目的index.js文件里如何处理

const components = [
	LayoutContent,
	LayoutFooter,
	LayoutHeader,
	LayoutMenu,
	TableList,
	。。。
	UncheckedRadio,
	TriStateCheckbox,
	MessageList,
	RichText
];

const LIB_PREFIX = 'Dpp';
const install = function (Vue, opts = {}) {
	components.map(component => {
		Vue.component(LIB_PREFIX + component.name, component);
	});
};

这样在平台端导入library时候，使用Vue.use方式，就自动加上了前缀，可以直接在模板中使用了。