Ray Template

感谢

感谢 https://yunkuangao.me/ 对于本人的支持。

提示

项目默认启用严格模式 eslint，但是由于 vite-plugin-eslint 插件优先级最高，所以如果出现自动导入类型错误提示，请优先解决其他问题。 建议开启 vscode 保存自动修复功能。

前言

该项目模板采用 vue3.x vite3.2 tsx 进行开发，使用 naive ui 作为组件库。意在提供一个简洁、快速上手的模板。

版本说明

做了一些大的改动升级，让模板更加好用了一点，默认主题色也做了变更更好看了一点。啰嗦两句，好像也没啥其他的了...

功能

• 主题切换
• 错误页
• 动态切换主题、贴花的 EChart 图
• 带有拓展功能的表格
• 还有一些不值一提的小东西...

预览地址

点击预览

文档地址

点击查看

拉取依赖

# yarn

yarn

# npm

npm install

启动项目

# yarn

yarn dev

# npm

npm run dev

项目打包

# yarn

yarn build

# npm

npm run build

预览项目

# yarn

yarn preview

# npm

npm run preview

项目依赖

• pinia 全局状态管理器
• @vueuse vue3 hooks
• vue-router router
• axios ajax request
• vue-i18n 国际化
• scrollreveal.js 滚动加载动画(暂时移除)
• crypto-js 加密
• vite-svg-loader svg组件化
• vite-plugin-svg-icons svg雪碧图
• echarts5 可视化
• lodash-es 拓展方法
• 还有一些后续补充的，懒得写了。。。自己看项目依赖页面

基础组件

• 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

最后，希望大家搬砖愉快

贡献者

Cloud 🔧

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!