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 terminal
winpty 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/npm
The 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 ~