深入认识 vue-cli:能做的不仅仅是初始化 vue 工程

相信对于大部分使用过VueJS的同学来说, 是他们非常熟悉的一个工具。借助 ,我们通过非常简单的问答形式,方便地初始化一个vue工程,完全不需要担心繁复的webpack、eslint配置等等。

但是,仍然有许多同学没有搞清楚 和 之间的关系,导致没有充分发挥 的功能。在这篇文章中,我将从底层原理开始并结合几个例子,告诉大家 还能这样用。

什么是vue-cli

引用vue-cli官方文档的一句话:

A simple CLI for scaffolding Vue.js projects.一个简单的Vue.js工程命令行脚手架工具。

在全局安装vue-cli之后,就可以通过一条命令初始化我们的vue工程:

接下来vue-cli就会按照这个 模板内部的设置,抛出几个问答选项。在回答完问答选项以后,我们的vue工程目录就已经生成好了,接下来只要把依赖安装完,直接就可以跑起来,是不是非常方便呢?

接下来,我们就要看看,这一条命令的背后,究竟发生了一些什么事。

vue-cli初始化项目的原理

从官方文档可以知道,vue-cli使用了download-git-repo这个工具去下载远端git仓库里面的工程,如果加上了 参数,则会在内部运行 ,通过克隆的方式把远端git仓库拉取到本地。明白这一点至关重要:

vue-cli并非从无到有地凭空生成一个项目,而是通过下载/拉取已有的工程到本地,完成生成项目的工作

而这个“已有的工程”,就是所谓的“模板(template)”。

当然,vue-cli可不只是把模板拉取到本地这么简单,它还允许我们通过问答的形式对模板进行个性化配置,这个又是如何做到的呢?

vue-cli使用了inquirer.js实现了“问答环节”,简单来说是这样子的:

然后把这段问题传给inquirer.js就可以了:

在运行的时候,vue-cli会在命令行里面把 和 这两个问题相继抛出,获取用户输入,把输入赋值给 和 变量,这样就能够获取用户的输入信息了。接着我们引出下一个问题,这些用户输入,是如何跟模板的自定义关联起来的呢?

我们打开一个vue-cli的模板,比如webpack-simple里面的README.md,它长这样:

上面使用双括号包裹起来的,最终会根据用户的输入而更改为具体的内容。是不是觉得这种写法很熟悉?其实就是Handlebars的模板语法。

以这个README.md文件为例,在vue-cli运行的过程中,会首先读取文件的内容放在内存,然后通过 获取用户输入,把输入的值替换到文件内容里面,最后通过另外一个名叫Metalsmith的工具,把替换好的内容输出为文件,也就生成了具有个性化内容的README.md文件了。

整个流程并不复杂,在明白这些原理后,我们就能更深入地使用vue-cli了。

Javascript与Java,Vue-cli与Vue

虽然这么类比不太准确,但我想大家也应该能明白我的意思。

简单来说,就是vue-cli不仅仅能初始化vue工程,理论上能够初始化一切工程,包括react,angular等等等等,只要你有一份能够运行的模板,就能够通过vue-cli进行工程的初始化。

在讨论区有许多类似的问题:

“vue-cli当中如何配置sass?”

“vue-cli中如何修改devServer的端口?”

“vue-cli中发现项目跑不起来”

……

vue-cli说:“这锅我不背。”

是的,所遇到的问题都不是vue-cli的问题,而是相关模板的问题。那么应该如何写一份合格的模板呢?下面我们一起来研究一下。

写一份vue-cli模板

参考官方文档,也许还是不能理解到底应该怎么写,那么我们可以直接参考官方例子webpack-simple,看看它到底是怎么写的。

首先可以看到目录结构:

着实是非常简单,其中 就是向用户抛出的问答题, 目录则是真正的模板内容。首先我们来看看 都写了些啥:

可以看到,它一共向用户提了4个问题:

Project name

Project description

Author

Use sass?

接着,我们打开 目录,看看它长什么样:

这就是终将被生成的工程目录。打开里面的 :

结合前文原理里面的内容,也不难理解这个 里面双括号的含义了。

看到这里,是不是已经跃跃欲试,想要写一份属于自己的模板呢?又或者想要打造一款属于自己的命令行脚手架工具?原理都是很简单的,只要按照想法一步步实现即可。

后记

其实在去年早些时候,已经写了两篇脚手架相关的文章:

《教你从零开始搭建一款前端脚手架工具》

好用的项目初始化工具SCION升级啦!

但是发现仍然有许多同学对于vue-cli的理解有些偏差,于是写下这篇文章,聊一聊自己的理解。

觉得本文对你有帮助?请分享给更多人

关注「前端大学」,提升前端技能

本文来自企鹅号 - 程序媛媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

Angular、React、Vue.js等6 大主流 Web 框架都有什么优缺点?

关键时刻,第一时间送达! ? 在这篇文章中,我们将对 6 款主流 Web 框架进行总结,包括我们所认为的强项和弱项。另外,我们为你留下了一些值得思考的问题。 我...

34600
来自专栏IMWeb前端团队

vuejs初上手项目

学习一个框架有两个阶段最难,一个是初期的入门,一个是后期的源码阅读。 虽然vue的官方文档非常棒,在我读完文档之后还是会有一种感觉,知识点我都懂,然后呢?似乎大...

24380
来自专栏西安-晁州

vuex构建笔记本应用学习

vuex:针对vue应用派生的专门管理应用state的工具,state可以理解为我们组件需要操作的data数据,都知道,vue构建spa应用的时候,随着组件规模...

26900
来自专栏西安-晁州

vue.js应用开发笔记

看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项...

57910
来自专栏对角另一面

用vue实现模态框组件

基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是con...

82900
来自专栏西安-晁州

vue.js学习之入门实例

之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue、vue-cli、...

25400
来自专栏IMWeb前端团队

基于vue.js的渐进式组件尝试

我们有个内部运营系统,是基于keenthemes的一个主题进行开发的,而这个主题就是基于jQuery+bootstrap+jQueryPlugins 进行的定制...

257100
来自专栏海说

vue前端页面跳转参数传递及存储

不同页面间进行参数传递,实现方式有很多种,最简单最直接的方式就是在页面跳转时通过路由传递参数,如下所示。 路由传递参数 this.$router.push({ ...

65600
来自专栏对角另一面

vue-lazy-render: 延迟渲染大组件,增强页面切换流畅度

最近用element来做项目,在开发的过程中,突然发现页面的操作和切换在数据量大的时候相当卡,后来提了个issue,在furybean解答后才知道,我每个单元格...

53000
来自专栏对角另一面

vue-auto-focus: 控制自动聚焦行为的 vue 指令

在网页的表单中,经常需要用程序来控制input和textarea的自动聚焦行为。例如我最近做的一个项目,有个装箱出库的流程,input框自动聚焦的流程如下:页面...

44200

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励