# common-frontend-template

**Repository Path**: cct_4/common-frontend-template

## Basic Information

- **Project Name**: common-frontend-template
- **Description**: 通用Vue3+Arco Design项目模板，集合了TypeScript、Axios、Vuex、OpenAPI等技术，详情请看README文件~
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 2
- **Created**: 2023-11-17
- **Last Updated**: 2024-05-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, ArcoDesign, Axios, Vuex

## README

# common-frontend-template(通用前端模板)

## 介绍
项目基础模板，提供基础的功能模块，base on yupi，具体如下：

0. B站完整介绍教程：https://www.bilibili.com/video/BV1jN4y1S7eC/?spm_id_from=333.999.list.card_archive.click&vd_source=3c68c4954142f1c67c2386ed8e28d42c
1. 项目语言：Vue3 + Typescript
2. 组件库：Arco Design，字节跳动开发的组件库，官方文档：https://arco.design/vue/docs/start
3. 接口工具：Axios + OpenAPI
4. 代码规范：ESLint + Prettier
5. 富文本编辑器：`@bytemd/vue-next`(md编辑器)+`monaco-editor`（代码编辑器）
6. 状态管理：Vuex
7. 路由管理：Vue Router
8. 项目构建：Vue-Cli

## 软件架构
1.  public:存放公共资源
2.  src:
    1.  components:存放组件，其中包括全局组件、页面组件（md、code编辑器）
    2.  views:存放页面，包括页面组件
    3.  assets:存放静态资源
    4.  store:存放状态管理
    5.  router:存放路由管理
    6.  common:存放公共方法和枚举
    7.  layouts：存放两种布局方式，与APP.vue联动
    8.  access：存放权限控制逻辑
3. 其余为配置类，可自行研究设置，尤其是`vue.config.js`、`App.vue`和`main.ts`

## 安装教程
0.  建议在`WebStorm`软件打开，并完成以下配置：
    1.  配置ESLint：

        ![](https://picdl.sunbangyan.cn/2023/11/17/29fc7944ff752e6cdaa767ee551ffaaf.png)
    2.  配置Prettier：

        ![](https://picss.sunbangyan.cn/2023/11/17/3a3354601a7bf2dcf144c5c677332f4c.png)
1.  推荐使用node v18.16.0版本，npm v9.5.1版本，向上兼容（但也不要太新）

    1.5. npm install

2.  运行package.json中的`scripts.lint`命令，保证代码格式不出错
3.  运行package.json中的`scripts.serve`命令，运行项目
4.  视情况可使用OpenAPI动态生成axios请求方法集合，官方文档：https://github.com/ferdikoomen/openapi-typescript-codegen
5.  运行成功效果：
![](https://picdl.sunbangyan.cn/2023/11/17/33ba56c450f7126b189e190a6ae8ba5c.png)

## 使用说明

1.  写好了基本的Arco Design组件的使用，table、button、tag等组件的使用，详情可自行研究页面
2.  遇事不决，使用Ctrl+Shift+F，全局搜索`todo`

## 后勤
有其他问题可至我的B站私信反馈（请标明来处和目的）：https://space.bilibili.com/1198127286?spm_id_from=333.1007.0.0
![bilibili](https://picdl.sunbangyan.cn/2023/11/17/0629277188fb42abe56b5417e7d09b95.png)


## 项目完整目录结构：
```lua
├─.idea
│  ├─inspectionProfiles
│  └─jsLinters
├─public
└─src
    ├─access
    ├─assets
    ├─common
    │  ├─enum
    │  └─utils
    ├─components
    ├─layouts
    ├─plugins
    ├─router
    ├─store
    └─views
        ├─question
        └─user