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

介绍

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

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

软件架构

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

安装教程

建议在WebStorm软件打开，并完成以下配置：
1. 配置ESLint：
2. 配置Prettier：
推荐使用node v18.16.0版本，npm v9.5.1版本，向上兼容（但也不要太新）

1.5. npm install
运行package.json中的scripts.lint命令，保证代码格式不出错
运行package.json中的scripts.serve命令，运行项目
视情况可使用OpenAPI动态生成axios请求方法集合，官方文档：https://github.com/ferdikoomen/openapi-typescript-codegen
运行成功效果：

使用说明

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

后勤

有其他问题可至我的B站私信反馈（请标明来处和目的）：https://space.bilibili.com/1198127286?spm_id_from=333.1007.0.0

项目完整目录结构：

├─.idea
│  ├─inspectionProfiles
│  └─jsLinters
├─public
└─src
    ├─access
    ├─assets
    ├─common
    │  ├─enum
    │  └─utils
    ├─components
    ├─layouts
    ├─plugins
    ├─router
    ├─store
    └─views
        ├─question
        └─user

common-code-template / common-frontend-template

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

介绍

软件架构

安装教程

使用说明

后勤

项目完整目录结构：

简介

发行版

贡献者

近期动态

common-code-template / common-frontend-template .gitee-modal { width: 500px !important; }

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

介绍

软件架构

安装教程

使用说明

后勤

项目完整目录结构：

简介

发行版

贡献者

近期动态

搜索帮助

common-code-template / common-frontend-template