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

栏目: JavaScript · 发布时间: 5年前

内容简介:写于 2017.10.20相信对于大部分使用过VueJS的同学来说,但是,仍然有许多同学没有搞清楚

写于 2017.10.20

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

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

什么是vue-cli

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

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

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

vue init <template-name> <project-name>
复制代码

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

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

vue-cli初始化项目的原理

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

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

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

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

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

// 准备几个问题

const questions = [
  {
    type: 'input',
    name: 'name',
    message: 'What's your name?'
  },
  {
    type: 'input',
    name: 'age',
    message: 'How old are you?',
  }
]
复制代码

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

inquirer.prompt(questions).then(({ name, age }) => {
  console.log(`My name is ${name}, and I'm ${age} years old`)
})
复制代码

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

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

# {{ name }}

> {{ description }}
复制代码

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

以这个README.md文件为例,在vue-cli运行的过程中,会首先读取文件的内容放在内存,然后通过 inquirer.js 获取用户输入,把输入的值替换到文件内容里面,最后通过另外一个名叫 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 ,看看它到底是怎么写的。

首先可以看到目录结构:

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

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

{
  "prompts": {
    "name": {
      "type": "string",
      "required": true,
      "label": "Project name"
    },
    "description": {
      "type": "string",
      "required": true,
      "label": "Project description",
      "default": "A Vue.js project"
    },
    "author": {
      "type": "string",
      "label": "Author"
    },
    "sass": {
       "type": "confirm",
       "message": "Use sass?",
       "default": false
    }
  },
  "completeMessage": "{{#inPlace}}To get started:\n\n  npm install\n  npm run dev.{{else}}To get started:\n\n  cd {{destDirName}}\n  npm install\n  npm run dev.{{/inPlace}}"
}
复制代码

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

  • Project name
  • Project description
  • Author
  • Use sass?

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

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

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

{
  "name": "{{ name }}",
  "description": "{{ description }}",
  "version": "1.0.0",
  "author": "{{ author }}",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.4.4"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    {{#sass}}
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    {{/sass}}
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}
复制代码

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

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

后记

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

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

By the way,我将会在11月16日晚上8点,在Segmentfault开展live讲座,主题是《【前端工程化】:玩转Webpack配置》,欢迎感兴趣的同学报名参加哦,保证精心准备,干货满满!

报名链接: segmentfault.com/l/150000001…

期待和大家的分享交流~


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

BLOG启示录

BLOG启示录

胡嘉玺 / 清华大学出版社 / 2010-7 / 48.00元

《BLOG启示录:WordPress博客建设与经营》分三大部分,共17章。第一部分(1~5章)主要是介绍Web 2.0、博客,以及LAMP的安装和架设,更有完整的主机、域名、DNS、WordPress安装、申请、交费等步骤,读者即使对计算机、主机、网络、域名等知识完全不懂,也可以依照《BLOG启示录:WordPress博客建设与经营》的步骤来落实整个WordPress基础建设的架构及安装。 ......一起来看看 《BLOG启示录》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换