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

锲而不舍
• 阅读 155

@TOC

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

1.vue-cli演示

在这里我们希望可以像vue-cli那样 在终端输入vue 有对应的命令显示
打造属于自己的项目脚手架工具----Vue CLI

2.创建自己的脚手架文件(pgx-cli)

打造属于自己的项目脚手架工具----Vue CLI
index.js文件中写入

#!/usr/bin/env node

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

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

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

打造属于自己的项目脚手架工具----Vue CLI
然后再使用 npm link命令 就可以实现 将 该文件映射到全局了
打造属于自己的项目脚手架工具----Vue CLI
试着在cmd中输入 pgx,发现成功执行index.js
打造属于自己的项目脚手架工具----Vue CLI

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

1.vue-cli演示

在这里,我们希望可以像vue-cli 一样,可以输入对应的参数,实现不同的功能
打造属于自己的项目脚手架工具----Vue CLI

2.安装使用commander

打造属于自己的项目脚手架工具----Vue CLI
我们可以直接复制 commander官网上的实例代码来使用
打造属于自己的项目脚手架工具----Vue CLI

三、设计命令行参数

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

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

接下来 就可以在cmd测试命令是否生效
打造属于自己的项目脚手架工具----Vue CLI
可见生效。

四、准备模板

在github创建一个仓库当作模板
打造属于自己的项目脚手架工具----Vue CLI

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

1.安装 download-git-repo 插件

npm install download-git-repo

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

打造属于自己的项目脚手架工具----Vue CLI
接下来 试着在 cmd 输入 pgx create testDemo 看看能否成功下载
打造属于自己的项目脚手架工具----Vue CLI
打造属于自己的项目脚手架工具----Vue CLI
桌面上成功生成一个文件
可见,成功。

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

安装

npm install ora

接下来,在index.js中引入并使用
打造属于自己的项目脚手架工具----Vue CLI
我们再在cmd中 使用 pgx create testDemo 看看效果打造属于自己的项目脚手架工具----Vue CLI
可见现在有了loading样式了

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

1.下载chalk

npm install chalk

引入并使用
打造属于自己的项目脚手架工具----Vue CLI
接下来可以再试一次打造属于自己的项目脚手架工具----Vue CLI
打造属于自己的项目脚手架工具----Vue CLI
可见文字提示有颜色了。
接下来,我们希望 文字前面有图标
打造属于自己的项目脚手架工具----Vue CLI
这时,需要安装

npm install log-symbols

然后引入并使用
打造属于自己的项目脚手架工具----Vue CLI
再次测试
打造属于自己的项目脚手架工具----Vue CLI
打造属于自己的项目脚手架工具----Vue CLI
成功。

八、npm发布

  1. 打开npm官网
  2. 注册一个npm账号
  3. 在npm中检索是否有重复的包名
  4. 将package.json中的name改为发布到npm上的包名
  5. 打开控制台,执行npm login
  6. 登陆成功后,在项目下执行npm publish 发布打造属于自己的项目脚手架工具----Vue CLI

在npm官网搜索,看看是否发布成功
打造属于自己的项目脚手架工具----Vue CLI
可见发布成功。

接下来
测试拉下来的的pgx能不能用。
我们需要先把使用 npm unlink 把之前的映射去除。
打造属于自己的项目脚手架工具----Vue CLI
然后 再npm install pgx-cli -g

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

到此为止就实现了自己的脚手架根据, 想要下载下来的模板跟vue 一样,只需要 把自己做好的模板放在git上就好了,是不是很简单。

九、项目源码以及笔记

https://github.com/peigexing/...
点击跳转

点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
Vue CLI 3搭建vue+vuex 最全分析
一、介绍VueCLI是一个基于Vue.js进行快速开发的完整系统。有三个组件:CLI:@vue/cli 全局安装的npm包,提供了终端里的vue命令(如:vuecreate、vueserve、vueui等命令)CLI服务:@vue/cliservice是一个开发环境依赖。构建于 we
Jacquelyn38 Jacquelyn38
4年前
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
前言在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。第一步,安装webpack简易框架vue init webpacksimple marquee这里会用到vueinit命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cliinitnpminstallg@vue
LinMeng LinMeng
2年前
Vue3学习笔记---创建Vue3.0工程
创建方式分为两种:1.使用vuecli创建官方文档:https://cli.vuejs.org/zh/guide/creatingaproject.htmlvuecreate//查看@vue/cli版本,确保版本在4.5.0以上,在cmd中vueversion//安装或升级你的@vue/clinpminstallg@vue/cli//创
徐小夕 徐小夕
4年前
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。前言为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下:vuecli4
Wesley13 Wesley13
3年前
4K超清智能视讯终端MeetingEye 600
4K超高清视讯终端MeetingEye600,一体化中型会议室智能视讯终端!在这里插入图片描述(https://imgblog.csdnimg.cn/20200929111448587.png?xossprocessimage/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cH
Stella981 Stella981
3年前
Python多环境管理——pyenv
1背景&概述因某些需求,需要安装TensorFlow,很自然地在终端敲下了以下命令:pipinstalltensorflow然后。。。!在这里插入图片描述(https://imgblog.csdnimg.cn/20210204170856776.png)好家伙???居然没有??因为
Wesley13 Wesley13
3年前
MySQL8开启ssl加密
1概述MySQL从5.7开始默认开启SSL加密功能,进入MySQL控制台后输入status可以查看ssl的状态,出现下图表示在使用ssl:!在这里插入图片描述(https://imgblog.csdnimg.cn/20200325131703934.png)另外,ssl加密需要密钥与证书,可以使用openssl手动生成或使用my
Wesley13 Wesley13
3年前
Java实现简单计算器
1概述JavaAWTSwing实现的简单计算器,功能如下:支持加减乘除支持小数运算键盘监听鼠标监听2效果演示!在这里插入图片描述(https://imgblog.csdnimg.cn/20201216012859251.gif)!在这里插入图片描述(htt
Wesley13 Wesley13
3年前
JAVA中使用openoffice将Excel转PDF再转图片功能实现
需求公司一个小项目要结尾了,有非常多的表格,而且非常复杂,例如!在这里插入图片描述(https://oscimg.oschina.net/oscnet/d6763b83bffd7055a6007d1fcc917e9a2e4.png)例如:(这表格,有想死的心…)!在这里插入图片描述(https://oscimg
Wesley13 Wesley13
3年前
mysql查询每个学生的各科成绩,以及总分和平均分
今天看一个mysql教程,看到一个例子,感觉里面的解决方案不是很合理。问题如下:有学生表:!在这里插入图片描述(https://oscimg.oschina.net/oscnet/07b001b0c6cb7e0038a9299e768fc00a0d3.png)成绩表:!在这里插入图片描述(https://oscimg.o
Stella981 Stella981
3年前
IDEA实用教程(十一)—— 使用Maven创建JavaSE项目
1.第一步!在这里插入图片描述(https://oscimg.oschina.net/oscnet/d3e5173f0fa64c563e87c8084c6c3cd6304.png)2.第二步!在这里插入图片描述(https://oscimg.oschina.net/oscnet/b4b322d915146536a8e0c2b1942b0