发布自己的一个脚手架用于快速搭建vue项目

背景：当我们每次要创建一个新的vue项目时都得使用vue create创建最基础的模板然后从头开始配置，得创建常用的目录结构、配置vue.config.js、对网络请求axios进行安装并二次封装、配置router等。呜呜呜有没有专属于懒人的方法让我们不用每次创建一个新的项目时都重复这些活呢！！！

哦天哪！！为什么我们不搭个脚手架呢！！把这些东西都一次性配置好，之后我们只要一行命令就可以搞定！

开摆，不，开干！

首先我们得明确我们的脚手架都需要提供哪些功能。

1. 当我们安装完这个脚手架后，我们使用命令ckt create your_project_name就可以创建一个配置好的vue项目（ckt为我的脚手架里自定义的命令名称）
2. 创建项目过程中支持自动拉取项目模板、安装项目依赖、打开浏览器 http://localhost:8080/、自动启动项目
3. 开发中支持命令式 创建Vue组件、创建Vue页面并配置路由、创建Vuex子模块
   创建Vue组件：
   ckt addcpn YourComponentName # 例如ckt add NavBar，默认会存放到src/components文件夹中
   ckt addcpn YourComponentName -d src/pages/home # 也可以指定存放的具体文件夹
   创建Vue页面，并配置路由：
   ckt addpage YourPageName # 例如ckt addpage Home，默认会放到src/pages/home/Home.vue中，并且会创建src/page/home/router.js
   ckt addpage YourPageName -d src/views # 也可以指定文件夹，但需要手动集成路由
   创建Vuex子模块：
   ckt addstore YourVuexChildModuleName # 例如ckt addstore home，默认会放到src/store/modules/home/index.js和types.js
   ckt addstore YourVuexChildModuleName -d src/vuex/modules # 也可以指定文件夹

好的下面开始撸代码吧。
首先npm initi -y 初始化包，然后在package.json中配置包名 “name”: “ckt”，和指令入口文件

"bin": {
   
    "ckt": "index.js"   
  }
1
2
3
4

表示指令为ckt时执行index.js文件。配置好后npm link把bin和环境变量进行链接，把ckt配置到环境变量。

目录结构：

配置index.js

#!/usr/bin/env node

//一个指令，读为shebang/hashbang。但代码执行到这个文件时，会根据#！后面定义的环境执行代码。
//#！后面写的是node代码，代码相对固定。 /usr/bin/env node表示在当前电脑环境中找到node，并用node来执行文件
const program = require('commander');

const helpOptions = require('./lib/core/help');
const createCommands = require('./lib/core/create');

const log = require('./lib/utils/log');

// 定义显示模块的版本号
// program.version('1.0.1')   //写死的，每次package.json中修改这里都需要同步
program.version(require('./package.json').version)
program.version(require('./package.json').version, '-v,--version')      //不加'-v,--version'则只有使用--version或者-V才可以访问到版本号，使用此后使用-v也可以访问到。ps：上面一句不加会覆盖-V

// 给help增加其他选项
helpOptions(); //--help是commander自带的，也可以自己配置
// 创建命令
createCommands(); 
// 解析终端指令
program.parse(process.argv); //必须，把参数交过来进行解析
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

help.js中配置可选参数：

const program = require('commander');

   // 增加自己的options（可选参数）
const helpOptions = () => {
   
  program.option('-s --src ', 'a source folder');
  program.option('-d --dest ', 'a destination folder, 例如: -d src/pages, 错误/src/pages');
  program.option('-f --framework ', 'your framework name');

//除了option，也可以使用on监听help.执行顺序在option后面
  program.on('--help', function() {
   
    console.log("");
    console.log("usage");
  })
  // console.log(program.dest)
}
module.exports = helpOptions;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

create.js中配置命令：

const program = require('commander');

const {
   
  createProject,
  addComponent,
  addPage,
  addStore
} = require('./actions');

//<>表示必选参数， []表示可选参数， ...表可以多个
//.command为commander里面带有的，用于创建指令，description描述指令的功能，action传入执行指令时的回调函数

1
2
3
4
5
6
7
8
9
10
11
12
13