【架构师（第十五篇）】脚手架之创建项目模板开发

---

创建项目模板开发

发布模板到npm

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

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

代码语言：javascript复制

// 目录结构如下
D:imooc-learnhzw-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 。

代码语言：javascript复制

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

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

代码语言：javascript复制

// utilsrequestlibindex.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

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

代码语言：javascript复制

// commandsinitlibgetTemplate.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)
}

判断库里是否有模板

代码语言：javascript复制

// commandsinitlibindex.js  prepare 方法

  const getTemplate = require('./getTemplate')
  
  async prepare() {
    // 0.判断模板是否存在
    const template = await getTemplate()
    console.log('


	

vue.js npm 数据库 sql markdown 


	




	
 0 人点赞