作为一个菜鸟,我有一颗好奇的心,每当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-installpm-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 used
if (!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'].latest
const localVersion = packageConfig.version
if (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 git@github.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 Metalsmith's 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,只能凭感觉来写了,估计预览起来会很难看,希望大家见谅。

最后吟诗一首:

“众鸟高飞尽,孤云独去闲。相看两不厌,只有敬亭山。”

vue-cli@2的原理解析的更多相关文章

  1. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  2. 对Vue中的MVVM原理解析和实现

    对Vue中的MVVM原理解析和实现 首先你对Vue需要有一定的了解,知道MVVM.这样才能更有助于你顺利的完成下面原理的阅读学习和编写 下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章 ...

  3. vue的双向绑定原理解析(vue项目重构二)

    现在的前端框架 如果没有个数据的双向/单向绑定,都不好意思说是一个新的框架,至于为什么需要这个功能,从jq或者原生js开始做项目的前端工作者,应该是深有体会. 以下也是个人对vue的双向绑定原理的一些 ...

  4. vue.js响应式原理解析与实现—实现v-model与{{}}指令

    上一节我们已经分析了vue.js是通过Object.defineProperty以及发布订阅模式来进行数据劫持和监听,并且实现了一个简单的demo.今天,我们就基于上一节的代码,来实现一个MVVM类, ...

  5. 深入解析vue.js响应式原理与实现

    vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...

  6. vue响应式原理解析

    # Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...

  7. 「进阶篇」Vue Router 核心原理解析

    前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...

  8. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  9. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  10. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

随机推荐

  1. python 3 爬取某小说网站小说,注释详细

    目标:每一个小说保存成一个txt文件 思路:获取每个小说地址(图一),进入后获取每章节地址(图二),然后进入获取该章节内容(图三)保存文件中.循环 效果图: 每一行都有注释,不多解释了 import ...

  2. UWB DWM1000 智能跟踪小车 --[蓝点无限]

    蓝点DWM1000 模块已经打样测试完毕,有兴趣的可以申请购买了,更多信息参见 蓝点论坛 UWB 智能跟踪小车:一共三个UWB模块,手持一个,小车上两个. 通过测量小车上两个模块与手持模块之间的距离, ...

  3. DWM1000 定位上位机软件 以及 源码下载

    蓝点DWM1000 模块已经打样测试完毕,有兴趣的可以申请购买了,更多信息参见 蓝点论坛 正文: 经过一段学习,今天终于将定位软件编译成功,简单修改,可以正确读取串口的数据了. 主要修改点: 1 官方 ...

  4. XVIII Open Cup named after E.V. Pankratiev. Eastern Grand Prix

    A. Artifacts 建立语法分析树,首先根据上下界判断是否有解,然后将所有数按下界填充,线段树判断是否存在和超过$K$的子区间. B. Brackets and Dots 最优解中一定包含一对中 ...

  5. bootstrap_栅格系统_响应式工具_源码分析

    -----------------------------------------------------------------------------margin 为负 ​使盒子重叠 ​等高 等高 ...

  6. css样式兼容各个浏览器时的部分总结

    [本文基本是在网络转发过来的,网站就忘记了,这文本都是保存在自己电脑本地的,还有些自己添加了些内容,这内容还会有不断的完善和更行的] 什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 ...

  7. Axure软件界面及元件

    Axure 软件的需求史 功能:用来制作快速原型的软件.也可以绘制中保真原型草图. (适用人群:产品经理,交互设计师,UI设计师,网页设计师, 想要自己提升的人[重]) 原型分类: 低保真原型(草图) ...

  8. scheduling while atomic和bad: scheduling from the idle thread(转)

    https://blog.csdn.net/shanzhizi/article/details/22949121 https://blog.csdn.net/wwwtovvv/article/deta ...

  9. 报文分析5、UDP协议的头结构

    UDP协议的头结构 源端口(2字节) 目的端口(2字节) 封报长度(2字节) 校验和(2字节) 数据 (1)源端口(Source Port):16位的源端口域包含初始化通信的端口号.源端口和IP地址的 ...

  10. 使用openSSL开源工具进行SSL/TLS 安全测试

    本文介绍了使用半自动化工具执行SSL&TLS安全性评估的过程,以及如何使用手动及工具的测试方法验证并发现问题.目的是优化TLS和SSL安全测试流程,帮助信息安全顾问在渗透测试时在TLS / S ...