vue create xxx 的时候都发生了什么?🧐

大家好,我是哈默。今天我们来简单说一下当我们使用 vue 脚手架工具 vue-cli,进行 vue create xxx 的时候发生了什么。

vue create xxx

当我们使用 vue create xxx 的时候,我们可以得到如下的交互界面:

那么,在这背后,是执行了哪里的代码呢?

vue

我们可以尝试在命令行中输入 vue

可以看到一系列我们可以输入的指令和选项。

但如果我们输入 vue2,则会报错:

这里是因为:它会从我们的环境变量中找到我们的可执行文件 vue,并且执行。

但是 vue2,是找不到的,所以就会报错。

我们可以通过 which vue 来查看可执行文件 vue 的路径:

但我们如果通过 ll 指令,查看 vue 指令存在的文件夹的话:

会发现这里面的 vue 其实只是个软链接,它指向真正的文件的路径是 ../lib/node_modules/@vue/cli/bin/vue.js

我们查看下这个真正的 vue 文件:

在这个 vue 文件里,我们终于看到了真正执行的代码:

也就是当我们在执行 vue xxx 的时候,它会执行这里面的代码:

使用 node 执行我们的代码

在这个 vue 文件里,我们看到了第一行代码是这样一句话:

#!/usr/bin/env node

这个是什么意思呢?

它实际上是让我们在输入 vue xx 执行这个 vue 文件的时候,使用 node 去执行这个文件。

我们来创建一个 js 文件测试一下。

首先我们创建一个 demo.js 的文件:

里面让它打印一句话:

这个时候我们直接执行,会告诉我们没有权限:

我们给它赋予可执行的权限:

再次执行,此时可以成功执行代码,但是会报语法错误:

这个时候,我们在整个文件的开头加上和刚才 vue 文件一样的一句话,让它使用 node 来执行我们的 demo.js:

再次执行 demo.js,成功打印出了 hello 哈默

和我们直接 node ./demo.js 是一样的效果:

总结

当我们执行 vue create vue-demo 的时候,我们会从系统的环境变量里找到 vue 可执行文件进行执行,它是一个软链接,最终会找到真实的 vue 文件,并执行里面的代码。

相关推荐
一只小阿乐5 分钟前
react 点击事件注意事项
前端·javascript·react.js·react
Mike_jia11 分钟前
EMQX:开源MQTT消息中间件王者,百万级物联网连接的首选引擎
前端
xiaoxue..16 分钟前
深入理解JavaScript中的深拷贝与浅拷贝:内存管理的艺术
开发语言·前端·javascript·面试
绝无仅有17 分钟前
电商大厂面试题解答与场景解析(二)
后端·面试·架构
Mapmost17 分钟前
【高斯泼溅】深度解析Three.js 加载3D Gaussian Splatting模型
前端
绝无仅有17 分钟前
某电商大厂场景面试相关的技术文章
后端·面试·架构
Jeled33 分钟前
RecyclerView ViewHolder 复用机制详解(含常见错乱问题与优化方案)
android·学习·面试·kotlin
鹏多多39 分钟前
详解React组件状态管理useState
前端·javascript·react.js
excel1 小时前
如何将 MP4 文件转换为 M3U8 格式并实现流媒体播放
前端
秋氘渔1 小时前
Vue基础语法及项目相关指令详解
前端·javascript·vue.js