背景
在平时工作中会有遇到许多以相同模板定制的小程序,因此想自己建立一个生成模板的脚手架工具,以模板为基础构建对应的小程序,而平时的小程序都是用mpvue框架来写的,因此首先先参考一下Vue-cli的原理,知道原理之后,再定制自己的模板脚手架肯定是事半功倍的。
<人力资源/>在说代码之前我们首先回顾一下Vue-cli的使用,我们通常使用的是webpack模板包,输入的是以下代码。
vue init webpack(项目名称)复制代码
在执行这段代码之后,系统会自动下载模板包,随后会询问我们一些问题,比如模板名称,作者,是否需要使用eslint,使用npm或者纱进行构建等等,当所有问题我们回答之后,就开始生成脚手架项目。
我们将源码下来,源码仓库点击这里,平时用的脚手架还是2.0版本,要注意,默认的分支是在开发上,开发上是3.0版本。
我们首先看一下包。json在文件当中有这么一段话
{"本":{“vue”:“bin/vue”、“vue-init”:“bin/vue-init”、“vue-list”:“bin/vue-list”
}
}
复制代码 由此可见,我们使用的命令vue init,应该是来自bin/vue-init这个文件,我们接下来看一下这个文件中的内容
<人力资源/>bin/vue-init
const下载=要求(“download-git-repo”) const程序=需要(“指挥官”)常量存在=需要(fs)。existsSyncconst路径需要(“路径”)const ora==需要(“奥拉”)const回家=需要(“户主”)const tildify=需要(“tildify”) const粉笔=需要(“粉笔”)const询问者=需要(“调查者”)const rm=需要(“rimraf”)。syncconst记录器=要求(. ./lib/logger) const生成=要求(“. ./lib/生成”)const checkVersion=要求(. ./lib/check-version) const警告=要求(“. ./lib/警告”)const localPath=要求(“. ./lib/局部路径”) 复制代码
download-git-repo一个用于下载git仓库的项目的模块指挥官可以将文字输出到终端当中fs是节点的文件读写的模块路径模块提供了一些工具函数,用于处理文件与目录的路径奥拉这个模块用于在终端里有显示载入动画户主获取用户主目录的路径tildify将绝对路径转换为波形路径比如/用户/sindresorhus/dev→~/dev询问者是一个命令行的回答的模块,你可以自己设定终端的问题,然后对这些回答给出相应的处理rimraf是一个可以使用UNIX命令rm射频的模块剩下的本地路径的模块其实都是一些工具类,等用到的时候我们再来讲
<人力资源/>//是否为本地路径的方法主要是判断模板路径当中是否存在。”/甤onst isLocalPath=localPath。isLocalPath//获取模板路径的方法如果路径参数是绝对路径则直接返回如果是相对的则根据当前路径拼接const getTemplatePath=localPath.getTemplatePath
复制代码/* *
*使用。
程序*/.usage (' & lt; template-name>(项目名称)”)
.option (“- c,克隆”,“使用git克隆”)
.option(——离线,使用缓存模板)/* *
*帮助。
*/程序。(——帮助,()=比;{
控制台。日志(例子:)
console.log ()
console.log(粉笔。灰色(#创建一个新项目的官员模板”))
控制台。日志(“$ vue init webpack我的项目”)
console.log ()
console.log(粉笔。灰色(#创建一个新项目直接从github模板”))
控制台。日志(vue init用户名/美元回购我的项目)
console.log ()
})/* *
*帮助。
*/函数帮助(){program.parse (process.argv)如果(program.args。长度& lt;1)返回program.help ()
}()帮助
复制代码 这部分代码声明vue init用了法,如果在终端当中输入vue init -帮助或者跟在vue init后面的参数长度小于1,也会输出下面的描述
用法:vue-init & lt; template-name>(项目名称) 选项: - c,克隆使用git克隆 ——离线使用缓存的模板 - h,帮助使用信息输出 例子:#官方模板创建一个新项目 美元vue init webpack我的项目#直接从github模板创建一个新项目 vue init用户名/美元回购我的项目 复制代码<人力资源/>
接下来是一些变量的获取
/* *
*设置。
*///模板路径让模板=程序。args [0] const hasSlash=template.indexOf(“/?在1//项目名称const rawName=程序。args [1] const原地=! rawName | | rawName===薄?//如果不存在项目名称或项目名称输入的”。则的名字取的是当前文件夹的名称常量名称=原地?path.relative (' . ./',process.cwd ()): rawName//输出路径const=路径。解决(rawName | | '。')//是否需要用到git cloneconst克?程序。克隆| |假//tmp为本地模板路径如果是离线状态那么模板路径取本地的const tmp=路径。加入(家,”。vue-templates’,模板。替换(/\/:/g, '——'))如果(program.offline) {
console.log('比;使用缓存的模板在$ {chalk.yellow (tildify (tmp))}”)模板=tmp
}
复制代码Vue-cli原理分析
