mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-05 19:42:07 +08:00
146 lines
3.0 KiB
Markdown
146 lines
3.0 KiB
Markdown
# `Ray Template`
|
||
|
||
## 提示
|
||
|
||
> 项目默认启用严格模式 `eslint`，但是由于 `vite-plugin-eslint` 插件优先级最高，所以如果出现自动导入类型错误提示，请优先解决其他问题。
|
||
> 建议开启 `vscode` 保存自动修复功能。
|
||
|
||
## 前言
|
||
|
||
> 该项目模板采用 `vue3.x` `vite3.2` `tsx` 进行开发，使用 `naive ui` 作为组件库。意在提供一个简洁、快速上手的模板。
|
||
|
||
## 版本说明
|
||
|
||
> 做了一些大的改动升级，让模板更加好用了一点，默认主题色也做了变更更好看了一点。啰嗦两句，好像也没啥其他的了...
|
||
|
||
## 功能
|
||
|
||
- 主题切换
|
||
- 错误页
|
||
- 动态切换主题、贴花的 `EChart` 图
|
||
- 带有拓展功能的表格
|
||
- 还有一些不值一提的小东西...
|
||
|
||
## 预览地址
|
||
|
||
[点击预览](https://xiaodaigua-ray.github.io/#/)
|
||
|
||
## 文档地址
|
||
|
||
[点击查看](https://xiaodaigua-ray.github.io/ray-template-doc/)
|
||
|
||
## 拉取依赖
|
||
|
||
```sh
|
||
# yarn
|
||
|
||
yarn
|
||
```
|
||
|
||
```sh
|
||
# npm
|
||
|
||
npm install
|
||
```
|
||
|
||
## 启动项目
|
||
|
||
```sh
|
||
# yarn
|
||
|
||
yarn dev
|
||
```
|
||
|
||
```sh
|
||
# npm
|
||
|
||
npm run dev
|
||
```
|
||
|
||
## 项目打包
|
||
|
||
```sh
|
||
# yarn
|
||
|
||
yarn build
|
||
```
|
||
|
||
```sh
|
||
# npm
|
||
|
||
npm run build
|
||
```
|
||
|
||
## 预览项目
|
||
|
||
```sh
|
||
# yarn
|
||
|
||
yarn preview
|
||
```
|
||
|
||
```sh
|
||
# npm
|
||
|
||
npm run preview
|
||
```
|
||
|
||
## 项目依赖
|
||
|
||
- [pinia](https://pinia.vuejs.org/) `全局状态管理器`
|
||
- [@vueuse](https://vueuse.org/) `vue3 hooks`
|
||
- [vue-router](https://router.vuejs.org/zh/) `router`
|
||
- [axios](http://axios-js.com/zh-cn/docs/index.html) `ajax request`
|
||
- [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html) `国际化`
|
||
- [scrollreveal.js](https://scrollrevealjs.org/) `滚动加载动画`(暂时移除)
|
||
- [crypto-js](https://github.com/brix/crypto-js) `加密`
|
||
- [vite-svg-loader](https://github.com/jpkleemans/vite-svg-loader) `svg组件化`
|
||
- [vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md) `svg雪碧图`
|
||
- [echarts5](https://echarts.apache.org/examples/zh/index.html#chart-type-line) `可视化`
|
||
- [lodash-es](https://www.lodashjs.com/) `拓展方法`
|
||
- 还有一些后续补充的，懒得写了。。。自己看项目依赖页面
|
||
|
||
## 基础组件
|
||
|
||
- `RayIcon` `svg icon`
|
||
- `RayChart` 基于 `echarts5.x` 封装可视化组件
|
||
- `RayTransitionComponent` 带过渡动画路由组件，效果与 `RouterView` 相同
|
||
- `RayTable` 基于 `Naive UI DataTable` 组件封装，实现了一些小功能
|
||
- `RayCollapseGrid` 基于 `Naive UI NGrid` 组件封装的可折叠操作栏
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
- locales: 国际化多语言入口(本项目采用 json 格式)
|
||
|
||
- assets: 项目静态资源入口
|
||
|
||
- component: 全局共用组件
|
||
|
||
- icons: 项目svg图标资源，需要配合 RayIcon 组件使用
|
||
|
||
- language: 国际化
|
||
|
||
- layout: 全局页面结构入口
|
||
|
||
- router: 路由表
|
||
|
||
- store: 全局状态管理入口
|
||
|
||
- styles: 全局公共样式入口
|
||
|
||
- types: 全局 type
|
||
|
||
- utils: 工具包
|
||
|
||
- views: 页面入口
|
||
|
||
- vite-plugin: 插件注册
|
||
```
|
||
|
||
## 浏览器支持
|
||
|
||
> 仅支持现代浏览器，不支持 `IE`
|
||
|
||
## 最后，希望大家搬砖愉快
|