willwan92 / admin-frontend

简介

本项目基于 Vue3.0、Vite、 Naive UI和TypeScript 开发，使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能。

开发环境准备

• 安装nodejs

nodejs获取地址：node

• 安装yarn

npm install -g yarn

项目运行

• 安装依赖

yarn install

• 运行

yarn dev

项目部署

1. 打包：进入项目根目录，执行如下命令

yarn build

2. 将打包好的dist文件夹压缩成dist.zip包
3. 通过ssh登录到服务器，使用sudo su切换到root用户
4. 进入部署目录（/usr/local/var/html），通过命令 rz -y 将dist.zip上传到部署目录 通过unzip dist.zip解压压缩包，部署完成。

开发依赖文档

• node 和 git -项目开发环境
• Vite - 熟悉 vite 特性
• Vue3 - 熟悉 Vue 基础语法
• TypeScript - 熟悉TypeScript基本语法
• Es6+ - 熟悉 es6 基本语法
• Vue-Router-Next - 熟悉 vue-router 基本使用
• Naive-ui - ui 基本使用

项目目录

├── build # 打包脚本相关

│   ├── script # 脚本

│   └── vite # vite配置

├── public # 公共静态资源目录

├── src # 主目录

│   ├── api # 接口文件

│   ├── assets # 资源文件

│   │   ├── icons # icon sprite 图标文件夹

│   │   ├── images # 项目存放图片的文件夹

│   ├── components # 公共组件

│   ├── directives # 指令

│   ├── enums # 枚举/常量

│   ├── hooks # hook

│   │   ├── core # 基础hook

│   │   ├── event # 事件相关hook

│   │   ├── setting # 配置相关hook

│   │   └── web # web相关hook

│   ├── layouts # 布局文件

│   ├── main.ts # 主入口

│   ├── router # 路由配置

│   ├── settings # 项目配置

│   │   ├── animateSetting.ts # 动画配置

│   │   ├── componentSetting.ts # 组件配置

│   │   ├── designSetting.ts # 样式配置

│   │   ├── projectSetting.ts # 项目配置

│   ├── store # 数据仓库

│   ├── utils # 工具类

│   └── views # 页面

├── types # 类型文件

├── vite.config.ts # vite配置文件

浏览器支持

本地开发推荐使用Chrome 80+ 浏览器

支持现代浏览器, 不支持 IE

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions