Vue+element后台管理实战详解

前言

相信看到这篇文章的你可能是一个没接触过脚手架开发的小白，也可能是没学过vue框架的前端新手，接下来由我给大家带来细致的vue后台开发实战详解，感兴趣的可以关注一下我的专栏

项目介绍

这次的实战项目是以论坛管理系统为主，分为超级管理端和管理端，集中超级管理和管理两种管理端的权限各不同，功能大概以表格为主，实现增删改查用户及文章的一些功能。

初始化

脚手架搭建

1. vue-cli全局安装

npm install -g @vue/cli
//安装vue-cli 4
复制代码

1. 初始化项目

vue create manage-vue
复制代码

1. 在项目目录下运行

npm run serve
复制代码

1. 注意：

• 在create过后一般提示的默认项可以酌情选择，这次的后台项目为Vue2
• 脚手架版本的不同可能会导致创建项目过程不同，这里我们的脚手架版本为4

目录解构

在搭建完项目后我们会看到我们的文件夹中多出好多东西，这个时候不要慌，我们的代码基本都是在src目录下的，我先简单地介绍一下src的文件结构及其作用

- src
    - assets
        - logo.png
    - components
        - HelloWorld.vue
    - App.vue
    - main.js
复制代码

1. assets为静态文件存放的目录，我们之后也可以新增public文件存储静态文件
2. components为存储组件的目录
3. App.vue为页面的入口页面
4. main.js为项目的入口文件，即所有的页面加载都会带上它

element-UI库

element的组件库是比较常用的了，可以酌情选择其他组件库来使用：element官方文档

1. 安装

npm i element-ui -S
复制代码

1. 引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
复制代码

1. 这里是在main.js文件中对element组件库进行引入

看到这里一个基本的项目就搭建完成，下来我们可以开始打代码（打工人）了，在此之前，你可能会想在脚手架项目中的页面跳转是怎么样的，vue文件怎么访问，那么下来开始介绍vue路由的使用

路由配置

1. 新建页面文件
   我们一般在src目录下新建一个views目录来存放我们的页面，我们先在views目录下新建Login.vue登录页
   
2. 安装vue-router

npm install vue-router --save-dev
复制代码

1. 安装完之后我们需要在src目录下新建router目录来存放我们的路由配置，在router目录下新建index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
复制代码

1. 通过创建vue实例对象配置路由

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
  ]
})
export default router
复制代码

Vuex配置

vuex是vue项目中用来全局访问的状态管理工具

因为我们的后台是分为超级管理和管理端的，所以需要存一些权限在vuex中方便调用，其中我们需要在与main.js同级下新建一个store的文件，并在其中配置vuex相关的数据及方法。

1. 安包

npm install vuex --save
复制代码

1. 导入vuex

import Vuex from 'vuex'
Vue.use(Vuex)
复制代码

1. 创建store对象

//store.js
const store = new Vuex.store({
  state:{count:0}
})
复制代码

1. 将store对象挂载到vue实例

new Vue({
    el:'#app',
    render:h => h(app),
    router,
    store
})
复制代码

axios配置及封装

1. 安装

npm i axios -S
复制代码

1. 引入：和vuex相同挂载在vue实例上

import axios from 'axios'
复制代码

1. 使用

//组件
async getinfo{
    await axios.get('url')
}
复制代码

因为axios每个组件都要调用，所以我们采用封装的方法，我们开发不同的接口的时候需要对请求进行不同的设置，封装的话会使开发更加方便。

4. 封装 我们在src目录下新建一个request文件在其中封装我们的请求，首先新建一个index.js

import axios from 'axios'
function myAxios(axiosConfig) {
  const service = axios.create({
    baseURL: 'https://hd.jxj777.top', // 设置统一的请求前缀
    timeout: 10000 // 设置统一的超时时长
  });
  return service(axiosConfig).then((result) => {
    return result.data
  })
}
复制代码

将我们引入的axios封装进我们封装的基本请求进去，然后进行axios.create然后设置基本的请求路径，和超时时间，最后通过一个函数将返回数据进行解耦，因为数据嵌套过多，所以只需要拿到result.data即可

5. 组件请求设置 在封装完后暴露出去，然后在同目录下我们可以新建对应组件的js文件，在其中封装对应的请求
   export function newAPI(params, token) { return myAxios({ url: '/manageB/sendnew', method: 'post', data: params, headers: { 'Content-Type': 'multipart/form-data', 'Authorization': 'Bearer ' + token }, }); }
   

6.调用 在之后就可以在对应的页面进行按需引入调用即可

import { loginAPI } from '@/request/user.js';
复制代码

开发准备

在项目所需配置完后我们就可以搭建基本的项目内容框架，因为是后台管理系统，所以我们需要进行父子路由的配置，以及相关页面，所以在项目正式开发之前，我们一般先在views目录下建立好相关的vue文件，然后配置好路由即可，这样做可以让团队协作更加方便，减少代码冲突等情况。