外贸谷歌网站推广,上海seo优化公司 kinglink,长沙3合1网站建设电话,千万不要去电商公司上班作为一个菜鸟#xff0c;我有一颗好奇的心#xff0c;每当vue init 的时候#xff0c;看到那流畅的进度和神奇的结果#xff0c;心里都充满一窥其本质的期望…… 以下就是我不断的console#xff0c;大致理出来的一个流程心得#xff0c;纪录在此#xff0c;以作备忘。 … 作为一个菜鸟我有一颗好奇的心每当vue init 的时候看到那流畅的进度和神奇的结果心里都充满一窥其本质的期望…… 以下就是我不断的console大致理出来的一个流程心得纪录在此以作备忘。 1、which vue定位vue命令的实际位置 2、去往命令vue的目录查看代码 这里的commander包是用来创建命令行的工具其npm官网粗略了解了解到其中的init、list命令会在当前目录寻找执行vue-init、vue-list文件 The commander will try to search the executables in the directory of the entry script (like ./examples/pm) with the name program-command, like pm-install, pm-search. 3、查看vue-init文件及其代码 通过ls命令我们可以看到命令文件的真实位置是在全局node_modules下的vue-cli里面所以代码里的require包都是从vue-cli包下找的 这个文件就是init命令的主体了里面主要有 download-git-repo、inquirer等包 和 cli/lib下的功能函数 check-version、generate等 3.1、check-version 的作用 首先其会比对vue-cli的package.json里的node版本和当前process.version的环境版本如果环境版本低就会报错。 其次其会请求线上vue-cli的最新版本来告诉用户是否有新的vue-cli版本可以更新只是给用户一个提示 const request require(request)
const semver require(semver)
const chalk require(chalk)
const packageConfig require(../package.json)module.exports done {// Ensure minimum supported node version is usedif (!semver.satisfies(process.version, packageConfig.engines.node)) {return console.log(chalk.red( You must upgrade node to packageConfig.engines.node .x to use vue-cli))}request({url: https://registry.npmjs.org/vue-cli,timeout: 1000}, (err, res, body) {if (!err res.statusCode 200) {const latestVersion JSON.parse(body)[dist-tags].latestconst localVersion packageConfig.versionif (semver.lt(localVersion, latestVersion)) {console.log(chalk.yellow( A newer version of vue-cli is available.))console.log()console.log( latest: chalk.green(latestVersion))console.log( installed: chalk.red(localVersion))console.log()}}done()})
}3.2 、download-git-repo的作用 用来通过git clone 或者 http下载的方式从github、gitlab等平台下载仓库代码具体可去官网查看 默认我们没有指定clone参数程序会从 https://github.com/vuejs-templates/webpack/archive/master.zip 下载模版 如果用 vue init webpack -c 则会通过 git clone gitgithub.com:vuejs-templates/webpack.git 来下载(本地配置sshkey可以下载私有库) tmp变量是临时存放模版的目录默认在 ~/.vue-templates/ const tmp path.join(home, .vue-templates, template.replace(/[\/:]/g, -))
……
download(template, tmp, { clone }, err {spinner.stop()if (err) logger.fatal(Failed to download repo template : err.message.trim())generate(name, tmp, to, err {if (err) logger.fatal(err)logger.success(Generated %s., name)})
})如果我们要配置自己项目的模版目录就好好看看vue-init文件里的run函数吧 ^_^祝你成功^_^。 3.3、inquirer的作用 起到一个prompt confirm的作用 Generate project in current directory? Target directory exists. Continue? 3.4、generate函数的作用 主要代码 metalsmith.clean(false).source(.) // start from template root instead of ./src which is Metalsmiths default for source.destination(dest).build((err, files) {done(err)if (typeof opts.complete function) {const helpers { chalk, logger, files }opts.complete(data, helpers)} else {logMessage(opts.completeMessage, data)}})下载完模版后的处理逻辑都在这里面了函数文件位于 vue-cli/lib/generate.js这里面主要用了 metalsmith、handlebars等包 和 lib/options.js options.js 会去 ~/.vue-templates/模版 目录下获取 meta.js 或者 meta.json 中的配置。 这个配置就是用来配置图中的东西。 3.4.1、metalsmith 的作用 类似于gulp是一个流程工具英文不好我看它看的头疼只知道它干了什么但不知道它是怎么做的。 它会配置options.js里获取的配置数据对模版文件进行过滤 3.4.2、handlebars 的作用 一个js模版工具类似服务端的smarty、前端的artemplate、es6的字符串模版等。 它会在metalsmith的流程里处理模版里的变量把我们填写的项目名等数据渲染成最终的文件写进当前项目目录里。《完》 很久没写博客写着好别扭啊不支持markdown只能凭感觉来写了估计预览起来会很难看希望大家见谅。 最后吟诗一首 “众鸟高飞尽孤云独去闲。相看两不厌只有敬亭山。” 转载于:https://www.cnblogs.com/wshiqtb/p/10697804.html
