ZRAdmin-快速开始

快速开始

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

如何开发

提示：这里可以添加本文要记录的大概内容：

fork 代码到自己的仓库(注意：不要通过下载的方式获取代码)新增一个分支用来开发自己的业务 比如：business主分支用来拉取同步最新代码之后通过同步拉取到的最新代码合并到自己的 business 分支上

一、开发准备

vs2022 及以上 以及 vscode(开发前端用到)。

二、使用步骤

1.引入库

vsCode 建议安装以下插件：

volar(vue3)
vetur(vue2)
Chinese (Simplified),
eslint,
i18n Ally(多语言)
vue-component

2.读入数据

数据库任选以下其中一种(通过测试的)

- MySql >= 5.7.0
- SqlServer >= 2008(推荐 2012 以上)
- Oracle
- PgSql >=15
- Node >= 16
- C:\Users\admin>node -v
v16.15.0
C:\Users\admin>npm -v
9.4.1

安装 vue 脚手架

npm install -g @vue/cli

三前端手册

项目结构

├─bat				#项目启动脚本
├─dist			#打包后的文件
├─html
├─public
├─src
│  ├─api			#网络请求api
│  │  ├─article
│  │  ├─monitor
│  │  ├─system
│  │  │  └─dict
│  │  └─tool
│  ├─assets				#资源目录
│  │  ├─401_images
│  │  ├─404_images
│  │  ├─iconfont
│  │  ├─icons
│  │  │  └─svg
│  │  ├─images
│  │  ├─logo
│  │  └─styles
│  ├─components
│  │  ├─Breadcrumb		#面包絮组件
│  │  ├─Crontab				#定时任务cron表达式
│  │  ├─DictTag				#字典组件
│  │  ├─Echarts
│  │  ├─Editor				#富文本编辑器
│  │  ├─FileUpload		#文件上传组件
│  │  ├─Hamburger
│  │  ├─HeaderSearch	#搜索
│  │  ├─IconSelect		#图标选择
│  │  ├─iFrame				#Iframe
│  │  ├─ImagePreview	#图片预览
│  │  ├─ImageUpload		#图片上传
│  │  ├─LangSelect		#多语言选择
│  │  ├─Notice
│  │  ├─Pagination		#分页组件
│  │  ├─ParentView
│  │  ├─RightToolbar
│  │  ├─Screenfull
│  │  ├─SizeSelect
│  │  ├─SvgIcon
│  │  ├─TopNav
│  │  ├─vue3-cron-core
│  │  └─Zr
│  │      ├─Doc
│  │      └─Git
│  ├─directive
│  │  ├─module
│  │  └─permission
│  ├─i18n
│  │  ├─lang
│  │  └─pages
│  │      ├─login
│  │      └─menu
│  ├─layout							#系统布局
│  │  └─components
│  │      ├─IframeToggle
│  │      ├─InnerLink
│  │      ├─Settings
│  │      ├─Sidebar
│  │      └─TagsView
│  ├─plugins
│  ├─router
│  ├─store
│  │  └─modules
│  ├─utils
│  └─views
│      ├─components
│      │  ├─CommonMenu
│      │  └─icons
│      ├─dashboard
│      ├─error
│      ├─monitor
│      │  ├─cache
│      │  ├─job
│      │  ├─logininfor
│      │  ├─operlog
│      │  └─server
│      ├─redirect
│      ├─system
│      │  ├─article
│      │  ├─commonLang
│      │  ├─config
│      │  ├─dept
│      │  ├─dict
│      │  ├─menu
│      │  ├─notice
│      │  ├─oauth
│      │  ├─post
│      │  ├─role
│      │  ├─roleusers
│      │  └─user
│      │      └─profile
│      └─tool
│          ├─build
│          ├─email
│          ├─file
│          ├─gen
│          └─swagger
└─vite
    └─plugins

系统配置

vue3 配置文件路径src/settings.js，可以配置侧边栏路由是否显示 New 标记(最近 7 天内添加的菜单会显示)，默认主题色等

export default {
  /**
   * 网页标题
   */
  title: import.meta.env.VITE_APP_TITLE,
  /**
   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
   */
  sideTheme: "theme-dark",
  /**
   * 框架默认主题颜色值
   */
  theme: "#FF8C00",
  /**
   * 是否显示系统布局配置
   */
  showSettings: false,

  /**
   * 是否显示顶部导航
   */
  topNav: false,

  /**
   * 是否显示 tagsView
   */
  tagsView: true,

  /**
   * 是否固定头部
   */
  fixedHeader: false,

  /**
   * 是否显示logo
   */
  sidebarLogo: true,

  /**
   * 是否显示动态标题
   */
  dynamicTitle: false,

  /**
   * @type {string | array} 'production' | ['production', 'development']
   * @description Need show err logs component.
   * The default is only used in the production env
   * If you want to also use it in dev, you can pass ['production', 'development']
   */
  errorLog: "production",
  /**
   * 版权信息
   */
  copyright:
    'Copyright ©2023 <a target="_black" href="http://www.izhaorui.cn/doc">ZRAdmin.NET</a> All Rights Reserved.',
  /**
   * 是否显示底部栏
   */
  showFooter: true,
  /**
   * 是否显示水印
   */
  showWatermark: false,
  /**
   * 水印文案
   */
  watermarkText: "ZRAdmin.NET",
  /**
   * 是否显示其他登录
   */
  showOtherLogin: true,
  /**
   * 默认大小
   */
  defaultSize: "default",
  /**
   * 默认语言
   */
  defaultLang: "zh-cn",
  /**
   * 左侧菜单是否显示New标记
   */
  menuShowNew: false,
};