3 Star 20 Fork 4

BluesYoung-web / admin-vue3-element3-vite2

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

后台管理系统

配套后端程序

node 版本

  • 根据 .nvmrc 内的配置自动切换(Linux)
  • 环境需求:
    • 安装 nvm
    • 使用 nvm install * 安装某个版本的node
    • 命令行:
      • bash~/.bashrc 内新增以下内容:
      • 其他
# 加载 nvm 命令,如存在请忽略
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

# 自动切换 node 版本(重载 cd 命令,根据目录下的.nvmrc 自动(安装)切换)
cdnvm() {
  command cd "$@";
  nvm_path=$(nvm_find_up .nvmrc | tr -d '\n')
  # 如果项目目录下不存在对应的 .nvmrc 配置文件,则使用默认的版本
  if [[ ! $nvm_path = *[^[:space:]]* ]]; then
    declare default_version;
    # 获取默认的 node 版本
    default_version=$(nvm version default);
    # 如果没有设置默认的 node 版本,则将最新版作为默认的 node 版本
    if [[ $default_version == "N/A" ]]; then
      nvm alias default node;
      default_version=$(nvm version default);
    fi
    # 如果不存在配置文件并且当前版本不等于默认的版本,则切换为默认的 node 版本
    if [[ $(nvm current) != "$default_version" ]]; then
      # echo "使用默认的 node 版本: $default_version";
      nvm use "$default_version";
    fi
  # 如果存在配置文件则使用配置文件中的 node 版本
  elif [[ -s $nvm_path/.nvmrc && -r $nvm_path/.nvmrc ]]; then
    declare nvm_version
    # 取出配置文件中的 node 版本
    nvm_version=$(<"$nvm_path"/.nvmrc)
    declare locally_resolved_nvm_version
    # 检测对应的 node 版本是否安装
    locally_resolved_nvm_version=$(nvm ls --no-colors "$nvm_version" | tail -1 | tr -d '\->*' | tr -d '[:space:]')
    if [[ "$locally_resolved_nvm_version" == "N/A" ]]; then
      # echo "未安装,安装并使用: $nvm_version";
      nvm install "$nvm_version";
      # 全局安 yarn
      npm i -g yarn;
    elif [[ $(nvm current) != "$locally_resolved_nvm_version" ]]; then
      # echo "已安装,直接使用: $nvm_version";
      nvm use "$nvm_version";
    fi
  fi
}
alias cd='cdnvm'
cd "$PWD"

权限管理

  • 所有用户必须登录
  • 后端权限管理 + 前端权限管理

前置条件(本地运行)

  • 在项目根目录下新建 .env.local 文件,内容如下:
# !!! 变量名必须以 VITE_ 开头
# 使用 import.meta.变量名 获取

VITE_TITLE = '小黑管理后台'

# 后端使用 nginx 代理来跨域时,使用绝对路径
# 模拟与真实共存,路径不能重复,不然就无法发出真实请求
VITE_BASE_HTTP = '/mockapi'
# websocket 连接地址,使用NGINX代理时为绝对路径,其他情况需要使用带协议的完整路径
VITE_BASE_WS = '/wss'

# 真实地址(树莓派内网穿透)
VITE_PI_HTTP = 'http://frp.104300.xyz:15151/api/admin'
VITE_PI_WS = 'ws://frp.104300.xyz:15151/wss/admin'
# 是否启用真实请求混入(关闭时无需设置)
# VITE_ENABLE_PI = true

注意事项

  • yarn build因生产需要,将 node 运行内存设为了 1G(1024)
  • yarn build:prod 无内存限制

运行 | 打包

  • 推荐使用(yarn build | yarn build:prod | yarn build:prod.nginx)
  • 生产模式下包的体积最小(各种摇树优化)
# 装依赖
yarn
# 升级最新依赖(同时更新 yarn.lock 和 package.json)
yarn upgrade-interactive --latest
# 手动升级特定版本
yarn upgrade package-name@version

# 本地运行(请求真实开发服服务器)
yarn dev
# 本地运行(使用自定义vite插件注入的中间件实现 mock,可以在控制台看到真实的请求)
yarn dev:mock
# 本地运行(请求测试服务器)
yarn dev:test
# 本地运行(请求正式服务器)
yarn dev:prod

# ------ 本地运行及打包 ------
# --- 依赖 .env.{MODE}.local 内部的环境变量 ---
# 打mock包
yarn build:mock
# 打开发服包
yarn build:dev
# 打开发服包(后端配置了 nginx 代理,请求'/api/dev')
yarn build:dev.nginx
# 打测试服包
yarn build:test
# 打测试服包(后端配置了 nginx 代理,请求'/api/test')
yarn build:test.nginx
# 打正式服包
yarn build:prod
# 打正式服包(后端配置了 nginx 代理,请求'/api/prod')
yarn build:prod.nginx
# 本地预览打包后的页面
yarn pre

# ------ 服务器打包 ------
# 1. 注入环境变量
# VITE_BASE_HTTP = '接口请求地址(必须)'
# VITE_TITLE = '后台标题(可选)'
# 2. 打包
yarn build

代码格式化

yarn format

使用 rome 作为格式化工具

请在 Linux 系统下使用,目前 window 系统下存在 bug,无法使用

定制化命令行脚本

  • 快捷指令 yarn cli
    • createNewTemplate 自动创建页面模板所需的文件并更新模板配置
    • createNewPage
      • 自动创建页面并生成路由配置
      • 拥有数个常用的模板页面,可以根据需要随意选择

项目说明

  • 在线预览(Mock)
  • 在线预览(树莓派内网穿透服务器,可能不在线)
  • 本项目创意源自 Vue-Element-Admin
  • 主用技术栈:Vue3 Element-Plus TypeScript
  • 此版本为 admin-vue3-element3 的改进版:
    • 采用全新的 vite2.0
    • 加入了 polyfill,兼容性(国产浏览器的极速模式及所有的现代浏览器)
    • 方法自动按需导入(基于unplugin-auto-import)
    • 组件自动按需导入(基于unplugin-vue-components)
    • 图标自动按需导入(基于unplugin-icons)
    • 防抖与节流的自定义指令
    • 二次封装常用组件
      • 表格(配套导出为Excel表的方法)
      • 表单(用JSON配置书写表单项)
      • 右键菜单
      • 弹出层
      • 富文本编辑器
      • 分页
      • tab
      • ...
  • 使用 windicss,零配置自动 css 摇树优化
  • 拥有自动创建页面的 node 脚本,实现页面创建及路由注册自动化
MIT License Copyright (c) 2021 张扬 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

基于Vue3,Element Plus,TypeScript的后台管理系统(使用 Vite2) 展开 收起
JavaScript 等 5 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/BluesYoung-web/admin-vue3-element3-vite2.git
git@gitee.com:BluesYoung-web/admin-vue3-element3-vite2.git
BluesYoung-web
admin-vue3-element3-vite2
admin-vue3-element3-vite2
master

搜索帮助