Vue脚手架创建的项目的启动流程

Vue脚手架创建的项目的启动流程

当利用vue脚手架创建项目之后利用 npm run serve 启动开发环境,我们就从这里来开始分析。

• 入口分析

首先从package.json中的脚本配置来看，npm run serve调用的是vue-cli-service serve命令。

这个时候就应该来到node_modules中的.bin查找vue-cli-service.js文件。
但是在vue-cli-service.js文件中有一句代码const Service = require(’…/lib/Service’)，但是根据这个路径是找不到这个文件的。那么这个文件在哪里呢？
其实真正入口在node_modules/@vue/cli-service/bin/vue-cli-service.js。

那在vue-cli-service.js中到底做了什么事呢？

核心逻辑：
1、初始化Service
const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

2、调用service的run方法
service.run(command, args, rawArgv)

• Service构造函数分析

1、初始化一些内置参数
2、读取package.json中的配置信息 this.resolvePkg(pkg)
3、读取插件信息 this.resolvePlugins(plugins, useBuiltIn)

this.resolvePlugins函数到底做了什么事呢？

1、加载builtInPlugins插件(比如当前目录下的’./commands/se