This is the sixth day of my participation in Gwen Challenge

Summary of TANGJIE other scaffolding basis

Front-end scaffolding development (a), meet as the first acquaintance

1. Understanding of scaffolding

Scaffolding is essentially an operating system client, executed by commands such as vue- CLI official website can be seen to create a project :vue create hello-world

The vue create hello-world command consists of three parts:

  • Master command, vue
  • command: create
  • The command of the param: hello – word

1.1 Commands can carry options

For example, vue create hello-word –force

The force command is the options command. The command indicates that the current directory is filled with files, and the files in the current directory need to be overwritten to force the installation of the vue project

Its options and vue create hello – word — force – r – r is the options here, https://registry.npm.taobao.org – r – the shorthand registry

The general way to view a scaffold parameter is vue –help (view vue create options)vue create –help (view vue create options)

1.2 Command Options Can carry parameters

In fact, at the time of use — help command, all the options of parameters param type actually already gave a description, detailed here

For example: the vue create hello – word — force – r https://registry.npm.taobao.org this command

-r https://registry.npm.taobao.org is behind the options – a parameter r; –force is a short form of –force true

2. Terminal processing of scaffolding commands

CMD create hello-world(window) : Winpty vue. CMD create hello-world(window)

Take vuE-CLI limbs as an example to parse:

2.1 runwinpty vue.cmd create hello-world

This makes it clear that the command terminal gives us several options to create the project.

The simple process is like this: command -> terminal, terminal through the system environment variable to find the VUE command (this is why the vUE command failed when the foot frame is installed, we need to manually configure the VUE command environment variable)

We can find the command through which vue

On my Windows computer vue this shell script directory in/c/Users/Administrator/AppData/Roaming/NPM/vue (AppData) may be a hidden files

Node_modules (NPM install xx -g); @vue (node_modules); @vue (node_modules); If you go to the cli folder, you will see two important folders: bin and lib. If you go to the bin file, you will see a vue.js file, which is actually the same file that this command finally executes

2.2 Step Induction

  • Input at terminalwinpty vue.cmd create hello-world
  • The terminal parses the Vue command
  • The terminal finds the vue command in the environment variable
  • The terminal links to the vue. Js script file of the actual file according to the command of vue
  • The terminal uses Node to execute vue.js
  • Vue.js resolves to command/options
  • Vue. Js commit point
  • Exit after execution

2.3 From vue-CLI to see the development ideas of scaffolding

  • Develop an NPM project that should contain a bin/vue.js file and publish it to NPM
  • Install the NPM project into the global node_modules
  • in/c/Users/Administrator/AppData/Roaming/npmThe soft link (shell script) in the following configuration vUE points to the directory in the same directorynode_modules/@vue/cli/bin/vue.js

3 summary

Through vuE-CLI re-understanding, front-end scaffolding ~