{"id":27072548,"url":"https://github.com/mowatermelon/vue-admin","last_synced_at":"2025-06-18T23:37:18.679Z","repository":{"id":48716548,"uuid":"123950760","full_name":"mowatermelon/vue-admin","owner":"mowatermelon","description":"基于axios，bootstrap，vue-router，webpack和express等等的基础vue后台控制模板，默认有三个颜色主题可切换。","archived":false,"fork":false,"pushed_at":"2021-07-13T12:26:35.000Z","size":732,"stargazers_count":6,"open_issues_count":59,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-06T00:28:33.109Z","etag":null,"topics":["axios","express","localstorage","mo-theme","vue","vue-admin","vue-router","vuex","webpack"],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mowatermelon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-05T16:58:52.000Z","updated_at":"2022-05-23T03:09:31.000Z","dependencies_parsed_at":"2022-09-07T12:11:59.021Z","dependency_job_id":null,"html_url":"https://github.com/mowatermelon/vue-admin","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mowatermelon%2Fvue-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mowatermelon%2Fvue-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mowatermelon%2Fvue-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mowatermelon%2Fvue-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mowatermelon","download_url":"https://codeload.github.com/mowatermelon/vue-admin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411449,"owners_count":20934687,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","express","localstorage","mo-theme","vue","vue-admin","vue-router","vuex","webpack"],"created_at":"2025-04-05T23:18:29.753Z","updated_at":"2025-04-05T23:18:30.180Z","avatar_url":"https://github.com/mowatermelon.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-admin\n\n基于axios，bootstrap，vue-router，webpack和express等等的基础vue后台控制模板，默认有三个颜色主题可切换。\n\n# 项目优势\n\n- login页和register页共用一个组件页，做了相关的输入数据验证，并写了相关提示。\n- 默认提供login登陆状态管理。\n- 注册完成之后直接登陆，不用再跳转到登录页去登陆。\n- 比较简洁的页面设计。\n- 颜色主题三色可选(blue,pue,dark)，默认主题是blue。\n- 按照尽可能分离的逻辑，对于各组件之间进行进行了解耦设计。\n- 路由跳转实时在网址上记录当前激活的面板情况。\n- 对于项目模板做了响应式设计，保证在不同屏幕状态下的良好阅读体验。\n- 精简的依赖包，删除了测试相关依赖包。\n- 精简的指令，删除了测试相关指令。\n- 降低了对于网络环境不太好的情况，资源请求压力。\n- 左侧面板数据支持灵活配置，数据修改路径是项目根文件下`static/mock/leftPanelData.json`。\n- 因为集成了axios，更方便请求其他接口数据。\n- 添加了m-input组件，提供了prefix-icon 和 suffix-icon功能\n- 添加aesEncrypt,aesDecrypt数据加密和解密\n\n# 运行项目\n\n``` bash\n# install dependencies\n\n  # Good network environment\n    # install dependencies by cnpm or npm\n    cnpm i\n\n  # Bad network environment\n    # global install yarn\n    cnpm i yarn -g\n\n    # install dependencies by yarn\n    yarn install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# view after build effect at localhost:8089\nnpm run dist\n\n```\n\n# 项目结构图\n\n```text\n├── build                                       // 生产环境webpack配置文件和运行文件\n│   │   ├── ...                              // webpack配置文件\n│   │   ├── prod.dev.js                              // 生产环境运行文件\n├── config                                      // 基本配置\n│   │   ├── dev.env.js                              // 开发环境配置文件\n│   │   ├── index.js                              // 总配置文件\n│   │   ├── prod.env.js                              // 生产环境配置文件\n│   │   ├── test.env.js                              // 测试环境配置文件\n├── dist                                        // 上线项目文件，放在服务器即可正常访问\n├── screenshots                                 // 项目截图\n│   ├── login.png                              // 登陆页面显示效果\n│   ├── register.png                              // 注册页面显示效果\n│   ├── large-pure.png                              // 大屏状态下紫色主题显示效果\n│   ├── middle-blue.png                              // 中屏状态下蓝色主题显示效果\n│   ├── small-dark.png                              // 小屏状态下黑色主题显示效果\n├── src                                         // 源码目录\n│   ├── asset                              // 项目相关设计资源\n│   │   ├── css                              // 项目相关样式设计文件\n│   │   │   ├── app.scss                              // 项目主要的样式文件，整合了其他样式文件板块，最后在app.vue进行引入\n│   │   │   ├── framework.scss                              // 项目主要的框架样式文件\n│   │   │   ├── reset.scss                              // 项目自定义的重置样式文件\n│   │   │   ├── theme.scss                              // 项目主要的主题样式文件\n│   │   │   ├── tool.scss                              // 项目主要的通用帮助样式文件\n│   │   ├── js                              // 项目相关样式设计文件\n│   │   │   ├── router\n│   │   │   │   └── index.js                           // 路由配置\n│   │   │   ├── vuex                                      // vuex的状态管理\n│   │   │   │   ├── store.js                            // 引用vuex，创建store\n│   ├── components                              // 组件\n│   │   ├── Footer.vue                    // 底部公共组件\n│   │   ├── Header.vue                     // 头部公共组件\n│   │   ├── LeftAside.vue                 // 左侧边公共组件\n│   │   ├── MInput.vue                     // 输入框公共组件\n│   │   ├── MForm.vue                 // 表单公共组件\n│   ├── layouts\n│   │   ├── HeaderAsideFooterResponsiveLayout                    // 头部左侧边底部响应布局\n│   │   │   ├── Layout.vue                     // 响应布局组件\n│   ├── pages\n│   │   ├── Feature.vue                    // 描述当前项目实现功能页\n│   │   ├── Hello.vue                     // 欢迎页\n│   │   ├── Login.vue                 // 登录页\n│   ├── service                                 // 数据交互统一调配\n│   │   ├── getData.js                          // 获取数据的统一调配文件，对接口进行统一管理\n│   ├── App.vue                                 // 页面入口文件\n│   ├── main.js                                 // 程序入口文件，加载各种公共组件\n├── static                                         // 源码目录\n│   ├── plugins                              // 引用的插件\n│   │   ├── css                              // 引用第三方的样式文件\n│   │   ├── font                              // 引用第三方的字体文件\n│   ├── mock                              // 数据模拟\n│   │   ├── completeList.json                              // 当前项目已经完成的功能数据\n│   │   ├── leftAsideData.json                             // 项目中左侧面板的数据文件\n├── index.html                                  // 入口html文件\n.\n\n```\n\n# 项目效果图\n\n![登陆页面显示效果](screenshots/login.png)\n![注册页面显示效果](screenshots/register.png)\n![大屏状态下紫色主题显示效果](screenshots/large-pure.png)\n![中屏状态下蓝色主题显示效果](screenshots/middle-blue.png)\n![小屏状态下黑色主题显示效果](screenshots/small-dark.png)\n\n# 修改主题效果\n\n放上现有颜色配置\n\n```scss\n@charset \"utf-8\";\n\n//文件路径  当前项目根文件下  src/assets/css/thems.scss\n\n$linear-start:#1861D5;//高亮效果的渐变开始颜色\n$linear-end:#3080FE;//高亮效果的渐变结束颜色\n\n$theme_blue_color: #5bc0de; // 页面蓝色主题 --默认色\n$theme_blue_normal_color:#1861D5; // 页面蓝色主题 --未激活色\n$theme_blue_active_color: #31708f; // 页面蓝色主题 --默激活色\n\n$theme_pure_color:#8f88f9; //页面紫色主题 --默认色\n$theme_pure_normal_color:#4772d9; //页面紫色主题 --未激活色\n$theme_pure_active_color:#b1c3ef; //页面紫色主题 --默激活色\n\n$theme_dark_color:#323a45; //页面灰色主题 --默认色\n$theme_dark_normal_color:rgb(123, 123, 123); //页面灰色主题 --未激活色\n$theme_dark_active_color:#83878a; //页面灰色主题色\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmowatermelon%2Fvue-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmowatermelon%2Fvue-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmowatermelon%2Fvue-admin/lists"}