自定义封装 vue多页项目新增项目脚手架

背景

在多页项目中，有时候新建项目需要基于原先的项目拷贝一份，还需要在public上新增html入口，修改vue.config.js配置....这个过程比较繁琐，而且容易漏掉，所以封装了一个自动化的脚手架工具

使用

原先方式：手动增加
- 在src目录下新增项目,main.ts中监听版本号的initVersionUpdateJson传入参数改成新的模块（注意，这里拷贝整个项目后需要把项目内的引用改一下，比如新建项目是B, 拷贝的是A项目，需要全局将@/views/A/XXX 改成@/views/B/XXXX）
- 在public目录下新增一个html文件
- 配置vue.config.js中的pages参数，新增一个item
- 在首页（src/views/Home/index.vue）添加新入口项
- 在version.json中增加该项目版本
现在：使用自动化工具
- 安装：npm install hcli
- 使用：hcli create 交互式提示将询问：
  - 是否创建新的项目（confirm）
  - 项目名称（name）
  - 在首页显示的标题（title）
  - 选择要复用的模板（model，列举例如 A项目, B项目....）

如何实现

前置知识

node bin 封装插件
node模块（commander /inquirer /fs/ chalk)

实现

初始化项目npm init -y，新建bin/hcli.js文件,内容如下 // 在package.json中的配置 { "name": "hcli", "version": "1.0.0", "description": "", "main": "index.js", "bin": { "hcli": "bin/hcli.js" }, "scripts": { "publish": "npm publish", "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "commander": "^14.0.2", "inquirer": "^12.11.1" } }
javascript 复制代码
```
// bin/hcli.js 内容
#!/usr/bin/env node
 console.log('hello,world')
```

调试：在当前目录下npm link,在调试的目录下npm link hcli; 这时候执行hcli就会打印hello,world

为了实现hcli create功能，需要使用commander这个模块, 在bin/hcli.js文件中

javascript 复制代码

#!/usr/bin/env node
const { program } = require('commander')
const create = require('../src/create')

program.command('create').description('create a project ').action(() => {
  console.log('create project')
})

program.parse(process.argv)

在hcli create时需要出现交互界面运行用户输入选择，这时候需要用到inquirer模块

javascript 复制代码

// 新增src/question.js文件
const create = [
    {
        name:'conf',
        type:'confirm',
        message:'是否创建新的项目？'
    },{
        name:'name',
        message:'请输入项目名称？',
        when: res => Boolean(res.conf)
    },{
        name:'title',
        message:'请输入项目在首页的标题？',
        when: res => Boolean(res.conf)
    },{
        type: 'list',
        message: '请选择要复用的项目模版？',
        name: 'model',
        choices: ['A','B','C' ....],
        filter: function(val) {
          return val.toLowerCase()
        },
        when: res => Boolean(res.conf)
    }
]
module.exports = {
    create
}

// 新增src/inquirer.js文件
const inquirer = require('inquirer')
const questions = require('./question')
const prompt = inquirer.prompt || (inquirer.default && inquirer.default.prompt)

const create = () => {
  return new Promise((resolve) => {
    prompt(questions.create).then(res => {
      resolve(res)
    })
  })
}

module.exports = {
  create
}

/// bin/hcli.js文件
#!/usr/bin/env node
const { program } = require('commander')
const inquirer = require('../src/inquirer')
const create = require('../src/create')

program.command('create').description('create a project ').action(() => {
  console.log('create project')
  inquirer.create().then(res=>{
		if(res.conf){
                // todo
                 create(res)
		}
    console.log('res', res)
	})
})
program.parse(process.argv)

最重要的就是根据inquirer传入的res参数来实现create功能

scss 复制代码

const fs = require('fs')
const path = require('path')
const copy = require('../utils/copyFile.js')

module.exports = function(res){
    /**
    * 1、在src/view下创建name目录，将model目录下的文件复制过去
    * 2、在public目录下创建name.html文件
    * 3、修改vue.config.js文件，添加新的入口
    * 4、在home项目中增加入口
    * 5、在public/versions.json中添加版本信息
    * **/
    createBaseProject(res)
    createPublicHtml(res)
    updateVueConfig(res)
    addHomeEnetry(res)
    addVersion(res)
}

function createBaseProject(res){
    ....
}

function createPublicHtml(res){
 ...
}

function updateVueConfig(res) {
 ...
}

const addVersion = (res) => {
 ...
}

这里create方法需要根据自己实际项目的需求来实现～只需列出具体框架，其他让AI实现就好了

参考文章： developer.aliyun.com/article/125...