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

我相信vue-cli对于大多数使用过VueJS的学生来说是一个熟悉的工具。借助vue-cli，我们可以很容易地用一个非常简单的问答形式初始化一个vue项目，而不用担心复杂的webpack、eslint配置等等。

然而，仍然有许多学生不理解vue-cli和vue工程之间的关系，导致vue-cli的功能没有得到充分发挥。在本文中，我将从基本原理开始，并结合几个例子告诉大家，vue-cli仍然可以以这种方式使用。

什么是vue-cli

引用vue-cli官方文件:

一个简单的脚手架Vue.js项目的CLI。vue.js项目的简单命令行脚手架工具。

在全局安装vue-cli后，我们可以用一个命令初始化我们的vue项目:

vue init <。模板名称>。& lt项目名称>;

然后vue-cli会跟着这个

接下来，我们将看看这个命令背后发生了什么。

vue-cli初始化项目原理

根据官方文档，vue-cli使用download-git-repo工具在远程git仓库下载项目。如果添加- clone参数，git clone将在内部运行，远程git仓库将通过克隆被拉到本地。理解这一点至关重要:

Vue-cli不通过空从头生成项目，而是通过将现有项目下载/拉到本地来完成项目生成。

而这个“现有项目”就是所谓的“模板”。

当然，vue-cli不仅仅是把模板拉到本地这么简单，它还允许我们通过问答来个性化模板。这是怎么做到的？

Vue-cli使用inquirer.js实现“问答会话”，简单如下:

//准备几个问题

constquestions = [

{

类型:“输入”，

姓名:“姓名”，

信息:‘你叫什么名字？’

},

{

类型:“输入”，

姓名:'年龄'，

留言:“你多大了？”,

}

]

然后把这个问题传给inquirer.js:

inquirer.prompt(问题)。然后(({姓名，年龄}) = >{

console.log(`Myname为${name}，我${age}岁`)

})

运行时，vue-cli会把你叫什么名字？你多大了？这两个问题一个接一个抛出，得到用户输入，输入赋给姓名和年龄变量，就可以得到用户输入信息。然后我们进入下一个问题，这些用户输入与模板的定制有什么关系？

让我们打开一个vue-cli模板，比如webpack-simple中的README.md，如下所示:

# {{ name }}

>。{{ deion }}

用双括号包装，最终会根据用户的输入变成具体的内容。你觉得这种写法熟悉吗？其实就是车把的模板语法。

以这个README.md文件为例，在vue-cli运行过程中，首先会读取文件内容并存储在内存中，然后通过inquirer.js获取用户输入，并将输入值替换为文件内容。最后，被替换的内容将通过另一个名为Metalsmith的工具输出为文件，生成具有个性化内容的README.md文件。

整个过程并不复杂。了解了这些原理之后，就可以更深入的使用vue-cli了。

Java和Java，Vue-cli和Vue

虽然这个类比不准确，但我想大家应该明白我的意思。

简单来说，vue-cli不仅可以初始化vue项目，理论上也可以初始化所有项目，包括react、angular等等。只要有一个工作模板，就可以通过vue-cli初始化项目。

讨论区有很多类似的问题:

"如何在命令行界面中配置动态口令？"

"如何在命令行界面中修改开发服务器的端口？"

" vue-cli发现项目无法运行"

……

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

是的，遇到的问题都不是vue-cli的问题，而是相关的模板。那么应该怎么写一个合格的模板呢？大家一起研究一下。

编写一个vue-cli模板

参考官方文档，我们可能还不明白怎么写，可以直接参考官方例子webpack-simple看看怎么写。

首先，您可以看到目录结构:

真的很简单，其中meta.json是抛给用户的问答，/template目录才是真正的模板内容。首先，让我们看看meta.json写了什么:

{

"提示":{

" name": {

" type": "string "/>

这是最终将生成的项目目录。打开里面的package.json:

{

" name ":{ { name } } "，

" deion ":{ { deion } } "，

“版本”:“1.0.0”，

"作者":{{ author }} "，

“私人”:没错，

" s": {

“dev”:“cross-ENV NODE _ ENV = development web pack-dev-server-open-hot”，

" build ":" cross-ENV NODE _ ENV = production web pack-progress-hide-modules "

},

"依赖项":{

“vue”:“^2.4.4”

},

" devDependencies": {

“巴别塔-核心”:“^6.26.0”，

“巴别塔装载机”:“^7.1.2”，

“巴别塔-预置-环境”:“^1.6.0”，

“跨环境”:“^5.0.5”，

“CSS-loader”:“^0.28.7”，

“文件加载器”:“^1.1.4”，

{{#sass}}

“节点萨斯”:“^4.5.3”，

“野蛮装卸者”:“^6.0.6”，

{{/sass}}

“真空装载机”:“^13.0.5”，

“vue-template-compiler”:“^2.4.4”，

“网络包”:“^3.6.0”，

“网络包-开发-服务器”:“^2.9.1”

}

}

结合前面原理的内容，不难理解这个package.json中双括号的含义

看到这里，你是不是急于自己写一个模板？还是想自己搭建命令行脚手架工具？原理很简单，只要想法一步一步实现。

附笔

教你从头开始搭建前端脚手架工具

简单易用的项目初始化工具SCION已经升级了！

但是发现很多同学对vue-cli的理解还是有些偏差，所以我写了这篇文章，讲了自己的理解。

Vue组件开发练习-焦点图切换

一套Vue单页模板:N3-管理员

vuejs开发的H5页面摘要

Webpack 3，从入门到放弃

轻松开始使用React和Webpack

主要覆盖范围

从一个简单的例子理解webpack

输入文件和输出文件

理解网络包加载器和网络包插件

打包路径的相关问题

web pack-dev-服务器配置简介

3.文件配置方案

优化网络包的包装性能

学会写vue-loader

学会写一个vue插件