开发脚手架
- 自己能过快速的创建自己的项目
- 管理自己的最基础模板的初衷
- 我们创建项目也可以通过脚手架创建的，但是里面什么都没有。所以我们就像的是自己搭建一个脚手架，然后呢自己搭建基础的模板，达到快速开发的效果
- 其实也是从github 上拉取项目的
期望的效果
- 常用的目录结构
- vue.config.js(配置别名)
- axios (网络请求的安装以及二次封装)
- vue-router (router的安装和配置，路由的动态加载)
- vuex (vuex 的安装和配置，动态加载子模块)
- 创建项目 aking-cli create projectName
- 拉取项目 帮忙npm install 然后打开浏览器
知识
- 最主要的是commander这个东西，里面就是我们要自己的自定义的命令程序
- 通过download-git-repo从代码仓库中下载模板
- EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。 npm install ejs
- open 打开诸如URL，文件，可执行文件之类的东西。跨平台。 npm install open
- const { spawn } = require('child_process');执行终端的相关代码 子进程 使用这个呢会开启子进程的
命令
- aking-cli addcpn NavBar
- aking-cli addcpn Swiper -d src/pages/home
- aking-cli addpage Profile
- aking-cli addstore profile
- aking-cli --version -V
- aking-cli --help
开始
- 入口文件index.js
- 初始化包管理 npm init
目的：如何输出这样的命令 aking-cli 可以识别我的命令呢？自定义命令
- #!/usr/bin/env node 找到这个node 帮我们执行
- 在package.json配置 是哪个命令找node来执行呢？需要配置
"bin": {
"aking-tmp": "index.js"
},
- sudo npm link 我为什么要关联它，然后直接aking就可以呢？这就是这个项目的指令了和vue-cli一样 下面我们配置它的指令选项相关的 如 aking-tmp --version --help aking-tmp create 如何让它成为我们的工具呢？
目的：指令 aking-tmp --version
使用第三方库 Commander.js 还有其他操作自己上github查看
- npm install commander
- 入口文件
#!/usr/bin/env node
const program = require('commander')
// 定义显示模块的版本号
program.version(require('./package.json').version)
// 解析终端指令
program.parse(process.argv)
- 然后就可以输入 aking-tem --version 显示自己开发的版本号了。在这个Commander这个库也自带一些默认的指令了（详情可上github去查看）
目的options 可选项
// 添加可选项 option
program.option('-w --why', 'a why cli')
program.option('-d --dest <dest>', 'a destination folder,例如: -d /src/components')
// 根据不同的框架拉取不同的代码框架
program.option('-f --framework <framework>', 'a framework name,例如: -f vue')
监听命令输出其他的
program.on('--help', function () {
console.log("");
console.log("Other:")
console.log(" other options~");
})
目前修改的是Option里面的可选择的部分
不添加可选参数的话就选择默认的 没什么重大的意义，我们也不用
划分结构目录
- lib 自己创建的库
- utils 工具
- core 核心代码
创建命令，下载代码
- 创建命令，当在终端输入命令的时候如何操作我们想要执行的代码和操作文件呢？这就是node写脚本
- 比如 aking-cli create demo 这个create就是命令，搭建一个项目。如何进行操作呢？
- npm install (先拉取项目模板)
- 安装完毕打开浏览器访问项目 npm run serve
- 如何使用命令拉取GitHub代码
- npm install download-git-repo 这个仓库返回的是一个函数，回调函数，我们需要在回调之后才会执行下面的代码。不想回调地狱那么就只用 promise 的 iterator 的 async await
这是node的工具库 util
const { promisify } = require('util');
转成返回promise
program
.command('create <project> [others...]')
.description('clone a repository into a folder')
.action((project,others)=>{
console.log(project)
})
当输入命令之后，回调参数给到我们的action,然后去执行相应的操作
addcpm
- 创建vue组件，我们如何根据我们的模板通过命令方式创建模板组件
- 我们用的最多的渲染模板是.ejs
- 编译ejs模板 得到一个字符串(result)
- 将result写入到.vue文件中 放到对应的文件夹中
发布
- 注册npm 记得校验邮箱不然发布不了
- 在终端输入 npm login
- npm publish
- 查看镜像源 npm config get registry
- 切回到原来的镜像 npm config set registry=registry.npmjs.org
- npm config set registry registry.npm.taobao.org 淘宝镜像
