Vue+element后台管理实战详解脚手架搭建 vue-cli全局安装初始化项目在项目目录下运行注意：在cre

「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」

前言

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

项目介绍

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

初始化

脚手架搭建

vue-cli全局安装

npm install -g @vue/cli
//安装vue-cli 4

初始化项目
```
vue create manage-vue
```
在项目目录下运行
```
npm run serve
```
注意：
- 在create过后一般提示的默认项可以酌情选择，这次的后台项目为Vue2
- 脚手架版本的不同可能会导致创建项目过程不同，这里我们的脚手架版本为4

目录解构

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

- src
    - assets
        - logo.png
    - components
        - HelloWorld.vue
    - App.vue
    - main.js

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

element-UI库

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

安装
```
npm i element-ui -S
```

引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

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

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

路由配置

新建页面文件

我们一般在src目录下新建一个views目录来存放我们的页面，我们先在views目录下新建Login.vue登录页
安装vue-router
```
npm install vue-router --save-dev
```
安装完之后我们需要在src目录下新建router目录来存放我们的路由配置，在router目录下新建index.js文件
```
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
```

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

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

Vuex配置

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

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

安包
```
npm install vuex --save
```
导入vuex
```
import Vuex from 'vuex'
Vue.use(Vuex)
```

创建store对象

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

将store对象挂载到vue实例

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

axios配置及封装

安装
```
npm i axios -S
```
引入：和vuex相同挂载在vue实例上
```
import axios from 'axios'
```

使用

//组件
async getinfo{
    await axios.get('url')
}

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

封装我们在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即可

组件请求设置在封装完后暴露出去，然后在同目录下我们可以新建对应组件的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文件，然后配置好路由即可，这样做可以让团队协作更加方便，减少代码冲突等情况。