vue-admin-beautiful，一款基於 vue+element-ui 的絕佳的通用型、中後臺前端框架
vue-admin-beautiful後臺效果
效果展示地址：http://beautiful.panm.cn/vue-admin-beautiful/github地址：https://github.com/chuzhixin/vue-admin-beautiful安裝# 克隆專案git clone https://github.com/chuzhixin/vue-admin-beautiful.git# 進入專案目錄cd vue-admin-beautiful# 安裝依賴npm i# 本地開發 啟動專案npm run serve/** * @copyright chuzhixin [email protected] * @description 全域性變數配置 */module.exports = { // 開發以及部署時的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: process.env.NODE_ENV === "development" || process.env.NODE_ENV === "preview" ? "vab-mock-server" : "http://your.website.com", //標題 （包括初次載入雪花屏的標題 頁面的標題 瀏覽器的標題） title: "vue-admin-beautiful", //簡寫 abbreviation: "vab", //開發環境埠號 devPort: "80", //版本號 version: process.env.VUE_APP_VERSION, //煩請保留package.json作者資訊 保留版權可免費商用 copyright: process.env.VUE_APP_AUTHOR, //是否顯示頁面底部版權資訊，建議您顯示，當然您也可以選擇不顯示，不管您是付費使用者還是未付費使用者您都有選擇顯示或者不顯示的權利 footerCopyright: process.env.NODE_ENV !== "development" ? true : false, //是否顯示右上角github圖示 githubCorner: process.env.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, //是否顯示多標籤頁 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",};/** * @copyright chuzhixin [email protected] * @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-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;//縱向佈局時左側導航已摺疊時右側內容的寬度$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-active: $base-menu-background-active; //多標籤頁選中背景色變數匯出 tag-background-active: $base-color-blue; //預設按鈕背景色變數匯出 button-background: $base-color-blue; //分頁選中背景色變數匯出 pagination-background-active: $base-color-blue;}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});希望對大家的建站有幫助。
最新評論