Xbase 帮助中心

Appearance

概述 ​

xbase 是一个前后端分离的信创开源框架， 本文主要对前端技术进行概要介绍和开发指引。请仔细查看这份 xbase 前端框架的食用指南，祝您用餐愉快。有任何意见请联系(admin@xplaza.cn)。

xbase 框架使用到的前端技术主要有 vue3， axios，pinia，Vue Router，tailwindcss，typescript，vee-validate，heroicons等。框架中组件全部自主研发，以发布 x前端 框架为目标，做到技术真正自主可控。在对上述技术有了初步了解后，您就可以开始您的 xbase 前端之旅了。为了更简洁明了的进行阐述，之后本文中无特殊说明 xbase、xbase框架 都仅指代 xbase 前端。

1. 启动前端项目 ​

text
1 xbase 推荐使用 16 以上的 node 版本，使用 yarn 进行包管理，这仅是我们的一个小建议无强制要求。
2 xbase 使用 vite 进行编译打包，同时集成了 vitest 可自定义实现前端测试。
3 全局配置文件主要有：vite.config.ts、tsconfig.json、tailwind.config.js、vitest.config.js。
1 xbase 推荐使用 16 以上的 node 版本，使用 yarn 进行包管理，这仅是我们的一个小建议无强制要求。
2 xbase 使用 vite 进行编译打包，同时集成了 vitest 可自定义实现前端测试。
3 全局配置文件主要有：vite.config.ts、tsconfig.json、tailwind.config.js、vitest.config.js。

2. xbase 包含哪些 ​

1 xbase 项目现在包含的功能模块主要有【个人信息管理】、【公司信息管理】以及【项目信息管理】。
- 【个人信息管理】主要包含登录，注册，修改密码以及个人信息增删改查等
- 【公司信息管理】主要包含公司注册、公司信息修改以及公司人员管理等
- 【项目信息管理】我们主要是作为一个标准的增删改查功能模块进行展示，详细情况可以查看对应的《xbase前端CURD标准》
 
2 xbase 提供哪些扩展功能
  换肤功能：可以进行全局换肤，目前有两个主题，蓝色与红色主题，可以通过新增 css 文件新增主题或修改。
  头部：我们进行了全局的 header 组件注册（存放在view文件中的 common 文件中），如果需要可以直接引用。
  底部：我们进行了全局的 footer 组件注册（存放在view文件中的 common 文件中），如果需要可以直接引用。
  404：我们进行了全局的 404 组件注册（存放在view文件中的 common 文件中），如果需要可以直接引用。
  返回顶部：我们进行了全局的返回顶部组件注册（存放在view文件中的 common 文件中），如果需要可以直接引用。
  
3 xbase 提供全局字典功能
  全局字典存放 biz 文件夹中 global 文件夹中，有全局返回 code 码状态（global.ts），可供新增修改等功能。
  有公司状态字典，可供新增修改公司状态等功能。
  有全局表单校验字典以及公司校验字典，提供了基础的表单校验规则，可新增修改表单规则等功能。
  
4.xbase 提供了用户的全局状态
  存放在 tool 文件夹的 db 文件夹中，里面存了基本的 user 用户信息。可以新增或修改用户信息等。
  
5 axios
  我们对 axios 做了请求以及返回的拦截器，封装了两个不同的请求头，一个是通用的，一个针对文件传输的。目录位于tool文件夹中的HTTP文件夹中。
  
6 ts
  关于 ts 的应用，xbase 文件并没有所有地方都用上了，只在有需求的时候才用到。我们封装了一些基础的Mo（例如登录注册），Vo（例如返回格式），请根据具体业务自行开发确认方案。

7 Tailwind CSS
  xbase 摒弃了以往臃肿的第三方ui框架，采用全线自研，做到真正的安全自主可控。当然，目前的项目也存在缺陷，因为时间原因，组件功能并不完善。基于这个缺陷，我们 xbase 应用了 Tailwind CSS 框架，补足这方便的不足。

