# zgx-cli

**Repository Path**: agaigaide/zgx-cli

## Basic Information

- **Project Name**: zgx-cli
- **Description**: giao级前端还不会脚手架？撸一个
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-12-23
- **Last Updated**: 2022-12-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# zgx-cli

学习前端脚手架实现原理，大部分代码参考来自
[https://github.com/woai3c/mini-cli](https://github.com/woai3c/mini-cli)

#### 文件目录

```
│  .gitignore
│  package.json
│  README.en.md
│  README.md
│
├─bin
│      zgx.js
│
└─lib
    │  ConfigTransform.js
    │  create.js
    │  Creator.js
    │  Ggenerator.js
    │  PromptModuleAPI.js
    │
    ├─generator
    │  ├─babel
    │  │      index.js
    │  │
    │  ├─linter
    │  │  │  index.js
    │  │  │
    │  │  └─template
    │  │          .eslintrc.js
    │  │
    │  ├─typescript
    │  │  │  index.js
    │  │  │
    │  │  └─template
    │  │          tsconfig.json
    │  │
    │  ├─vue
    │  │  │  index.js
    │  │  │
    │  │  └─template
    │  │      │  index.html
    │  │      │
    │  │      ├─public
    │  │      │      vite.svg
    │  │      │
    │  │      └─src
    │  │          │  App.vue
    │  │          │  env.d.ts
    │  │          │  main.ts
    │  │          │  style.css
    │  │          │
    │  │          ├─assets
    │  │          │      vue.svg
    │  │          │
    │  │          └─components
    │  │                  HelloWorld.vue
    │  │
    │  └─webpack
    │      │  index.js
    │      │
    │      └─template
    │          └─build
    │                  webpack.dev.js
    │                  webpack.prod.js
    │
    ├─promptModules
    │      babel.js
    │      linter.js
    │      typescript.js
    │
    └─utils
            configTransforms.js
            excuteCommand.js
            normalizeFilePaths.js
            sortObject.js
            writeFileTree.js
```

#### 使用方法

1. 项目下载至本地后，执行`npm install`命令安装依赖。
2. 执行`npm link`命令将`zgx`注册成全局命令
3. 打开命令行工具开始创建第一个项目, `zgx create appname`

#### 特性说明

第一个版本基于 webpack5 和 vue3 生成项目，也支持 typescript 和 eslint，后续计划添加 react 选项。

#### 效果

![输入图片说明](zgx1.gif)
![输入图片说明](zx.png)