# create-fronts

**Repository Path**: caselibrary/create-fronts

## Basic Information

- **Project Name**: create-fronts
- **Description**: ☀️ Vue3 admin template | Vue Admin | Vue Template | Vue3 Admin | Vue3 Template | Vue 后台 | Vue 模板 | Vue3 后台 | Vue3 模板 | express | egg | vitepress | Vite
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-09-05
- **Last Updated**: 2026-09-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## create-fronts
用于快速生成前端项目的脚手架。执行命令后，会将选择项目的特性安装在当前目录下
## 目录结构

```text
create-front
├─ index.js                     # CLI 入口：创建项目、写入 
├─ template/                    # 项目模版（会被复制到新项目）
│  ├─ Egg                       # Egg (egg框架后端基础模板)
│  ├─ Egg_crud_swagger          # Egg_crud_swagger (egg框架后端增删改查模板)
│  ├─ Express                   # Express (express框架后端基础模板)
│  ├─ Express_crud_swagger      # Egg_crud_swagger (express框架后端增删改查模板)
│  ├─ Vue2                      # Vue (Vue2 模板 可按需添加常见功能路由,状态管理)
│  ├─ Vue2_admin_template       # Vue2_admin(Vue2+Eelement-ui后台管理系统基础模板)
│  ├─ Vue2_admin_electron       # Vue (Vue2 模板 可按需添加常见功能路由,状态管理)
│  ├─ Vue2_docs_vuepress        # Vue2_vuepress (Vue2 文档模板)
│  ├─ Vue2_case                 # Vue2_case (Vue2+Eelement-ui常见案例)  待完善
│  ├─ Vue3                      # Vue3 (Vue3 模板 可按需添加常见功能路由,状态管理)
│  ├─ Vue3_admin_template       # Vue3_admin_template(Vue2+EelementPlus后台管理系统基础模板) 
│  ├─ Vue3_electron_template    # Vue3_electron_template(Vue2+EelementPlus后台管理系统基础模板)  
│  ├─ Vue3_admin_electron       # Vue3_admin_electron (Vue3 桌面模板)  待完善
│  ├─ Vue3_docs_vitepress       # Vue3_docs_vitepress (Vue3 文档模板)  
│  ├─ Vue3_case                 # Vue3_case (Vue2+EelementPluse常见案例)  待完善
├─ utils/
│     └─ framework-features.js  # 模版更新实现（生成 patch 并应用）
│     └─ fs-extra.js            # 文件处理
└── index.js                    # CLI 入口：创建项目、写入 
```

## 模板相关资源链接
### Vue2
环境准备：node(v8.9.0)  (推荐v8.9.0以上)
可按需配置功能( Manually web select features)
element-ui （UI组件库）https://element.eleme.cn/#/zh-CN/
 Router（路由）
 Vuex （状态管理）
 Babel+Eslint
axios 
CSS-Pre-processors  
### Vue2_admin_template
代码地址：https://gitee.com/caselibrary/vue-admin-template

预览地址: https://webpreview.github.io/vue-admin-template
### Vue2_docs_vuepress
代码地址：https://gitee.com/caselibrary/vue-docs-vuepress

预览地址: https://webpreview.github.io/vue-docs-vuepress
### Vue2_admin_electron
代码地址：https://gitee.com/caselibrary/vue-admin-electron

预览地址: 
<p align="left">
  <img width="900" src="https://cdn.jsdelivr.net/gh/webpreview/img-cdn@main/vue-admin-electron-pre.png">
</p>
### Vue3
### Vue3_admin_template
代码地址：https://gitee.com/caselibrary/vue3-admin-template

预览地址: https://webpreview.github.io/vue3-admin-template
### Vue3_docs_vitepress
代码地址：https://gitee.com/caselibrary/vue3-docs-vitepress

预览地址: https://webpreview.github.io/vue3-docs-vitepress
### Vue3_admin_electron
代码地址：https://gitee.com/caselibrary/vue3-admin-electron

预览地址: 
<p align="left">
  <img width="900" src="https://cdn.jsdelivr.net/gh/webpreview/img-cdn@main/vue3-admin-electron-pre.png">
</p>
### Egg_crud_swagger
代码地址：https://gitee.com/caselibrary/egg_crud_swagger

预览地址: 
<p align="left">
  <img width="900" src="https://cdn.jsdelivr.net/gh/webpreview/img-cdn@main/crud-template-manage.png">
</p>
### Express_crud_swagger
代码地址：https://gitee.com/caselibrary/express_crud_swagger

预览地址: 
<p align="left">
  <img width="900" src="https://cdn.jsdelivr.net/gh/webpreview/img-cdn@main/crud-template-manage.png">
</p>

## 创建项目
```bash
# 第一种方式(第一次拉取比较慢,后续会直接读缓存)
npm create fronts [project_name]
# 第二种方式(第一次拉取比较慢,后续会直接读缓存)
npx create-fronts [project_name]
# 第三种方式(全局安装)
npm i -g create-fronts
create-fronts [project_name]
#或者
cf [project_name]
```