---

创建项目模板开发

发布模板到npm

模板的开发需要创建一个新的文件夹，命名为 hzw-cli-dev-template 。文件夹中每一个项目都是一个模板。 新建一个目录 hzw-cli-dev-template-vue3 ，并初始化 npm init -y，这就是一个 vue3 的模板。

hzw-cli-dev-template-vue3 目录只是用来存放模板的，后面还可能会添加一些其他逻辑。目录下新建 template 文件夹，这个是真正的模板模块。

// 目录结构如下
D:\imooc-learn\hzw-cli-dev-template
├── hzw-cli-dev-template-vue3
   ├── template
   └── package.json

我们利用 vue-cli 创建一个默认模板 vue create test-vue3，然后再基于这个模板修改部分内容，成为我们自己定制的模板，把修改后的内容全部移到 template 中。

然后通过 npm publish 把模板发送到 npm 中。

将模板信息存入数据库

可以通过 mongodb compass 可视化修改数据库的数据，填入以下字段。

再次调用接口，数据正常取回。

新建请求工具模块

新建一个 @hzw-cli-dev/request 包，放在 utils 目录下。然后给它安装 axios 。

lerna create @hzw-cli-dev/request
lerna add axios utils/request

编写代码，这里不知道为什么定义了 baseUrl 就报错 connect ECONNREFUSED 127.0.0.1:80 ，为了不影响学习，就把这部分注释了。

// utils\request\lib\index.js
const axios = require('axios')

// 设置了 baseurl 就报错?????
// const BASE_URL = process.env.HZW_CLI_BASE_URL || 'http://www.duwanyu.com:7001'
// axios.defaults.baseUrl = BASE_URL

axios.defaults.timeout = 5000

// 响应拦截器
axios.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

module.exports = axios;

请求模板API

在 init\lib 下新建一个文件，专门用来获取模板信息，前面提到设置了 baseUrl 就报错，所以只能在这里进行拼接了。

// commands\init\lib\getTemplate.js
const axios = require('@hzw-cli-dev/request')
const BASE_URL = process.env.HZW_CLI_BASE_URL || 'http://www.duwanyu.com:7001'
const url = `${BASE_URL}/project/gettemplate`

module.exports = function() {
  return axios.get(url)
}

判断库里是否有模板

// commands\init\lib\index.js  prepare 方法

  const getTemplate = require('./getTemplate')
  
  async prepare() {
    // 0.判断模板是否存在
    const template = await getTemplate()
    console.log('🚀🚀 ~ InitCommand ~ template', template);
    if (!template || template.length === 0) {
      throw new Error("当前不存在项目模板")
    }
    // 省略不重要的代码
    ... ... 
  }

这样就可以正常获取请求结果了。

添加选择模板交互

模板列表使用方法动态生成。

// commands\init\lib\index.js  getInfo 方法
... ... 
{
  type: 'list',
  message: '请选择项目模板',
  name: 'template',
  default: 'vue3',
  choices: this.createTemplateChoices()
},
... ... 

 /**
   * @description: 动态创建模板选项列表
   * @param {*}
   * @return {*}
   */
  createTemplateChoices() {
    return this.template.map((item) => ({
      value: item.npmName,
      name: item.name
    }))
  }

添加了交互后，就可以在创建项目的时候选择模板了。

添加第二个模板

下载 👉👉vue-element-admin，下载成 zip 就可以。

也是先把项目跑起来

安装依赖的时候报错了，解决方案如下

• vue-element-admin\package.json 删除 "tui-editor": "1.3.3",
• vue-element-admin\src\components 删除 MarkdownEditor 文件夹
• vue-element-admin\src\views\components-demo 删除 markdown.vue 文件
• vue-element-admin\src\router\modules components.js 删除 {path: 'markdown',...}
• 使用 yarn install 安装依赖

然后 npm run dev 运行，长这个样子就启动成功了。

然后我们把代码修改成自己想要的样子，移动到 hzw-cli-dev-template 下新建的 hzw-cli-dev-template-vue-admin 目录下。

执行 npm publish 发送到 npm。

然后在数据库中添加一条数据。

现在我们的脚手架就有两个模板了。

这样做的好处是，当脚手架开发完成后，需要添加新模板时，无需改动脚手架代码，只需要把一个新的模板发布到 npm，然后在数据库中添加一条数据即可。