近期概况
哎呀❗️,已经将近一年没更新过掘金了,这一年新入职阿里巴巴,多数时间在工作上.作者后续将会持续更新掘金文章,欢迎多多支持💗.之前的文章为性能优化和react源码相关,感兴趣可以多多交流.
回到正题
为什么安装了vue-cli,能够在控制台使用vue命令呢?这就涉及到脚手架知识了,具体的流程如下那
- vue-cli包中的package.json中的bin属性,vue表示操作系统安装完成后软连接的名称，"bin/vue.js"表示软连接指向的文件，这样可以通过vue命令来创建
bin:{
"vue":"bin/vue.js"
}
- 全局安装vue-cli发生了什么？首先会把vue-cli安装到全局的node_ modules后，解析package.json有bin配置，就会在node的安装主目录下安装一个vue的软连接，指向bin/vue,js文件，也会增加vue的全局环境变量
- 执行vue命令的时会发生了什么？操作系统会找到vue.js文件，直接执行一个vue.js文件时无法被执行的,因为js必须添加解释器来执行，比如加node在前面。但是在我们执行vue的时候没有加node.能执行的原因是第一行,这句话会让操作系统找到usr/bin/env 文件（所有的环境变量存储的文件）里面有木有node环境变量，有的话就用node执行。
简单来讲
执行vue create脚手架流程
- 在环境变量中找vue命令如果没有就会报vue不存在，相当于执行which vue
- 环境变量vue中存储的文件（或者which vue）链接是一个软连接（在node的安装主目录下），这个链接会指向一个实际的链接，也就是"bin/vue.js"
- 通过#!usr/bin/env node 执行"bin/vue.js"文件
脚手架本地调试
npm link & unlink
npm link: 将当前包在node全局目录下创建一个软连接指向该库
npm link cmp: 将node全局目录下对应名字的库创建软连接安装在当前项目的node_modules下
npm unlink:将当前包在node全局目录下的软链移除
npm unlink cmp:将当前项目的node_modules下该库到node全局目录下对应名字的库的软链移除
package.json下main属性
指向的文件是当这个包当作库文件引入时候加载的文件
mengwan-cmp库中 package.json
{
main:"bin/main.js"
}
bin/main.js
module.exports = {
username:'xxx'
}
表示Cmp 是从bin/main.js中export的对象(即username),加载mengwan-cmp库包的时候会读取main属性指向的文件
import Cmp from 'mengwan-cmp'
调试方案
直接在脚手架的目录下npm link就行 这样和npm i package安装全局的package一样的 会在node的全局环境下安装一个软链 link情况下会指向你本地的库，npm i 情况下会指向你安装到node_modules下的库，然后都会解析bin属性的key作为全局环境的指令
Ending
该开始学习了同学们.
