generate-custom-template-cli/readme.md

自定义模板生成CLI工具

# `generate-custom-template-cli`: 一个帮助你快速搭建和开发前端项目的 CLI

## 1.如何安装？

```shell
npm install generate-custom-template-cli -g
```

## 2.创建项目

```shell
gnt create your_project_name
```

会自动拉取项目模板、安装项目依赖、打开浏览器 `http://localhost:8888/`、自动启动项目

## 3.其它功能

### 3.1 创建组件：

```shell
gnt addcpn YourComponentName # 例如gnt add NavBar，默认会存放到src/components文件夹中
gnt addcpn YourComponentName -d src/pages/home # 也可以指定存放的具体文件夹
```

### 3.2 创建页面，并配置路由

```shell
gnt addpage YourPageName # 例如gnt addpage Home，默认会放到src/pages/home/Home.vue中，并且会创建src/page/home/router.js
gnt addpage YourPageName -d src/views # 也可以指定文件夹，但需要手动集成路由
```

为什么会创建 router.js 文件：

- `router.js`文件是路由的其中一个配置；
- 创建该文件中 `src/router/index.js`中会自动加载到路由的 `routes`配置中，不需要手动配置了（如果是自己配置的文件夹需要手动配置）

`src/router/index.js`中已经完成如下操作：

```js
// 动态加载pages中所有的路由文件
const files = require.context("@/pages", true, /router\.js$/);
const routes = files.keys().map((key) => {
  const page = require("@/pages" + key.replace(".", ""));
  return page.default;
});
```

### 3.3 创建状态管理子模块

```shell
gnt addstore YourVuexChildModuleName # 例如gnt addstore home，默认会放到src/store/modules/home/index.js和types.js
gnt addstore YourVuexChildModuleName -d src/vuex/modules # 也可以指定文件夹
```

创建完成后，不需要手动配置，已经动态将所有子模块集成进去：

```js
// 动态加载modules
const modules = {};
const files = require.context("./", true, /index\.js$/);
files
  .keys()
  .filter((key) => {
    if (key === "./index.js") return false;
    return true;
  })
  .map((key) => {
    // 获取名字
    const modulePath = key.replace("./modules/", "");
    const moduleName = modulePath.replace("/index.js", "");
    const module = require(`${key}`);

    modules[`${moduleName}`] = module.default;
  });
```