Vue学习笔记: Vue + Element-ui搭建后台管理系统模板

技术：Vue + Element-ui

功能：后台管理系统基础模板，路由配置，加载页面进度条,请求响应拦截器的封装等

页面预览：后台管理系统模板

代码:GitHub

一、创建初始化项目

选择好项目所在文件夹：进入cmds输入 vue create zhb_vue_cli

zhb_vue_cli为自定义项目名称；

如果不需要太多功能的话可以选择快速创建。选择第一个直接回车，进行项目创建；

cmd窗口输入命令 cd zhb_vue_cli 回车进入 vueinit001 项目中，再输入 npm run serve 回车启动服务

1.1.4、浏览器地址栏输入 http://localhost:8080/ ，正常打开网页表示项目创建成功

二、建立相应目录结构，配置路由

详细介绍几个文件

1、package.json

　　package.json文件是项目配置文件，除了项目的一些基本信息外，注意一下三点：

　　（1）dependencies：项目发布时的依赖

　　（2）devDependencies：项目开发时的依赖

　　（3）scripts：编译项目的一些命令

2、main.js

这里是入口文件，可以引入一些插件或静态资源，当然引入之前要先安装了该插件，在package.json文件中有记录。

3、App.vue

这是一个标准的vue组件，包含三个部分，一个是模板，一个是script，一个是样式，这里需要了解vue的基础。

三、封装请求拦截响应等


import axios from 'axios'
import {  Message } from 'element-ui'
import router from '@/router';const service = axios.create({timeout: 20000
})
/** 添加请求拦截器 **/
service.interceptors.request.use(config => {if (localStorage.getItem('token')) {config.headers['token'] = localStorage.getItem('token')}if (config.method == 'post') {config.headers['Content-Type'] = 'application/json'}if (config.data instanceof FormData) {config.headers = {'Content-Type': 'multipart/form-data','token':localStorage.getItem('token')}}return config},error => {console.log(error)return Promise.reject(error)}
)// 这里的conut 是为了防止tokne失效导致太多提示框弹出
let count = 0
/** 添加响应拦截器  **/
service.interceptors.response.use(response => {const res = response.data;if (res.code != 20000) {if (res.code == 30001) {if (count === 0) {Message({message: "身份验证过期，请重新登录！",type: "error",});}localStorage.removeItem("token")router.push({ path: '/login', query: { path: router.currentRoute.fullPath } })}// else if (res.code == 10001) {//     Message.error(res.msg);// }count++return Promise.reject(res)} else {return res}},error => {if (count === 0) {if( error.response.data.code == "30001" ){Message({message: '登录令牌失效，请重新登录',type: 'error',duration: 3 * 1000})count = 0;localStorage.removeItem("token")router.push({ path: '/login', query: { path: router.currentRoute.fullPath } })}else{Message({message: error.message,type: 'error',duration: 5 * 1000})}}count++return Promise.reject(error)}
)export default service

四、配置路由

import Vue from 'vue';
import VueRouter from 'vue-router';Vue.use(VueRouter);const routes = [{path: '/',redirect: '/login'},{path: '/login',name: "login",component: () =>import('@/views/Login.vue'),},{path: '/',name: "index",component: () => import('@/layout/admin.vue'),meta: { title: 'admin' },children:[{path: '/index',name: "index",component: () => import('@/views/index.vue'),meta: { title: '系统首页' },},{path: '/user',name: "user",component: () => import('@/views/user.vue'),meta: { title: '用户' },},{path: '/portal',name: "portal",component: () => import('@/views/portal.vue'),meta: { title: '门户管理' },},{path: '/edit',name: "edit",component: () => import('@/views/edit.vue'),meta: { title: '富文本编辑器' },},]},
]
export default new VueRouter({base: process.env.BASE_URL,routes
})

五、封装菜单组件和头部组件

代码详情：请在GitHub下载项目

组装：

六、预览页面

学习小记，仅供参考，如有疑问请一键三连；若有bug之处，恳请同仁多多指教！！！