欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

VUE后台管理界面案例分享

程序员文章站 2022-04-10 17:41:09
...

本文我们主要和大家分享VUE后台管理界面案例,主要功能有以下。

登录退出功能

国际化中英文界面切换

动态菜单列表

通过动态页签增减实现组件切换展示

路由切换菜单功能

vue 实现网页版前端框架搭建,只需在此基础上增加独立组件,便可很快速开发一个完善的后台管理系统

效果展示

VUE后台管理界面案例分享

技术栈

vue.js 构建用户界面的 MVVM 框架,核心思想是:数据驱动、组件系统。

vue-cli 是vue的脚手架工具,目录结构、本地调试、代码部署、热加载、单元测试。

vue-router 是官方提供的路由器,使用vue.js构建单页面应用程序变得轻而易举。

vue-resource 请求数据,服务器通讯。

vuex 是一个专为 vue.js 应用程序开发的状态管理模式,简单来说Vuex就是管理数据的。

Element 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

Vue-progressbar 进度条组件。

vue-i18n 国际化资源管理组件。

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

项目组织架构

├─ .eslintrc.js  
├─ index.html  
├─ package.json // 配置文件  
├─ README.md // 说明文件  
├─ build // webpack打包执行文件  
├─ config // webpack打包配置文件  
├─ code-standards //编码规范  
├─ src   
│  ├─ main.js // webpack入口/项目启动入口  
│  ├─ api // 存放api接口文件,服务层   
│  ├─ common // 存放私有系统的公共样式、脚本、图片  
│  │  ├─ css  
│  │  │  └─ common.css // 公共样式  
│  │  ├─ img // 公共图片  
│  │  ├─ js  
│  │  │  ├─ common.js // 公共脚本  
│  │  │  └─ utils.js // 工具类  
│  ├─ config  
│  │  ├─ index.js // 共有配置文件  
│  ├─ router  
│  │  ├─ index.js // 存放路由  
│  ├─ views // 视图 (路由跳转的页面)  
│  ├─ pages //子视图(嵌套)  
│  │  ├─ pages.md  
│  ├─ vuex // 这一块将存放于common项目  
│  │  ├─ index.js  
│  │  ├─ actions  
│  │  ├─ getters  
│  │  └─ modules

相关推荐:

使用React全家桶搭建一个后台管理系统实例详解

【后端模板】收集了5个高端大气上档次的网站后台管理系统模板

今日推荐:十个简洁大气的网站后台管理系统模版

以上就是VUE后台管理界面案例分享的详细内容,更多请关注其它相关文章!