Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/code-device/x-build
A front-end scaffolding built on Vite2 + Vue3 + TypeScript.
https://github.com/code-device/x-build
pinia typescript vite vue3
Last synced: about 1 month ago
JSON representation
A front-end scaffolding built on Vite2 + Vue3 + TypeScript.
- Host: GitHub
- URL: https://github.com/code-device/x-build
- Owner: codexu
- License: mit
- Created: 2017-02-13T03:54:56.000Z (over 7 years ago)
- Default Branch: next
- Last Pushed: 2023-01-11T01:43:48.000Z (over 1 year ago)
- Last Synced: 2024-05-21T19:16:57.218Z (4 months ago)
- Topics: pinia, typescript, vite, vue3
- Language: TypeScript
- Homepage: https://code-device.github.io/x-build/
- Size: 17.7 MB
- Stars: 763
- Watchers: 11
- Forks: 121
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# X-BUILD
一款协助你快速从"零"搭建大型应用的前端脚手架。
## 简介
**X-BUILD** 基于 [`vue3`](https://v3.cn.vuejs.org/) + `typescript`，使用 `vite` 构建项目，支持众多的开箱即用的功能和针对项目进行了不同程度的优化，初始模板打包后体积仅为 **150kb / 50kb(gzip)**。它的宗旨是快速创建一套**纯净**却具备强大基础功能的模板，协助开发者自由发挥快速搭建任何类型的项目。
## 文档
[文档地址](https://code-device.github.io/x-build/)
## 如何使用？
### CLI
你可以通过全局安装 `X-BUILD`，它本质上是一款 `CLI` (command-line interface，中文：命令行界面) ，提供了一系列的选项，为你生成一套适合于你的前端开发模板，这套模板已经提供了许多通用的基础功能，为你的项目打下坚实的基础。
### 基于 X-BUILD 打造自己的脚手架
通常情况下，每个团队的习惯不同，尽管 `X-BUILD` 提供了可选项辅助生成个性化模板，但不能满足所有人的需求，所以基于 `X-BUILD` 打造一套自己的脚手架是一个更好的选择，你可以通过 `Fork` 本仓库，修改成你的团队的开发习惯。
## 核心功能
脚手架可以快速帮你创建一份空白模板，提供了许多通用的功能：
### 应用
- 基于文件的路由
- 提供`环境变量`：开发环境、预生产环境、生产环境
- 基于 `Pinia` 实现的全局状态管理，更好的支持 TS
- 提供一个基于 `mitt` 的组件联动交互的解决方案
- 提供实用 `Hooks`，更多情况下推荐使用 [vueuse](https://vueuse.org/guide/)
- 基于 `axios` 异步请求封装
- 基于环境变量的静态资源组件
- 自动加载 `SVG` 的图标组件，雪碧图打包
- 页面登录访问权限、指令权限
- 页面缓存（基于 `keep-alive` 实现）
- 支持 `gzip`
- 支持 PWA
### UI
- 布局系统
- 可选 `Less` 或 `Sass/Scss` 预处理器
- 根据路由与环境变量自动变化标签栏 Title
- 静态资源加载页面
- 页面载入进度条
### 规范
- ESLint **Airbnb** 规范
- Stylelint
- husky & Commitlint
## 浏览器支持
本地开发：推荐使用 最新版浏览器，不支持 Chrome 80 以下版本。
生产环境：支持现代浏览器, **不支持 **。
| IE | Edge | Firefox | Chrome | Safari |
| ----------- | --------------- | --------------- | --------------- | --------------- |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## 贡献代码
文档代码在项目的 `/document` 中，由于文档中有部分 vue3 的功能演示，所以采用 vuepress2 开发。
有任何修改和建议都可以该项目 pr 和 issue，详情请参考 [贡献代码](/Contribution/README.md)。