github⼀款基于vue+element-ui的绝佳的通⽤型、中后台前端
框架
vue-admin-beautiful，⼀款基于 vue+element-ui 的绝佳的通⽤型、中后台前端框架
vue-admin-beautiful登录页⾯
vue-admin-beautiful后台效果
效果展⽰地址：beautiful.panm/vue-admin-beautiful/
github地址：github/chuzhixin/vue-admin-beautiful
安装
# 克隆项⽬
git clone github/chuzhixin/vue-admin-beautiful.git
# 进⼊项⽬⽬录
cd vue-admin-beautiful
# 安装依赖
npm i
# 本地开发启动项⽬
npm run serve
setting.js 配置
说明：这⾥有好多你会⽤到的配置项。
位置：src/config/settings.js
注意：此处可能不是最新代码具体可查看github 最新的 settings.js 配置
⽰例代码：
/
**
* @copyright chuzhixin 1204505056@qq
* @description 全局变量配置
*/
// 开发以及部署时的URL
publicPath: "",
// ⽣产环境构建⽂件的⽬录名
outputDir: "dist",
// 放置⽣成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) ⽬录。
assetsDir: "static",
/
/ 开发环境每次保存时是否输出为eslint编译警告
lintOnSave: true,
// 进⾏编译的依赖
transpileDependencies: ["vue-echarts", "resize-detector", "zx-layouts"],
// 默认的接⼝地址如果是开发环境和⽣产环境⾛vab-mock-server，当然你也可以选择⾃⼰配置成需要的接⼝地址
baseURL:
"vab-mock-server"
: "your.website",
//标题（包括初次加载雪花屏的标题页⾯的标题浏览器的标题）
title: "vue-admin-beautiful",
//简写
abbreviation: "vab",
//开发环境端⼝号
devPort: "80",
//版本号
version: v.VUE_APP_VERSION,
//烦请保留package.json作者信息保留版权可免费商⽤
copyright: v.VUE_APP_AUTHOR,
//是否显⽰页⾯底部版权信息，建议您显⽰，当然您也可以选择不显⽰，不管您是付费⽤户还是未付费⽤户您都有选择显⽰或者不显⽰的权利 footerCopyright: v.NODE_ENV !== "development" ? true : false,
//是否显⽰右上⾓github图标
githubCorner: v.NODE_ENV !== "development" ? true : false,
//是否显⽰顶部进度条
progressBar: true,
//缓存路由的最⼤数量
keepAliveMaxNum: 99,
// 路由模式，可选值为 history 或 hash
routerMode: "hash",
//不经过token校验的路由
routesWhiteList: ["/login", "/register", "/404", "/401"],
//加载时显⽰⽂字
loadingText: "正在加载中...",
/
/token名称
tokenName: "accessToken",
//token在localStorage、sessionStorage、cookie存储的key的名称
tokenTableName: "vue-admin-beautiful",
//token存储位置localStorage sessionStorage cookie
storage: "localStorage",
//token失效回退到登录页时是否记录本次的路由
recordRoute: true,
//是否显⽰logo，不显⽰时设置false，显⽰时请填写remixIcon图标名称，暂时只⽀持设置remixIcon
logo: "vuejs-fill",
//是否国定头部固定fixed 不固定noFixed
header: "fixed",
//横纵布局 horizontal vertical
layout: "vertical",
//是否开启主题配置按钮
themeBar: true,
themeBar: true,
//是否显⽰多标签页
tagsBar: true,
//是否显⽰⾻架屏
skeleton: false,
//配后端数据的接收⽅式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8
contentType: "application/json;charset=UTF-8",
//消息框消失时间
messageDuration: 3000,
//最长请求时间
requestTimeout: 5000,
//操作正常code
successCode: 200,
//登录失效code
invalidCode: 402,
//⽆权限code
noPermissionCode: 401,
/
/是否显⽰在页⾯⾼亮错误
errorLog: ["development", "test", "production"],
//是否开启登录拦截
loginInterception: true,
//是否开启登录RSA加密
loginRSA: false,
//是否依据mock数据⽣成webstorm HTTP Request请求⽂件
httpRequestFile: false,
//intelligence和all两种⽅式，前者后端权限只控制permissions不控制view⽂件的import（前后端配合，减轻后端⼯作量），all⽅式完全交给后端前端只负责加载 authentication: "intelligence",
//vertical布局时是否只保持⼀个⼦菜单的展开
uniqueOpened: true,
//vertical布局时默认展开的菜单path，使⽤逗号隔开建议只展开⼀个
defaultOopeneds: ["/vab"],
//需要加loading层的请求，防⽌重复提交
debounce: ["doEdit"],
//需要⾃动注⼊并加载的模块
providePlugin: { maptalks: "maptalks", "window.maptalks": "maptalks" },
//npm run build时是否⾃动⽣成7z压缩包
build7z: false,
//代码⽣成机⽣成在view下的⽂件夹名称
templateFolder: "project",
};
variables.scss 配置
说明：这⾥可以修改你项⽬的配⾊⽅案，简单修改即可实现风格⼤变。
位置：src/styles/variables.scss
注意：此处可能不是最新代码具体可查看github 最新的 variables.scss 配置
/**
* @copyright chuzhixin 1204505056@qq
* @description 全局主题变量配置，VIP⽂档内提供多种好看的配⾊⽅案（ant-design风格、layui风格、iview风格），请查看VIP⽂档主题配置篇
*/
/* stylelint-disable */
@charset "utf-8";
//框架默认主题⾊
$base-color-default: #1890ff;
//默认层级
$base-z-index: 999;
//横向布局纵向布局时菜单背景⾊
$base-menu-background: #001529;
//菜单⽂字颜⾊
$base-menu-color: hsla(0, 0%, 100%, 0.95);
//菜单选中⽂字颜⾊
$base-menu-color-active: hsla(0, 0%, 100%, 0.95);
$base-menu-color-active: hsla(0, 0%, 100%, 0.95);
//菜单选中背景⾊
$base-menu-background-active: $base-color-default;
//标题颜⾊
$base-title-color: #fff;
//字体⼤⼩配置
$base-font-size-small: 12px;
$base-font-size-default: 14px;
$base-font-size-big: 16px;
$base-font-size-bigger: 18px;
$base-font-size-max: 22px;
$base-font-color: #606266;
$base-color-blue: $base-color-default;
$base-color-green: #13ce66;
$base-color-white: #fff;
$base-color-black: #000;
$base-color-yellow: #ffba00;
$base-color-orange: #ff6700;
$base-color-red: #ff4d4f;
$base-color-gray: rgba(0, 0, 0, 0.65);
$base-main-width: 1279px;
$base-border-radius: 2px;
$base-border-color: #dcdfe6;
//输⼊框⾼度
$base-input-height: 32px;
//默认paddiing
$base-padding: 20px;
//默认阴影
$base-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
//横向布局时top-bar、logo、⼀级菜单的⾼度
$base-top-bar-height: 65px;
//纵向布局时logo的⾼度
$base-logo-height: 75px;
//顶部nav-bar的⾼度
$base-nav-bar-height: 60px;
/
/顶部多标签页tags-bar的⾼度
$base-tags-bar-height: 55px;
//顶部多标签页tags-bar中每⼀个item的⾼度
$base-tag-item-height: 34px;
//菜单li标签的⾼度
$base-menu-item-height: 50px;
//app-main的⾼度
$base-app-main-height: calc(
100vh - #{$base-nav-bar-height} - #{$base-tags-bar-height} -
#{$base-padding} - #{$base-padding} - 55px - 30px
);
/
/纵向布局时左侧导航未折叠时的宽度
$base-left-menu-width: 230px;
//纵向布局时左侧导航未折叠时右侧内容的宽度
$base-right-content-width: calc(100% - #{$base-left-menu-width});
//纵向布局时左侧导航已折叠时的宽度
$base-left-menu-width-min: 65px;
vue element admin//纵向布局时左侧导航已折叠时右侧内容的宽度
$base-right-content-width-min: calc(100% - #{$base-left-menu-width-min}); //默认动画
$base-transition: all 0.2s;
//默认动画时长
$base-transition-time: 0.2s;
:
export {
//菜单⽂字颜⾊变量导出
menu-color: $base-menu-color;
//菜单选中⽂字颜⾊变量导出
menu-color-active: $base-menu-color-active;
//菜单背景⾊变量导出
menu-background: $base-menu-background;
menu-background: $base-menu-background;
//菜单选中背景⾊变量导出
menu-background-active: $base-menu-background-active;
//多标签页选中背景⾊变量导出
tag-background-active: $base-color-blue;
//默认按钮背景⾊变量导出
button-background: $base-color-blue;
//分页选中背景⾊变量导出
pagination-background-active: $base-color-blue;
}
element-ui 组件尺⼨配置
说明：这⾥可以修改你 element-ui 组件尺⼨，element-ui 组件的尺⼨⼀共分为 large、default、small 、mini，本项⽬默认使⽤的是 small。
位置：src/plugins/element.js
⽰例代码：
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/display.css";
import "@/styles/element-variables.scss";
Vue.use(ElementUI, {
size: "small", // element-ui组件的尺⼨⼀共分为large、default、small 、mini
});
效果展⽰地址：beautiful.panm/vue-admin-beautiful/
github地址：github/chuzhixin/vue-admin-beautiful
希望对⼤家的建站有帮助。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论