【架构师（第十五篇）】脚手架之创建项目模板开发
创建项目模板开发
发布模板到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，然后在数据库中添加一条数据即可。
腾讯云开发者
