
<h1 align="center">SmartMeteringFront</h1>

<p align="center">计量管理系统</p>

## 简要说明
<p>
    本项目基于Fantastic-admin改造而来
    <a href="https://hooray.gitee.io/fantastic-admin/" target="_blank">Fatastic-admin官网</a>
    ( <a href="https://hooray.github.io/fantastic-admin" target="_blank">备用</a> )
<p>

## 特点

- 丰富的布局与主题，覆盖市面上各种中后台应用场景，兼容PC、平板和移动端
- 提供系统配置文件，轻松实现个性化定制
- 精心设计的动效，让每一处的动画都干净利落
- 根据路由配置自动生成导航栏
- 基于文件系统的路由
- 支持全方位权限验证
- 内置多级路由最佳缓存方案
- 轻松实现国际化多语言适配
- 提供接近于浏览器原生标签栏操作体验的标签页功能

## 分支说明

- `master` Vue3 版本框架源码分支，不含示例代码，可直接用于实际开发
- `dev` 开发分支

## 预览


<table>
    <tr>
        <td><img src="https://hooray.gitee.io/fantastic-admin/preview1.png" /></td>
        <td><img src="https://hooray.gitee.io/fantastic-admin/preview2.png" /></td>
        <td><img src="https://hooray.gitee.io/fantastic-admin/preview3.png" /></td>
    </tr>
    <tr>
        <td><img src="https://hooray.gitee.io/fantastic-admin/preview4.png" /></td>
        <td><img src="https://hooray.gitee.io/fantastic-admin/preview5.png" /></td>
        <td><img src="https://hooray.gitee.io/fantastic-admin/preview6.png" /></td>
    </tr>
</table>

## 开发环境
使用本模板前，需要在本地依次安装好 Node.js, pnpm, Git 和 Visual Studio Code。

> 注意:
> Node.js 版本需 >= 14.18.0 ，建议为 16.x

然后在 Visual Studio Code 里安装好以下扩展：

- EditorConfig for VS Code
- DotENV
- ESLint
- stylelint
- Vue Language Features
- TypeScript Vue Plugin

以上 6 个为开发时必备扩展，以下则是作者建议安装的扩展，安装它们将在一定程度上提升开发效率。

- Chinese (Simplified) Language Pack for Visual Studio Code 中文语言包
- Color Highlight 在代码中高亮颜色
- Highlight Matching Tag 高亮显示匹配的标签
- Image preview 图片预览
- indent-rainbow 彩虹缩进提示

在 Visual Studio Code 里打开源码的文件夹，右下角会自动提示需要安装的依赖，直接点击安装即可。

## pnpm指令
```
#安装全部依赖
pnpm install

#安装特定依赖
pnpm add 包名

#运行
pnpm run dev

#打包
pnpm run build
```

## 技术栈
了解并熟悉框架使用到的技术栈，能让你使用本框架更得心应手。

- <a href="https://cn.vitejs.dev/" target="_blank">Vite</a>
- <a href="https://cn.vuejs.org/" target="_blank">Vue 3 (v3 迁移指南)</a>
- <a href="https://router.vuejs.org/zh/" target="_blank">Vue Router 4</a>
- <a href="https://pinia.vuejs.org/zh/" target="_blank">Pinia</a>
- <a href="https://element-plus.org/zh-CN/" target="_blank">Element Plus</a>

## 浏览器支持情况

主流浏览器和,不支持IE。

|   Edge | Firefox |Chrome | Safari |
|--------- | --------- | --------- |------|
|  90+  |  80+ | 90+ |14+|

## License

Copyright (c) 2022-present WangXiaoying
