vue create xxxx
从零开始做vue项目的时候,经常会执行一个vue create xxx的命令,这是创建一个新项目的开始,接着就是一路下一步就可以创建一个项目模版,之前经常用这个命令,不知道命令背后做了什么,这次就深入了解下这个命令背后都发生了什么
从创建项目的经验中得知,要想在终端直接使用vue命令,需要先执行cnpm install vue-cli -g全局安装vue命令,否则控制台输入vue就会出现下图错误
那么问题来了,在输入vue命令后终端是如何查找vue过程,并执行相关命令的呢?
-
通过向GPT学习,了解到终端输入
vue命令后,node全局查找是否存在vue的命令工具(npm config get prefix)查看全模块 -
通过上述命令找到了node的安装路径
-
当前文件夹中有许多带有cmd,ps1后缀的文件,但是就是没看到vue文件
-
在全局模块查找路径中没有找到
vue命令行工具,则会在当前目录下的node_modules/.bin/目录下查找是否存在名为vue的命令行工具。 若不存在就会报错如上述 -
我通过nvm切换到node的另一个版本,看看执行命令后会发生什么
- 通过上述的查找路径,可以看出当前版本中存在vue命令的文件
- 当前node文件夹中点开node_modules文件夹发现有@vue文件夹,接着点开cli/bin/vue.js,打开该文件,发现里面是一些执行相关命令的代码,如下图:
- 乎到这里为止,知道了vue全局情况下vue create xxx命令是如何运行了;
vue、vue.cmd、vue.ps1
在node文件夹中,会在该目录下看到
vue、vue.cmd、vue.ps1三个文件,那它们的作用是什么呢(回答来自chatGPT):
-
vue:这是一个无后缀名的可执行文件(可以是.sh、.bat等),它是Vue CLI的命令行工具的主文件。当我们在终端输入vue命令时,实际上是在执行这个文件。在Unix系统(如Mac、Linux)下,这个文件可以直接执行;在Windows系统下,需要使用vue.cmd代替执行。 -
vue.cmd:这是一个命令批处理文件,它在Windows系统下执行vue命令时会调用vue.ps1执行实际的命令。由于Windows默认不允许执行.sh等无后缀名的可执行文件,因此需要使用该文件作为代理调用实际的命令。 -
vue.ps1:这是一个PowerShell脚本文件,它在Windows系统下被vue.cmd调用,用于执行实际的命令行工具。 -
总之,
vue文件是Vue CLI命令行工具的主文件,vue.cmd和vue.ps1是在Windows系统下用于执行vue命令的辅助文件。这些文件的作用是将Vue CLI集成到操作系统的命令行环境中,方便我们在终端窗口中调用Vue CLI命令行工具。
总结
- vue create xxx,先在node中查找vue命令文件,然后node_modules/@vue/cli/bin/vue.js找到真正vue命令所代表的终端操作的vue相关代码;
- node中有三个vue文件,
vue是主要的入口文件,vue.cmd和vue.ps1主要是为window所用,ps1后缀的是powershell终端执行需要;