The core objectives of scaffolding:

Improve front-end r&d efficiency

Scaffolding core value

Will develop the process:

  • Automation: duplicate project code copy/Git operation/publish online operation
  • Standardization: project creation/Git flow/ release process/rollback process
  • Datalization: the r&d process is systematized and datalized to make the r&d process quantifiable

Vue – Introduction to CLI Scaffolding

Scaffolding is essentially a client of the operating system, executed by commands such as @vue/cli

    vue create vue-test-app -r https://registry.npm.taobao.org 
    
    // Master command: vue
    / / command: create
    //command params: vue-test-app
    // Create a vue project named vue-test-app using taobao image installation dependency
Copy the code

For more vue create parameters, execute vue create –help

@vue/ CLI scaffolding implementation principle

Analyze the implementation principle of @vue/ CLI from three problems

  1. What happens when you install @vue/ CLI globally?

  • Dependence on download @ vue/cli package files to the global NPM package installation directory, when the node will specify (decoration) the default directory: C: / Users/username/AppData/Roaming/NPM/node_modules

  • Installation package files directory C: / Users/username/AppData/Roaming/NPM/node_modules / @ vue, analytic package. The json configuration, If there is a bin configuration in the C: Users\ Hailiang. li\AppData\Roaming\ NPM file, generate the shell file corresponding to the vue as follows: Find the vue.js file that was actually executed)

    #!/bin/sh
    basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

    case `uname` in
        *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
    esac

    if [ -x "$basedir/node" ]; then
      "$basedir/node"  "$basedir/node_modules/@vue/cli/bin/vue.js" "$@"
      ret=$?
    else 
      node  "$basedir/node_modules/@vue/cli/bin/vue.js" "$@"
      ret=$?
    fi
    exit $ret

Copy the code
  1. What happens when the vue command is executed? Why does vue point to a JS file when we can execute it directly through the vue command?

When the vue command is executed

  • Execute the which vue command, which will find the file in the directory set by the environment variable $PATH (address: C:\Users\username\AppData\Roaming\ NPM \vue —-
  • Then execute the shell script of vue, find the actual execution file of vue and finally find the file C:\Users\ Hailiang. li\AppData\Roaming\ NPM \node_modules@vue\cli\bin\vue.js
  • Bin /vue.js file header declaration#! /usr/bin/env nodeTell OS node to execute this file to complete the vue command registration

Run the vue command to find the registered vue command in the environment variable C:\Users\ Hailiang. li\AppData\Roaming\ NPM, The soft link points to C:\Users\ Hailiang. li\AppData\ NPM \vue The actual execution of the vue.js file is summarized as follows:

  • Enter vue create vue-test-app in the terminal
  • Terminal resolve the vue command (which vue parsing out the vue soft links: / / Users/username/c AppData/Roaming/NPM/vue)
  • The terminal finds the vue command in the environment variable
  • The terminal links to the actual file vue.js according to the vue command (C:\Users\username\AppData\Roaming\ NPM \node_modules@vue\cli\bin\vue.js)
  • The terminal uses Node to execute vue.js
  • Vue. Js parsing the command/options
  • Vue. Js, execute the command
  • Exit after the command is executed

  1. Why is the command vue added after the global installation of @vue/cli instead of vue-cli?

Bin configuration in package.json