8 vee-validate
  veeValidate 是专用于 Vue.js 的验证库。它有很多开箱即用的验证规则，也支持自定义验证规则。

9 heroicons
  heroicons 是由 tailwindcss 开发人员制作而成。目前已收集292个纯手绘的常见场景的图标，而且是 SVG 矢量格式，它的好处是可以任意放大缩小而不影响图标的质量。
  
10 xbase 封装了部分全局组件
  xbase封装的公共组件都以X+名字定义组件名，代码位于 xui 文件夹中，我们在 main.ts 里面注册了部分全局组件，目前包含抽屉，空状态，消息提示，确认提示框，分页等。

11 xbase 封装了一部分自定义指令，代码位于direct文件夹中，目前封装了加载中，图片放大缩小，弹出框指令。
1 xbase 项目现在包含的功能模块主要有【个人信息管理】、【公司信息管理】以及【项目信息管理】。
- 【个人信息管理】主要包含登录，注册，修改密码以及个人信息增删改查等
- 【公司信息管理】主要包含公司注册、公司信息修改以及公司人员管理等
- 【项目信息管理】我们主要是作为一个标准的增删改查功能模块进行展示，详细情况可以查看对应的《xbase前端CURD标准》
 
2 xbase 提供哪些扩展功能
  换肤功能：可以进行全局换肤，目前有两个主题，蓝色与红色主题，可以通过新增 css 文件新增主题或修改。
  头部：我们进行了全局的 header 组件注册（存放在view文件中的 common 文件中），如果需要可以直接引用。
  底部：我们进行了全局的 footer 组件注册（存放在view文件中的 common 文件中），如果需要可以直接引用。
  404：我们进行了全局的 404 组件注册（存放在view文件中的 common 文件中），如果需要可以直接引用。
  返回顶部：我们进行了全局的返回顶部组件注册（存放在view文件中的 common 文件中），如果需要可以直接引用。
  
3 xbase 提供全局字典功能
  全局字典存放 biz 文件夹中 global 文件夹中，有全局返回 code 码状态（global.ts），可供新增修改等功能。
  有公司状态字典，可供新增修改公司状态等功能。
  有全局表单校验字典以及公司校验字典，提供了基础的表单校验规则，可新增修改表单规则等功能。
  
4.xbase 提供了用户的全局状态
  存放在 tool 文件夹的 db 文件夹中，里面存了基本的 user 用户信息。可以新增或修改用户信息等。
  
5 axios
  我们对 axios 做了请求以及返回的拦截器，封装了两个不同的请求头，一个是通用的，一个针对文件传输的。目录位于tool文件夹中的HTTP文件夹中。
  
6 ts
  关于 ts 的应用，xbase 文件并没有所有地方都用上了，只在有需求的时候才用到。我们封装了一些基础的Mo（例如登录注册），Vo（例如返回格式），请根据具体业务自行开发确认方案。

7 Tailwind CSS
  xbase 摒弃了以往臃肿的第三方ui框架，采用全线自研，做到真正的安全自主可控。当然，目前的项目也存在缺陷，因为时间原因，组件功能并不完善。基于这个缺陷，我们 xbase 应用了 Tailwind CSS 框架，补足这方便的不足。

8 vee-validate
  veeValidate 是专用于 Vue.js 的验证库。它有很多开箱即用的验证规则，也支持自定义验证规则。

9 heroicons
  heroicons 是由 tailwindcss 开发人员制作而成。目前已收集292个纯手绘的常见场景的图标，而且是 SVG 矢量格式，它的好处是可以任意放大缩小而不影响图标的质量。
  
10 xbase 封装了部分全局组件
  xbase封装的公共组件都以X+名字定义组件名，代码位于 xui 文件夹中，我们在 main.ts 里面注册了部分全局组件，目前包含抽屉，空状态，消息提示，确认提示框，分页等。

11 xbase 封装了一部分自定义指令，代码位于direct文件夹中，目前封装了加载中，图片放大缩小，弹出框指令。