打造属于自己的项目脚手架工具----Vue CLI(1)

• 一、初始化——把脚本映射为命令

• • 1.vue-cli演示

• 2.创建自己的脚手架文件（pgx-cli）

• 二、使用commander解析命令行参数

• • 1.vue-cli演示

• 2.安装使用commander

• 三、设计命令行参数

• • 在index.js中将复制过来的代码简化。

• 四、准备模板

• 五、根据pgx create 命令 将模板下载到本地

• • 1.安装 download-git-repo 插件

• 2.在index.js中引入并使用

• 六、用ora增加下载中的loading效果

• 七、使用chalk 和 logSymbols增加文本样式

• • 1.下载chalk

• 八、npm发布

• 九、项目源码以及笔记

一、初始化——把脚本映射为命令

==================================================================================

1.vue-cli演示

---

在这里我们希望可以像vue-cli那样 在终端输入vue 有对应的命令显示

2.创建自己的脚手架文件（pgx-cli）

---

index.js文件中写入

#!/usr/bin/env node

console.log(‘pgx-cli脚手架工具’);

使用Node开发命令行工具所执行的javascript 脚本必须在顶部加入#!/usr/bin/env node 声明

接下来，需要在当前文件夹中使用 npm init -y 命令 创建pakaage.json文件，并在文件中 加入bin字段，如图所示

然后再使用 npm link命令 就可以实现 将 该文件映射到全局了

试着在cmd中输入 pgx，发现成功执行index.js

二、使用commander解析命令行参数

=======================================================================================

1.vue-cli演示

---

在这里，我们希望可以像vue-cli 一样，可以输入对应的参数，实现不同的功能

2.安装使用commander

---

我们可以直接复制 commander官网上的实例代码来使用

三、设计命令行参数

============================================================================

在index.js中将复制过来的代码简化。

---

接下来 就可以在cmd测试命令是否生效

可见生效。

四、准备模板

=========================================================================

在github创建一个仓库当作模板

五、根据pgx create 命令 将模板下载到本地

=============================================================================================

1.安装 download-git-repo 插件

---

npm install download-git-repo

2.在index.js中引入并使用

---

接下来 试着在 cmd 输入 pgx create testDemo 看看能否成功下载

桌面上成功生成一个文件

可见，成功。

六、用ora增加下载中的loading效果

========================================================================================

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-VvuKOAXy-1714718955888)]