本项目基于 Vue3.0、Vite、 Naive UI和TypeScript 开发,使用了最新的前端技术栈,并提炼了典型的业务模型,页面,包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能。
- 安装nodejs
nodejs获取地址:node
- 安装yarn
npm install -g yarn
- 安装依赖
yarn install
- 运行
yarn dev
- 打包:进入项目根目录,执行如下命令
yarn build
- 将打包好的dist文件夹压缩成dist.zip包
- 通过ssh登录到服务器,使用
sudo su
切换到root用户 - 进入部署目录(/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 |