We will often use scaffolding to create our projects. For example, to create a Vue project with @vue/ci, we will execute vue create myProject to initialize the project and install @vue/ CLI globally before using scaffolding.
Three questions
1. Why is the command vue added after @vue/ CLI is installed globally?
Yarn Gloabl add @vue/cli Install @vue/cli
Ps: Whether you install yarn Gloabl Add or NPM I-G, the principle is similar.
huiazir@cuiwenhuideMacBook-Pro ~ % which vue
/usr/local/bin/vue
Copy the codeVue was installed in /usr/local/bin on my computer and went to this directory.
huiazir@cuiwenhuideMacBook-Pro ~ % cd /usr/local/bin huiazir@cuiwenhuideMacBook-Pro bin % ll total 144600 drwxr-xr-x 14 root wheel 448 10 28 23:47 . drwxr-xr-x 7 root wheel 224 10 8 23:58 .. lrwxr-xr-x 1 root wheel 50 10 28 23:47 vue -> .. /share/.config/yarn/global/node_modules/.bin/vue .....Copy the codeYou can see that vue is actually a soft link that links to.. / share/config/yarn/global/node_modules/bin directory, enter the directory.
huiazir@cuiwenhuideMacBook-Pro bin % cd .. /share/.config/yarn/global/node_modules/.bin/ huiazir@cuiwenhuideMacBook-Pro .bin % ll total 0 drwxr-xr-x 3 root wheel 96 10 28 23:47 . drwxr-xr-x 603 root wheel 19296 10 28 23:47 .. lrwxr-xr-x 1 root wheel 22 10 28 23:47 vue -> .. /@vue/cli/bin/vue.jsCopy the codeThus we find that vue is the true path in.. /@vue/cli/bin/vue.js, so why is the command added after the global installation of @vue/cli vue? Go to the vue installation directory and view package.json
huiazir@cuiwenhuideMacBook-Pro .bin % cd ../@vue/cli
huiazir@cuiwenhuideMacBook-Pro cli % ll
total 24
drwxr-xr-x 9 root wheel 288 10 28 23:44 .
drwxr-xr-x 10 root wheel 320 10 28 23:44 ..
-rw-r--r-- 1 root wheel 1091 10 28 23:44 LICENSE
-rw-r--r-- 1 root wheel 106 10 28 23:44 README.md
drwxr-xr-x 3 root wheel 96 10 28 23:44 bin
drwxr-xr-x 22 root wheel 704 10 28 23:44 lib
drwxr-xr-x 7 root wheel 224 10 28 23:47 node_modules
-rw-r--r-- 1 root wheel 1707 10 28 23:44 package.json
drwxr-xr-x 5 root wheel 160 10 28 23:44 types
huiazir@cuiwenhuideMacBook-Pro cli % cat package.json
{
"name": "@vue/cli",
"version": "4.5.14",
"description": "Command line interface for rapid Vue.js development",
"bin": {
"vue": "bin/vue.js"
},
// ...
}
Copy the codeThere is a bin configuration item in package.json. The configuration in bin is the name of the soft link after we install it in the operating system.
2. What happens when @vue/ CLI is installed globally?
After the installation @ vue/cli, package will be installed in/usr/local/share/config/yarn/global/node_modules (if use NPM or other tools to install will be installed in the corresponding directory), package completely after the installation is complete, It parses bin in package.json, and if it finds such a configuration under bin, it adds the corresponding soft link to the bin directory of Node, which points to the file link that our bin configuration points to.
huiazir@cuiwenhuideMacBook-Pro node_modules % which vue /usr/local/bin/vue huiazir@cuiwenhuideMacBook-Pro node_modules % cd /usr/local/bin huiazir@cuiwenhuideMacBook-Pro bin % ll total 144600 drwxr-xr-x 14 root wheel 448 10 28 23:47 . drwxr-xr-x 7 root wheel 224 10 8 23:58 .. lrwxr-xr-x 1 root wheel 50 10 28 23:47 vue -> .. /share/.config/yarn/global/node_modules/.bin/vue huiazir@cuiwenhuideMacBook-Pro bin %Copy the code3. What happens when the vue command is executed?
Running the vUE command directly is equivalent to running the VUE in the vUE installation directory.
huiazir@cuiwenhuideMacBook-Pro ~ % vue -V
@vue/cli 4.5.14
huiazir@cuiwenhuideMacBook-Pro ~ % /usr/local/bin/vue -V
@vue/cli 4.5.14
huiazir@cuiwenhuideMacBook-Pro ~ %
Copy the code- perform
vueThe first step of the command is actually to look up the environment variablevueWhether the command is registered, so we execute some unregistered commands will promptcommand not found. - If a command is registered, the soft link is followed layer by layer to find its actual executable
/usr/local/share/.config/yarn/global/node_modules/@vue/cli/bin/vue.js. We might have a question here, but we usually write.jsFile to executenode xxx.jsTo execute, and hereWhy not?nodeYou can execute it?forjsFor files, you have to have one in order to executeThe parsertheThe parserisnodeWhen we execute vUE, we don’t writenodeBut it was carried out. So thisvue.jsCompared to the othersjsWhat’s different about files?
huiazir@cuiwenhuideMacBook-Pro bin % vim vue.js #! /usr/bin/env node // Check node version before requiring/doing anything else // The user may be on a very old node version const { chalk, semver } = require('@vue/cli-shared-utils') // ...Copy the codeYou can see that the first line has this code #! /usr/bin/env node this is why we can execute this file without entering node.
#! /usr/bin/env nodeWhat this code is saying is thatGo to the environment variablesnodeCommand.We can print out environment variables
huiazir@cuiwenhuideMacBook-Pro bin % /usr/bin/env
TMPDIR=/var/folders/zr/7l4r5c0j5r5c2z9zmgnh_rfc0000gn/T/
__CFBundleIdentifier=com.apple.Terminal
XPC_FLAGS=0x0
TERM=xterm-256color
SSH_AUTH_SOCK=/private/tmp/com.apple.launchd.dkdt2BPQPi/Listeners
XPC_SERVICE_NAME=0
TERM_PROGRAM=Apple_Terminal
TERM_PROGRAM_VERSION=440
TERM_SESSION_ID=1FEDBE07-AC77-4CAE-8280-0B703647303E
SHELL=/bin/zsh
HOME=/Users/huiazir
LOGNAME=huiazir
USER=huiazir
PATH=/usr/local/bin:/usr/local/mongodb/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin
SHLVL=1
PWD=/usr/local/share/.config/yarn/global/node_modules/@vue/cli/bin
OLDPWD=/usr/local/share/.config/yarn/global/node_modules/.bin
LANG=zh_CN.UTF-8
_=/usr/bin/env
Copy the codeThe node command is in the environment variable PATH. Once node is found, the file is executed through the Node parser.
