<p align='center' style="font-size: 30px;font-family: 'PingFang HK',sans-serif">
<img width="200px" 
style="display:block; margin:0 auto;" 
src="https://avatars.githubusercontent.com/u/111622499?s=200&v=4" 
alt="A cli for quickly generating project templates, supporting vite, vue3, react, element-plus, ant design, windicss, unocss">
<p align='center' style="font-size: 30px;font-family: 'PingFang HK',sans-serif">Be-CLI</p>
</p>

<p align='center' style="font-size: 16px;font-family: 'PingFang HK',sans-serif">
A cli for quickly generating project template
</p>

<p  align='center' style="margin:0 auto;width: 740px;display:block">
<img style="margin: 10px" width="80px" src="https://vitejs.dev/logo.svg"/>
<img style="margin: 10px" width="80px" src="https://vuejs.org/images/logo.png"/>
<img style="margin: 10px" width="80px" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/react/react.png"/>
<img style="margin: 10px" width="80px" src="https://raw.githubusercontent.com/unocss/unocss/main/playground/public/icon-gray.svg"/>
<img style="margin: 10px" width="80px" src="https://next.windicss.org/assets/logo.svg"/>
<img style="margin: 10px" width="80px" src="https://avatars.githubusercontent.com/u/68583457?s=200&v=4"/>
<img style="margin: 10px" width="80px" src="https://qn.antdv.com/logo.png" />
</p>


# Be-CLI 🦋 🚀

> A simple project template with [Vite.js](https://vitejs.dev/)

This template should help get you started developing with Vue or React and Typescript in Vite in a bliss.

## Features

- ⚡️ [Vite](https://github.com/vitejs/vite)️, 
- ☘️ [Vue3](https://github.com/vuejs/vue),
- 🔥 [React](https://github.com/facebook/react)
- 🌷 [UnoCSS](https://github.com/unocss/unocss)
- 🌺 [WindiCSS](https://github.com/windicss/windicss)
- 🍵 [Element-Plus](https://github.com/element-plus/element-plus)
- 🍁 [Ant Design Vue](https://github.com/vueComponent/ant-design-vue)

### Styling

- [UnoCSS](https://github.com/unocss/unocss) with The instant on-demand Atomic CSS engine.
- [WindiCSS](https://github.com/windicss/windicss) Next generation utility-first CSS framework.

### UI Components

- [Element-Plus](https://github.com/element-plus/element-plus)  🎉 A Vue.js 3 UI Library made by Element team
- [Ant Design Vue](https://github.com/vueComponent/ant-design-vue) 🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

### Unit Test

- [Vitest](https://github.com/vitest-dev/vitest) A Vite-native test framework. It's fast!
- [Jest](https://github.com/facebook/jest) Delightful JavaScript Testing.

### How to ues ? 

#### Install

```` 1. shell
$ pnpm install be-ui-cli --global
````

#### 2.Input your project name

```` shell
$ sudo be-ui-cli create
? please input your project name › be-cli-project
````

#### 3. Select template type

```` shell
? please select a template type › 
❯   vue + vite template
    react + vite template
    lib template
````

#### 4. Select UI component

```` shell
? please select a ui component library ›
❯   element-plus
    ant design vue
````

#### 4. Select a css atom library

```` shell
? please select a css atom library ›
❯   windicss
    unocss
    Don't need
````

#### 5. Select a unit test library

```` shell
? please select a unit test library ›
❯   vitest
    jest
    Don't need
````

#### create project

```` shell
start creating project <be-cli-project> ...
⠋ Loading
start creating package.json ...

start setting windicss ...

set windicss success !

start setting vitest ...

set vitest success !

create package.json success !
✔ 
create project <be-cli-project> success !

````

### Other
#### -v ｜ --version
Display version message

```` shell
be-ui-cli -v
````

#### -h ｜ --help
Display help message

```` shell
be-ui-cli -h
````
