create

vue create 后面有很多参数：

源码如下：

program
  .command('create <app-name>')
  .description('create a new project powered by vue-cli-service')
  .option('-p, --preset <presetName>', 'Skip prompts and use saved or remote preset')
  .option('-d, --default', 'Skip prompts and use default preset')
  .option('-i, --inlinePreset <json>', 'Skip prompts and use inline JSON string as preset')
  .option('-m, --packageManager <command>', 'Use specified npm client when installing dependencies')
  .option('-r, --registry <url>', 'Use specified npm registry when installing dependencies (only for npm)')
  .option('-g, --git [message]', 'Force git initialization with initial commit message')
  .option('-n, --no-git', 'Skip git initialization')
  .option('-f, --force', 'Overwrite target directory if it exists')
  .option('--merge', 'Merge target directory if it exists')
  .option('-c, --clone', 'Use git clone when fetching remote preset')
  .option('-x, --proxy', 'Use specified proxy when creating project')
  .option('-b, --bare', 'Scaffold project without beginner instructions')
  .option('--skipGetStarted', 'Skip displaying "Get started" instructions')
  .action((name, cmd) => {
    const options = cleanArgs(cmd)

    if (minimist(process.argv.slice(3))._.length > 1) {
      console.log(chalk.yellow('\n Info: You provided more than one argument. The first one will be used as the app\'s name, the rest are ignored.'))
    }
    // --git makes commander to default git to true
    if (process.argv.includes('-g') || process.argv.includes('--git')) {
      options.forceGit = true
    }
    require('../lib/create')(name, options)
  })

从上面的代码可以很清楚的看出vue create后面跟的参数

vue create执行过程

vue create ===>

create.js ===>

Creator.js ===>

如果有preset加载preset ===>

OS模块创建系统临时文件夹（os 模块提供了一些基本的系统操作函数）===> 

有远程preset，使用download-git-repo下载仓库 ===>

从临时文件夹获取内容写入到实际文件夹（通过fs模块操作）

vue-cli-service

vue-cli-service就像create-react-app的react-scripts, 将项目打包，启动等命令集成到了该命令中，在源码中对应的包是packages/vue/cli-service

如图：



入口文件会指向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 args = require('minimist')(rawArgv, {
  boolean: [
    // build
    'modern',
    'report',
    'report-json',
    'inline-vue',
    'watch',
    // serve
    'open',
    'copy',
    'https',
    // inspect
    'verbose'
  ]
})
const command = args._[0]

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})


Serveice.js

执行constructor()实例化===>

this.pkg = this.resolvePkg(pkg) ===>

this.plugins = this.resolvePlugins(plugins, useBuiltIn)===>

实例 service.run()

resolvePkg(pkg)

通过resolvePkg(pkg)解析package.json, pkg当前命令执行所在的目录

返回值是package.json的路径

resolvePlugins

1，加载commands下的命令文件，并格式化为

[
  {
    id:'built-in:文件路径',
    apply: '命令文件'
  }
]

2，若dependencies和devDependencies中存在plugins，一并加入到当前plugins数组

判断是否有插件的规则：

id满足下面的正则表达式

/^(@vue\/|vue-|@[\w-]+(\.)?[\w-]+\/vue-)cli-plugin-/

id在this.pkg.optionalDependencies中

3，加载本地的plugins

判断是否存在：this.pkg.vuePlugins && this.pkg.vuePlugins.service

格式：

[
  {
    id: `local:${file}`,
    apply: loadModule(`./${file}`, this.pkgContext)
  }
]

run

在run中根据vue-cli-service参数 获取到对应的命令文件，执行该命令文件的函数





分析serve.js执行过程

webpack配置，通过chainWebpack引入



webpack配置文件



run方法

这里面有一个难点，就是registerCommand在哪里定义，通过分析源码可以得到，在PluginApi中中定义了方法registerCommand()方法，如图：



下面代码中的this.service指向Service实例



到这里执行命令前的逻辑基本完毕，接下来就是执行了。

 

 

在运行或者打包Vue项目时，我们常用的命令是：npm run build，npm run serve等样式。其中build和serve是在vue项目的package.json中进行定义，是一个脚本。例如：
{
  "name": "test02",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

在上面的脚本定义中，server、build等是可以按照自己的方式进行命名的，例如myserver、mybuild，对应的运行命令就是：

npm run mybuild

npm run myserve

上面的命令本质上是下面的命令，都可以在命令行方式下运行：

vue-cli-service serve

vue-cli-service build

运行截图如下：



下面讲一下vue-cli-service serve和vue-cli-service build的默认环境，因为曾经遇到出现一个问题：项目中有一个环境参数文件.env.development。在WebStorm中运行npm run serve，前后端是通的。但是当运行npm run build打包部署到Apache Server中后，前后端是不通的。
检查后发现原因是上面两个命令默认的环境是不一样的，看下面两个运行截图就知道了：





第一个脚本默认对应的是development环境，第二个脚本默认对应的是production环境（没有对应的环境设置文件也不影响，有对应的环境设置文件就用文件里面设置的参数）。如果不注意这点，就会出现部署后运行情况和没有部署运行情况不一致的情况，其背后的原因就是默认环境。
如何修改每个脚本对应的环境？非常简单，直接在package.json文件中修改。


将这个图与第二个图进行比较，环境参数已经发生改变。环境设置文件的命名规范是：.env.xxx，XXX在上图中为development，一般有意义或者惯例的名字即可，右边–mode后面的参数名字需要与左边文件的XXX完全相同（可能有多个环境设置文件）。某个脚本运行后，将会出现XXX的名字，例如上图的【 Building for development…】。

#!/usr/bin/env node

const semver = require('semver')
const { error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node

if (!semver.satisfies(process.version, requiredVersion)) {
  error(
    `You are using Node ${process.version}, but vue-cli-service ` +
    `requires Node ${requiredVersion}.\nPlease upgrade your Node version.`
  )
  process.exit(1)
}

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd()) // 传入当前项目的所在路径 /Users/zyn/WebRoot/Demo/uiit-test

const rawArgv = process.argv.slice(2) // [ 'serve' ] [ 'serve', '--port', '3000' ]
// minimist 命令行参数解析器
const args = require('minimist')(rawArgv, {
  boolean: [
    // build
    'modern',
    'report',
    'report-json',
    'watch',
    // serve
    'open',
    'copy',
    'https',
    // inspect
    'verbose'
  ]
})  // vue-cli-service serve --port 3000  args 包含 {port: 3000}
const command = args._[0] // serve

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

样例

新建项目后，package.json 下的 script



 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
  }



vue-cli-service serve

options 参数如下



Usage: vue-cli-service serve [options]

Options:

  --open    open browser on server start
  --copy    copy url to clipboard on server start
  --mode    specify env mode (default: development)
  --host    specify host (default: 0.0.0.0)
  --port    specify port (default: 8080)
  --https   use https (default: false)

vue-cli-service build

options 参数如下



Usage: vue-cli-service build [options] [entry|pattern]

Options:

  --mode        specify env mode (default: production)
  --dest        specify output directory (default: dist)
  --modern      build app targeting modern browsers with auto fallback
  --target      app | lib | wc | wc-async (default: app)
  --name        name for lib or web-component mode (default: "name" in package.json or entry filename)
  --no-clean    do not remove the dist directory before building the project
  --report      generate report.html to help analyze bundle content
  --report-json generate report.json to help analyze bundle content
  --watch       watch for changes

更多内容见

https://cli.vuejs.org/