clouds-cli/README.md

Fast front-end scaffolding tools

# 说明文档

## `clo`: 一个帮助你快速搭建和开发前端项目的 CLI

> 基于 cloud 的命名简写，无所谓啦～

如何安装？

```shell
npm install clouds-cli
```

## 创建项目

目前支持 Vue，其他待考虑中~

vue 项目模块本人习惯配置基本符合主流开发功能：
（基于当前最流行的 vue3+ts+pinia 的工程化项目搭建）

- 常用的目录结构
- vite
- axios(后续封装)
- vue-router
- pinia

创建项目

```shell
clo create your_project_name
```

自动拉取项目模板、安装项目依赖、打开浏览器 `xxxxxx`、自动启动项目,如果启动失败，手动启动即可

## 项目开发

项目开发目前提供三个功能：

- 创建 Vue 组件
- 创建 Vue 页面，并配置路由

### 创建 Vue 组件：

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

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

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

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

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