本节篇幅较长，小伙伴要耐心读完，相信对vue的启动原理会有更好的认识。
前言
上节我们简单说了一下，在我们创建完一个vue项目的时候，执行 npm run serve命令所发生的一些，不过因为篇幅的原因，我没有继续往下深入讲解。因为很多朋友在读特别长的文章的时候，会产生反感，消化学习的也不好，会产生适得其反的效果。不过还是有很多朋友想要继续深入了解一下背后的原理。
我们现在接上节的内容继续说一下，先来回顾上节内容，主要是说了两方面：
- 当我们在命令行中输入 npm run xxxx的时候，其实就是执行 package.json文件里的 scripts里的某个命令
- npm run serve命令之后，就是开启了一个服务来运行我们的项目，这是 WebpackDevServer开启的服务
如果还没有阅读上节内容的小朋友可以先阅读一下，不阅读，也可以先记住上面的结论，继续阅读。
继续分析执行流程
先来看一下目录结构：
当我们通过运行 npm run xxx命令的时候，首先会根据 package.json 配置文件找到 scripts 标签下的某个命令。如：npm run dev，就会找到 dev对应的内容，看一下json内容：
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}实际上运行 npm run dev就是运行 vue-cli-service serve这行命令。那么这行命令是如何执行的呢？
当我们执行这个命令的时候，npm工具会把package.json同级目录下的 node_modules/.bin目录加入到系统的环境变量path中去，然后执行完之后再把目录从环境变量path中删除。我们来看一下node_modules/.bin的内容：
这里面其实大部分都是一个链接文件，也就是一个快捷方式，注意我标红的地方就是要执行的命令：
vue-cli-service
它是 ../@vue/cli-service/bin/vue-cli-service.js目录的链接，真正执行的是这个目录下的脚本文件。我们进入这个目录看一下内容：
接下来我们重点分析一下几个比较重要的的内容：
// vue-cli-service.js
const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
const rawArgv = process.argv.slice(2)
// ... 省略无关代码
const command = args._[0]
service.run(command, args, rawArgv).catch(err => {
error(err)
process.exit(1)
})这里调用了 service.run方法开启了一个服务，看一下这个方法的第一参数 command 就是 vue-cli-service serve 命令行中的 serve 。接下来看一下 ../lib/Service 文件中的 run 方法。
// Service.js
/*
内容较多，我们重点看一下 run 方法
*/
async run (name, args = {}, rawArgv = []) {
const mode = args.mode || (name === 'build' && args.watch ? 'development' : this.modes[name])
this.setPluginsToSkip(args)
this.init(mode)
args._ = args._ || []
let command = this.commands[name]
if (!command && name) {
error(`command "${name}" does not exist.`)
process.exit(1)
}
if (!command || args.help || args.h) {
command = this.commands.help
} else {
args._.shift() // remove command itself
rawArgv.shift()
}
const { fn } = command
return fn(args, rawArgv)
}最终方法又调用一个 fn 方法。这个方法是 this.commands[name]对象中的方法 ，name就是上面提到的参数： serve
我们打印一下 this.commands 这个对象。
{
serve: {
fn: [AsyncFunction: serve],
opts: {
description: 'start development server',
usage: 'vue-cli-service serve [options] [entry]',
options: [Object]
}
},
// 为了省空间，省去很多代码
}这里我简单说一下，代码比较多，就不展开细说了：
在创建 Service这个对象的时候，构造函数里面初始了很多插件，其中就有 serve.js 脚本里面的插件。fn方法就是插件的具体执行方法。如开发模式下就调用 开发模式的插件方法，打包模式就调用开发模式的插件方法。
我们继续看一下开发模式下的插件方法：
serve.js脚本在 command目录下，打开内容：
红线标注的就是具体的执行方法，也就是前面说的 fn方法
方法内容比较长，我简单说下主要的事情：
创建一个 WebpackDevServer 服务 ，然后 在最后 开启这个服务。
这个方法里面还有我们比较熟悉的几行提示信息：
当我们 npm run serve 控制台会有几行信息输出：
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.103:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.在这个方法都可以找到，这几个提示：
至此，就算分析完整个流程了。
总结一下：
- npm run serve ---> package.json ---> scripts ---> 'serve':' vue-cli-service serve'
- vue-cli-service 就是 node_modules/.bin --> @vue/cli-service/bin/vue-cli-service.js
- 通过装配各种插件，最终调用各个插件的方法，完成不同的功能。对于 开发环境来说就是开启一个 WebpackDevServer服务。具体的服务实现，可以去看一下webpack的实现。
我们知道，vue 通过 webpack的一些功能来完成 开发和打包功能，webpack运行是需要node环境的。
本节篇幅较长，小伙伴要耐心读完，相信对vue的启动会有更好的认识。