Understand what scaffolding is from the perspective of use


Introduction to scaffold

Scaffolding is essentially a client of the operating system, which executes through commands, such as:
vue create vue-test-app
The command above consists of three parts:

  • Main command:vue
  • command: create
  • Param of command:vue-test-app

It means to create a Vue project namedvue-test-app, the above is a relatively simple scaffold command, but the actual scene is often more complex, such as:
There are already files in the current directory. We need to overwrite the files in the current directory and force the installation Vue project. We can enter this
vue create vue-test-app --force
The — force here is called option, which is used to assist the scaffold to confirm the user’s choice (which can be understood as configuration) in a specific scenario. There is another scenario:
adoptvue createWhen you create a project, it is automatically executednpm installHelp users install dependencies. If we want Taobao to install dependencies, you can enter the command:

vue create vue-test-app --force -r https://registry.npm.taobao.org

there-rAlso called option, it is different from — force in that it uses-And use the abbreviation here-rIt can also be replaced with--registry, some students may ask why I know this command here. In fact, we can see it by entering the following commandvue createAll supported options:
vue create --help
-r https://registry.npm.taobao.orghinderhttps://registry.npm.taobao.orgbecomeoptionParam, actually--force, it can be understood as:--force true, abbreviated as--forceperhaps-f

Scaffold execution principle

Understand what scaffolding is from the perspective of use

  • inputvue create vue-test-appWaiting for feedback from the terminal
    Understand what scaffolding is from the perspective of use
    Why does the terminal give us such feedback

    • First, after entering the Vue instruction in the terminal, find the Vue instruction in the environment variable. The method to find the Vue instruction in the environment variable iswhich vue
      Understand what scaffolding is from the perspective of use
      Understand what scaffolding is from the perspective of use
      The command Vue is available in the terminal, so the command Vue is available in the bin directory. Therefore, the Vue command under bin under node will be executed when Vue is input
    • And here Vue is a hyperlink
      lrwxr-xr-x 1 cjjxw staff 39B Apr 6 10:27 vue -> ../lib/node_modules/@vue/cli/bin/vue.js
      Point to the node below the bin of the node_ Modules here refers to global dependencies, and dependencies here refer tonpm i -g XXXAll global packages will be placed here
    • We are using the Vue command, so we can use it becausenpm i -g @vue/cli
    • Then we find this @ Vue package, and the actual final Vue instruction points here/Users/cuijianjun/.nvm/versions/node/v14.6.0/lib/node_modules/@vue/cli/bin/vue.js
    Summarize the principle of scaffold execution
  • Input at terminalvue create vue-test-app
  • Terminal analysisvuecommand
  • Terminal found in environment variablevuecommand
  • Terminal according tovueLink command to actual filevue.js
  • Terminal utilizationnodeimplementvue.js
  • vue.jsParsing command / options
  • vue.jsExecute command
  • After execution, exit execution

    How to develop a scaffold from the perspective of application

    Take Vue cli as an example

    • developmentnpmProject, which should include abin/vue.jsFile and publish the project to NPM
    • takenpmProject installation tonodeoflib/node_modules
    • staynodeConfiguration under the bin directory ofvueSoft connection pointinglib/node_modules/@vue/cli/bin/vue.js
      So we’re doing itvueYou can find it when you ordervue.jsCarry out

    At this point, you will have several questions

  • Why global installation@vue/cliThe commands that will be added later arevue?
  • Global installation@vue/cliWhat happened at the time?
  • Why?vuePoint to ajsFile, but we can pass it directlyvueDo you want to execute it directly