(12/05/21) vue-element-admi介绍 后台系统基础环境搭建
1. vue-element-admin 介绍
- vue-element-admin 是一个后台前端解决方案,它基于 Vue.js 和 Element-UI 实现,它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型,内部集成了PC项目中很多的业务场景和功能, 尤其在当下SPA的趋势下,我们可以从中获得很多成熟的解决方案。
官网地址
线上demo地址
2. vue-admin-template 介绍
- vue-admin-template (在线运行效果) ------(官方文档)
vue-admin-template
是在vue-element-admin
的基础上做了大量的删减,只保留了后台管理系统最关键的框架部分,非常适合我们在此基础上做二次开发- 市面上使用vue技术栈开发的PC后台管理项目很大一部分都是基于
vue-admin-template
进行的二次开发,我们的人资项目也基于它来实现
。
3. 下载运行vue-admin-template (官方文档)
$ git clone https://gitee.com/panjiachen/vue-admin-template.git # 从码云拉取代码
$ cd vue-admin-template #切换到具体目录下
$ npm install #安装所有依赖
$ npm run dev #启动开发调试模式 查看package.json文件的scripts可知晓启动命令
4. 认识vue-admin-template 目录结构
├── build # 构建相关
├── mock # 项目mock 模拟数据,在接口服务器没有就绪时,临时充当接口
├── public # 静态资源
│ ├── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源 不会参与打包 直接直出
│ ├── components # 全局公用组件 和业务不相关 上传组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout 负责搭建项目的整体架子结构 html结构
│ ├── router # 路由
│ ├── store # 全局 store管理 vuex管理数据的位置 模块化开发 全局getters
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法 request.js
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面 路由级别的组件
│ ├── App.vue # 入口页面 根组件
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
│ └── settings.js # 配置文件
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintignore # eslint 忽略文件
├── .eslintrc.js # eslint 配置项
├── .gitignore # git 忽略文件
├── .travis.yml # 自动化CI配置
├── .babel.config.js # babel-loader 配置
├── jest.config.js # 测试配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json
- src目录:在做项目时,最关注的就是
src
目录, 里面是所有的源代码和资源 - 非src目录:一般都是对项目的环境和工具的配置
5. 认识src目录熟悉项目的运行机制
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
│ └── settings.js # 配置文件
5.1 整体运行方式
6. 重点文件
6.1 main.js
- main.js是整个项目的入口文件(webpack中学习的入口文件
6.2 App.vue
- App.vue是根组件
6.3 permission.js
- permission.js 是控制页面登录权限的文件,在main.js中引入了它
- 此处的代码没有经历构建过程会很难理解, 所以先将此处的代码进行注释,等我们构建权限功能时,再从0到1进行构建。请直接注释代码即可
6.4 settings.js
对于一些项目信息的配置,里面有三个属性
title
(项目名称),fixedHeader
(固定头部),sidebarLogo
(显示左侧菜单logo)settings.js
中的文件在其他的位置会引用到,我们不用动它
6.5 Vuex
- 当前的Vuex结构采用了模块形式进行管理共享状态,其架构如下
其中app.js模块和settings.js模块,功能已经完备,不需要再进行修改。 user.js模块是我们后期需要重点开发的内容,所以这里我们将user.js里面的内容删除,并且导出一个默认配置
store/modules/user.js
export default {namespaced: true,state: {},mutations: {},actions: {}
}
6.6 scss 和 icons
- 该项目还使用了scss作为css的扩展语言,在**
styles
**目录下,我们可以发现scss的相关文件,相关用法 我们会在下一小节进行详细讲解 - 图标字体使用,icons的结构如下
7. 重置代码
- 这里为了后续更清楚的书写代码,我们将原有代码注释掉,换成如下代码
utils/request.js
// 导出一个axios的实例 而且这个实例要有请求拦截器 响应拦截器
import axios from 'axios'
const service = axios.create() // 创建一个axios的实例
// service.interceptors.request.use() // 请求拦截器
// service.interceptors.response.use() // 响应拦截器
export default service // 导出axios实例
- 移除mock:由于我们本项目有配套的后端接口,所以不需要用到模拟数据,这里将mock部分删除掉。
(1).main.js中删除(或注释)mock部分的功能
(2) 删除**src/mock
**文件夹
8. 小结
- 所有vue项目的关键文件都基本相同,可以理解为都是用vue脚手架工具创建出来的;
- vue-admin-template额外做了一些配置,我们可以直接使用;
9. 准备后端服务器
- 安装mongodb
- 后端服务-Nodejs
- 启动后端服务,文件第一次启动要用 npm run start ( 后续运行npm run serve)
9.1 测试接口服务器
- 用postman工具,测试接口服务器的功能
- localhost:3000/api/sys/login
测试账号:13800000002 密码: 123456
(12/05/21) vue-element-admi介绍 后台系统基础环境搭建相关推荐
- 大数据介绍、集群环境搭建、Hadoop介绍、HDFS入门介绍
大数据介绍.集群环境搭建.Hadoop介绍.HDFS入门介绍 文章目录 大数据介绍.集群环境搭建.Hadoop介绍.HDFS入门介绍 1.课前资料 2.课程整体介绍 3.大数据介绍 3.1 什么是大数 ...
- 计算机毕业设计node.js+vue+Element电商后台管理系统
项目介绍 网络的广泛应用给生活带来了十分的便利.所以把电商后台管理与现在网络相结合,利用node技术建设电商后台管理系统,实现电商后台管理的信息化.则对于进一步提高电商后台管理发展,丰富电商后台管理经 ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- 学习笔记之-Kubernetes(K8S)介绍,集群环境搭建,Pod详解,Pod控制器详解,Service详解,数据存储,安全认证,DashBoard
笔记来源于观看黑马程序员Kubernetes(K8S)教程 第一章 kubernetes介绍 应用部署方式演变 在部署应用程序的方式上,主要经历了三个时代: 传统部署:互联网早期,会直接将应用程序部署 ...
- 乐优商城之后台管理系统的环境搭建(七)
文章目录 (一)搭建管理后台的前端 (二)项目结构 (三)vuetify (四)使用域名访问后台页面 (五)nginx的介绍 (六)nginx的使用 (一)搭建管理后台的前端 把资料包中提供的leyo ...
- autosar架构详细介绍_基于MATLAB环境搭建满足AUTOSAR标准的模型高级培训班
一.课程目标 1.加深对AUTOSAR标准的认识和理解 2.能够在MATLAB平台上搭建满足AUTOSAR标准要求的应用层软件模型 3.掌握建模过程中的关键概念并能够灵活运用 4.掌握一些高级建模技巧 ...
- uniApp介绍篇-1.基础框架搭建与排坑备忘
基础框架搭建与排坑备忘 一.uniApp介绍与注意点 1.目录结构 2.跳转页面 3.条件编译 4.生命周期 5.样式布局 6.图片引用 7.html标签 8.JsApi 9.小程序组件支持 10.事 ...
- Hadoop入门(上):大数据特点、大数据前景、大数据组织结构、Hadoop组成、Hadoop版本介绍、Hadoop运行环境搭建、CentOS6安装JDK、安装Hadoop、Hadoop目录结构
资料来源于尚硅谷 本篇文章目录 第1章·大数据概论 1.1.大数据概念. 1.2.大数据特点(4V) 1.3.大数据应用场景 1.4.大数据发展前景 1.5·大数据部门业务流程分析. 1.6·大数据部 ...
- client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法
[本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了 预祝大家新春快乐 [ ]~( ̄▽ ̄) ...
最新文章
- 【廖雪峰python入门笔记】break和continue
- python详细安装教程3.8-手把手教你安装Python3.8环境
- winform下通过webclient使用非流方式上传(post)数据和文件
- 设置span的宽度,让span象button那样显示
- Catlike Coding网站文章解析 -- 1.Procedural Grid
- AES加密算法256位密钥与128位密钥的不同之处
- android 7.0 黑屏,Android app启动是出现白屏或者黑屏如何解决?
- Qt实现Areo效果
- GDAL使用插件方式编译HDF4、HDF5以及NetCDF的bug修改
- Android 原生开发、H5、React-Native Flutter 使用利弊和场景技术分享
- mybatis-plus自定义sql分页
- Docker下安装Redis超详细步骤
- wps大纲栏显示在右边_隐藏显示word页面标记,就这么几招,你会吗?
- oracle 11g xdb.,Oracle 11g升级到11.2.0.3过程中XDB.DBMS_XMLSCHEMA相关报错
- 《深海探测装备》学习笔记1(深海探测传感器)
- 内网visual studio code remote-ssh远程离线服务器
- 如何把小程序游戏运行到自有App中?(IOS篇)
- php破解referer防盗链解析,Referer原理与图片防盗链实现方法详解
- 接入层交换机和汇聚层交换机的选择及连接方案
- 全网热议的云原生技术到底什么?看完这25点你就知道了