环境准备
本地环境需要安装 Yarn1.x、Node.js 和 Git
注意
必须使用Yarn1.x
,否则依赖可能安装不上。
Node.js 版本要求12.x
以上,且不能为13.x
版本,这里推荐14.x
及以上。
如果此项条件没有满足的话,yarn install 的时候会报错
例:
安装依赖
yarn 安装
必须使用
Yarn
进行依赖安装(若其他包管理器安装不了需要自行处理)。如果未安装yarn,可以用下面命令来进行全局安装
全局安装yarn
npm i -g yarn
验证
yarn -v # 出现对应版本号即代表安装成功
#依赖安装命令
在项目根目录下,打开命令窗口执行,耐心等待安装完成即可
目录说明
├── build # 打包脚本相关
│ ├── config # 配置文件
│ ├── generate # 生成器
│ ├── script # 脚本
│ └── vite # vite配置
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│ ├── api # 接口文件
│ ├── assets # 资源文件
│ │ ├── icons # icon sprite 图标文件夹
│ │ ├── images # 项目存放图片的文件夹
│ │ └── svg # 项目存放svg图片的文件夹
│ ├── components # 公共组件
│ ├── design # 样式文件:项目中使用的通用样式都存放于这个下面
│ ├── directives # 指令
│ ├── enums # 枚举/常量
│ ├── hooks # hook
│ │ ├── component # 组件相关hook
│ │ ├── core # 基础hook
│ │ ├── event # 事件相关hook
│ │ ├── setting # 配置相关hook
│ │ └── web # web相关hook
│ ├── layouts # 布局文件
│ │ ├── default # 默认布局
│ │ ├── iframe # iframe布局
│ │ └── page # 页面布局
│ ├── locales # 多语言
│ ├── logics # 逻辑
│ ├── main.ts # 主入口
│ ├── router # 路由配置:且下面的modules用于存放路由模块,此目录 文件会自动注册
【新增路由】
在src/router/routes/modules 内新增一个文件
【路由刷新】
采用重定向import { useRedo } from '/@/hooks/web/usePage'; import { defineComponent } from 'vue'; export default defineComponent({ setup() { const redo = useRedo(); // 执行刷新 redo(); return {}; }, });
【路由跳转】
import { useGo } from '/@/hooks/web/usePage'; import { defineComponent } from 'vue'; export default defineComponent({ setup() { const go = useGo(); // 执行刷新 go(); go(PageEnum.Home); return {}; }, });
【多标签页】
使用keep-alive
和router-view
实现,实现切换后还能保持切换之前的状态【页面开启缓存】
3个条件:
1)src/setting/projectsetting.ts内将openkeepAlive设置为true
2)路由设置name,且不能重复
3)路由对应组件上加上name,与路由
设置的name保持一致
(配置的路由与页面中的name一致)
【页面关闭缓存】
在src/router/routes/modules下面的文件meta下配置
ingoreKeepA live:true;
【更改首页路由】
pageEnum.ts中的BASE_HOME更改你想设置的首页即可export enum PageEnum { // basic home path // 更改此处即可 BASE_HOME = '/dashboard', }
│ ├── settings # 项目配置
│ │ ├── componentSetting.ts # 组件配置:用于配置某些组件的常规配置,而无需修改组件
里面有关于表格的配置
│ │ ├── designSetting.ts # 样式配置:用于修改项目内组件class的统一前缀
│ │ ├── encryptionSetting.ts # 加密
配置:对缓存到浏览器的信息进行 AES加密
前提:使用自带的缓存工具 /@/untils/cache
│ │ ├── localeSetting.ts # 多语言
配置
│ │ ├── projectSetting.ts # 项目配置:用于配置
项目内容、布局文本等效果
│ │ └── siteSetting.ts # 站点配置
│ ├── store # 数据仓库
│ ├── utils # 工具类
│ └── views # 页面
├── test # 测试
│ └── server # 测试用到的服务
│ ├── api # 测试服务器
│ ├── upload # 测试上传服务器
│ └── websocket # 测试ws服务器
├── types # 类型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件
菜单
项目菜单配置存放于 src/router/menus
下面
提示:
菜单必须和路由匹配才能显示
新增菜单
直接在 src/router/menus/modules 内新增一个模块文件即可。
不需要手动引入,放在src/router/routes/menus/modules 内的文件会自动被加载。
菜单排序
在菜单模块内,设置 orderNo 变量,数值越大,排序越靠后
接口请求
接口统一存放于src/api下面管理 => {
1)页面交互操作
2)调用统一的api函数
3)使用封装的axios.ts发送请求
4)获取服务端返回数据
5)更新data
}
axios配置
axios 请求封装存放于 src/utils/http/axios 文件夹内部
除index.ts
文件内容需要根据项目修改外,其余文件无需修改
├── Axios.ts // axios实例
├── axiosCancel.ts // axiosCancel实例,取消重复请求
├── axiosTransform.ts // 数据转换类
├── checkStatus.ts // 返回状态值校验
├── index.ts // 接口返回统一处理
打包
打包后会生成 一个 dist
文件