8 Star 18 Fork 9

梦想的攀岩 / vue-admin-spa

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

后台管理系统 vue-admin-spa 1.0

使用到的技术:vue + vue-resource + vue-router + vuex(大型spa必备) + element-ui + ES6 + webpack + npm

测试地址

前言

本项目借鉴vue脚手架和三个项目(取长补短)搭建而成,并且不断完善,目的是为了更接近和适合大家的项目需求,更适合2次开发,以下几点重写过:

  • 登陆注册(含MD5加密)
  • 权限控制,菜单根据用户接口回来的权限数据进行显隐,手敲地址栏,会跳到404(地址栏错误)或401(地址栏正确但无权限)
  • 切换主题,完全支持用户手动切换主题和记住主题
  • 全部数据进行本地json模拟,二次开发者,只需要把json路径替换成实际接口路径即可,即使是新手也能轻松搞定撸后台管理系统

说明

  • 开源目的:提供给基于底层的2次开发者,供更多人学习和参考,少走弯路。
  • 需求定制:这个项目作为底层框架开源,目前只具备了些基本功能,如有其他功能需求可联系群主。
  • 贡献加入:欢迎更多开发者加入这个底层开发,一起贡献和维护,详情联系群主。
  • 及时交流:为了方便大家技术交流,本项目新建了一个qq群--645582193

**有问题可以先提交到issue

如果觉得此项目对你有所帮助,记得点击右上方的Star噢 ^_^


功能(全部数据进行本地json模拟)

  • 登录/注册/注销
  • 密码修改
  • 个人主页
  • 权限验证
  • 修改权限(未完成)
  • 侧边栏
  • 面包屑
  • 富文本编辑器
  • 切换主题(点击头像下拉)
  • 表单校验、提交
  • 列表增删改查、排序、导出(后台管理系统基本功能)
  • 401,401重定向页面
  • 导出excel
  • views-tab
  • PC端更多功能即将开放……
  • 等后面有空再给大家开源一个vue的移动端项目,嘿嘿^_^

开发

   
    # 安装依赖
    npm install
    #or 直接解压node_modules.7z到当前位置 (比较适合新手)。

    # 本地开发 开启服务
    npm run dev
    #or 直接双击start.bat(比较适合新手)

浏览器访问 http://localhost:2017

发布

  
    # 构建生产环境
    npm run build:prod
    #or 直接双击build.bat(比较适合新手)

模拟运行正式环境

    # nginx环境下运行
    1.准备nginx环境,自行到nginx官网(https://nginx.org/)下载,并解压
    2.双击build.bat后根目录生成一个dist包,把dist整个文件夹拷贝到nginx解压后的html下
    3.启动nginx服务:双击nginx.exe
    4.访问入口:http://localhost/dist/index.html
    ………
    
    8.关闭nginx服务:直接删进程
    
    # tomcat环境下运行
    参照nginx步骤即可

关于图标

    本项目使用了两套图标系统,具体使用方法参照以下官方链接:
    1.http://element.eleme.io/#/zh-CN/component/icon
    2.http://fontawesome.io/icons/

关于UI系统

    由于bootstrap不支持mvvm已弃用,本项目使用了全新的elementUI系统,具体使用方法参照以下官方链接:
    1.http://element.eleme.io/#/zh-CN/component/installation
    

目录结构

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件。不直接显示
│   ├── global                 // 全局指令
│   ├── filtres                // 全局filter
│   ├── router                 // 路由
│   ├── store                  // 全局store管理
│   ├── utils                  // 全局公用方法
│   ├── view                   // view视图层
│   ├── App.vue                // 入口页面
│   └── main.js                // 入口 加载组件 初始化等
├── static                     // 第三方不打包资源
│   ├── jquery
│   ├── Tinymce                // 富文本
│   ├── dataJson               // 模拟接口json
│   └── theme                  // 主题文件
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

状态管理

后台只有user和app配置相关状态使用vuex存在全局,其它数据都由每个业务页面自己管理。

MIT License Copyright (c) 2017 lss 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.

简介

已经具备了基本的后台功能(登录/注册/注销、密码修改、个人主页、权限验证、侧边栏、面包屑、富文本编辑器、切换主题、表单验证提交、列表排序增删改查、401,404重定向页面、导出excel等) 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/qianyanyan/vue-admin-spa.git
git@gitee.com:qianyanyan/vue-admin-spa.git
qianyanyan
vue-admin-spa
vue-admin-spa
master

搜索帮助