https://github.com/mowatermelon/vue-admin
基于axios，bootstrap，vue-router，webpack和express等等的基础vue后台控制模板，默认有三个颜色主题可切换。
https://github.com/mowatermelon/vue-admin
axios express localstorage mo-theme vue vue-admin vue-router vuex webpack
Last synced: about 1 year ago
JSON representation
基于axios，bootstrap，vue-router，webpack和express等等的基础vue后台控制模板，默认有三个颜色主题可切换。
- Host: GitHub
- URL: https://github.com/mowatermelon/vue-admin
- Owner: mowatermelon
- Created: 2018-03-05T16:58:52.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-07-13T12:26:35.000Z (almost 5 years ago)
- Last Synced: 2023-03-06T00:28:33.109Z (over 3 years ago)
- Topics: axios, express, localstorage, mo-theme, vue, vue-admin, vue-router, vuex, webpack
- Language: Vue
- Size: 715 KB
- Stars: 6
- Watchers: 1
- Forks: 2
- Open Issues: 59
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-admin
基于axios，bootstrap，vue-router，webpack和express等等的基础vue后台控制模板，默认有三个颜色主题可切换。
# 项目优势
- login页和register页共用一个组件页，做了相关的输入数据验证，并写了相关提示。
- 默认提供login登陆状态管理。
- 注册完成之后直接登陆，不用再跳转到登录页去登陆。
- 比较简洁的页面设计。
- 颜色主题三色可选(blue,pue,dark)，默认主题是blue。
- 按照尽可能分离的逻辑，对于各组件之间进行进行了解耦设计。
- 路由跳转实时在网址上记录当前激活的面板情况。
- 对于项目模板做了响应式设计，保证在不同屏幕状态下的良好阅读体验。
- 精简的依赖包，删除了测试相关依赖包。
- 精简的指令，删除了测试相关指令。
- 降低了对于网络环境不太好的情况，资源请求压力。
- 左侧面板数据支持灵活配置，数据修改路径是项目根文件下`static/mock/leftPanelData.json`。
- 因为集成了axios，更方便请求其他接口数据。
- 添加了m-input组件，提供了prefix-icon 和 suffix-icon功能
- 添加aesEncrypt,aesDecrypt数据加密和解密
# 运行项目
``` bash
# install dependencies
# Good network environment
# install dependencies by cnpm or npm
cnpm i
# Bad network environment
# global install yarn
cnpm i yarn -g
# install dependencies by yarn
yarn install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# view after build effect at localhost:8089
npm run dist
```
# 项目结构图
```text
├── build // 生产环境webpack配置文件和运行文件
│ │ ├── ... // webpack配置文件
│ │ ├── prod.dev.js // 生产环境运行文件
├── config // 基本配置
│ │ ├── dev.env.js // 开发环境配置文件
│ │ ├── index.js // 总配置文件
│ │ ├── prod.env.js // 生产环境配置文件
│ │ ├── test.env.js // 测试环境配置文件
├── dist // 上线项目文件，放在服务器即可正常访问
├── screenshots // 项目截图
│ ├── login.png // 登陆页面显示效果
│ ├── register.png // 注册页面显示效果
│ ├── large-pure.png // 大屏状态下紫色主题显示效果
│ ├── middle-blue.png // 中屏状态下蓝色主题显示效果
│ ├── small-dark.png // 小屏状态下黑色主题显示效果
├── src // 源码目录
│ ├── asset // 项目相关设计资源
│ │ ├── css // 项目相关样式设计文件
│ │ │ ├── app.scss // 项目主要的样式文件，整合了其他样式文件板块，最后在app.vue进行引入
│ │ │ ├── framework.scss // 项目主要的框架样式文件
│ │ │ ├── reset.scss // 项目自定义的重置样式文件
│ │ │ ├── theme.scss // 项目主要的主题样式文件
│ │ │ ├── tool.scss // 项目主要的通用帮助样式文件
│ │ ├── js // 项目相关样式设计文件
│ │ │ ├── router
│ │ │ │ └── index.js // 路由配置
│ │ │ ├── vuex // vuex的状态管理
│ │ │ │ ├── store.js // 引用vuex，创建store
│ ├── components // 组件
│ │ ├── Footer.vue // 底部公共组件
│ │ ├── Header.vue // 头部公共组件
│ │ ├── LeftAside.vue // 左侧边公共组件
│ │ ├── MInput.vue // 输入框公共组件
│ │ ├── MForm.vue // 表单公共组件
│ ├── layouts
│ │ ├── HeaderAsideFooterResponsiveLayout // 头部左侧边底部响应布局
│ │ │ ├── Layout.vue // 响应布局组件
│ ├── pages
│ │ ├── Feature.vue // 描述当前项目实现功能页
│ │ ├── Hello.vue // 欢迎页
│ │ ├── Login.vue // 登录页
│ ├── service // 数据交互统一调配
│ │ ├── getData.js // 获取数据的统一调配文件，对接口进行统一管理
│ ├── App.vue // 页面入口文件
│ ├── main.js // 程序入口文件，加载各种公共组件
├── static // 源码目录
│ ├── plugins // 引用的插件
│ │ ├── css // 引用第三方的样式文件
│ │ ├── font // 引用第三方的字体文件
│ ├── mock // 数据模拟
│ │ ├── completeList.json // 当前项目已经完成的功能数据
│ │ ├── leftAsideData.json // 项目中左侧面板的数据文件
├── index.html // 入口html文件
.
```
# 项目效果图
# 修改主题效果
放上现有颜色配置
```scss
@charset "utf-8";
//文件路径 当前项目根文件下 src/assets/css/thems.scss
$linear-start:#1861D5;//高亮效果的渐变开始颜色
$linear-end:#3080FE;//高亮效果的渐变结束颜色
$theme_blue_color: #5bc0de; // 页面蓝色主题 --默认色
$theme_blue_normal_color:#1861D5; // 页面蓝色主题 --未激活色
$theme_blue_active_color: #31708f; // 页面蓝色主题 --默激活色
$theme_pure_color:#8f88f9; //页面紫色主题 --默认色
$theme_pure_normal_color:#4772d9; //页面紫色主题 --未激活色
$theme_pure_active_color:#b1c3ef; //页面紫色主题 --默激活色
$theme_dark_color:#323a45; //页面灰色主题 --默认色
$theme_dark_normal_color:rgb(123, 123, 123); //页面灰色主题 --未激活色
$theme_dark_active_color:#83878a; //页面灰色主题色
```