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 文件,并执行里面的代码。

相关推荐
剑亦未配妥22 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
在未来等你4 小时前
Elasticsearch面试精讲 Day 17:查询性能调优实践
大数据·分布式·elasticsearch·搜索引擎·面试
人工智能训练师6 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny076 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy7 小时前
css的基本知识
前端·css
昔人'7 小时前
css `lh`单位
前端·css
围巾哥萧尘9 小时前
美式审美的商务头像照🧣
面试
Nan_Shu_6149 小时前
Web前端面试题(2)
前端
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队10 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能