前言:本文章主要是介绍一下如何将vue官方webpack模板加入一些简单的bootstarp风格组件,vuex,mixins和vee-validate等组装成自定义模板供所有开发者使用(使用git subtree进行管理)。
现在你也可以像使用官方webpack模板一样使用两行命令就能使用我的自定义模板:

一、创建自定义vue-cli模板。
项目的目录结构如下,关于项目的建立以及完善在这里就不多做赘述了,其中global/mixins.js,store/index.js,validators/是自己添加的模块。在这里我们姑且叫这个项目为LB-vue-cli-template,我们将其推送到github上进行管理。

二、建立可供开发者使用的模板项目
在这里不得不说一下为什么不直接用上一个LB-vue-cli-template而是又建立一个可供开发者使用的项目。使用过官方webpack模板的朋友都知道我们可以直接使用vue init webpack这条命令,但是殊不知这行命令执行之后的操作流程是从名为webpack的git项目上直接下载该项目template文件夹下的内容到我们本地,从而提供给我们使用的。所以在这里我是创建了一个LB-vue-cli的项目,其中template的内容即是LB-vue-cli-template。
三、使用git subtree管理子项目
如果有的朋友想完善该模板的组件库的话,并不需要对主项目fork,而只是需要将LB-vue-cli-template的项目fork下来进行完善。
这里就牵扯到一个子模块管理的难题了,说是难题也不准确,毕竟现在有很多子模块管理的方法,就拿git来说,git submodule和git subtree。在这里我选择git subtree,简单!相比较gitsubmodule而言,我在主项目里看到的子项目就是一个文件夹而已,并不需要我操心子项目是否有改变,除非我有需要。
git subtree 常用命令:
1.首先必须确保子项目已经添加这个主项目的remote:

2.将子项目添加到主项目的某个文件夹里

3.主项目更新子项目代码的方法:

4.主项目提交子项目代码的方法:

道行尚浅,如有错误请多多指教
git项目地址:github.com/ladybirdDEV/LB-Vue-cli
网友评论