vue通用后台管理

技术栈：使用vue-router和vuex来实现页面的数据管理，使用axios以及element-ui，对axios进行了二次的封装，使用mock来模拟后端数据，使用ECharts实现了首页图表的展示
模块分配：登录页，后台首页，用户管理页，分页处理，用户权限，路由守卫和权限管理

1.安装vue-cli
npm install -g@vue/cli
或者安装yarn
npm i -g yarn
利用淘宝镜像
npm config get registry
npm config set registry https://registry.npmmirror.com

利用yarn安装vue-cli
yarn global add @vue/cli
2.创建项目
vue create my-app
3.运行项目
npm run serve
4.cdnjs网址：https://cdnjs.com/
5.安装element-ui
npm i element-ui -S
按需引入
npm install babel-plugin-component -D
在这里插入图片描述

6.vue-router的引入
npm i vue-router@3.6.5
npm官网网址：https://www.npmjs.com/
路由重定向：

7.安装less
npm i less@4.1.2
npm i less-loader@6.0.0

8.安装axios
npm i axios
在src下创建utils文件夹

在配置utils文件夹中的文件request.js，用于二次封装axios

在src下创建名为api的文件夹

在api文件夹中的index.js文件中引入刚刚配置好的http

在Home组件中引入并使用axios

http://mockjs.com/
9.安装mock
npm i mockjs
在src文件夹中的api下创建名为mock.js的文件


在main.js中引入该文件

在src下的api文件夹中创建mockServerData的文件，
并在其下的home.js中配置所需的数据
import Mock from ‘mockjs’

let List=[]

export default{
// Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位
getStatisticalData:()=>{
for(let i=0;i<7;i++){
List.push(
Mock.mock({
苹果:Mock.Random.float(100,8000,0,0),
vivo:Mock.Random.float(100,8000,0,0),
oppo:Mock.Random.float(100,8000,0,0),
魅族:Mock.Random.float(100,8000,0,0),
三星:Mock.Random.float(100,8000,0,0),
小米:Mock.Random.float(100,8000,0,0)
})
)
}
return{
code:200000,
data:{
videoData:[
{
name:‘小米’,
value:2999
},
{
name:‘苹果’,
value:5999
},
{
name:‘vivo’,
value:1500
},
{
name:‘oppo’,
value:1999
},
{
name:‘魅族’,
value:2200
},
{
name:‘三星’,
value:4500
}
],
// 柱状图
userData:[
{
data:‘周一’,
new:5,
active:200
},
{
data:‘周二’,
new:10,
active:500
},
{
data:‘周三’,
new:12,
active:550
},
{
data:‘周四’,
new:60,
active:800
},
{
data:‘周五’,
new:65,
active:550
},
{
data:‘周六’,
new:53,
active:770
},
{
data:‘周日’,
new:33,
active:170
}
],
// 折线图
orderData:{
date:[‘20191001’,‘20191002’,‘20191003’,‘20191004’,‘20191005’,‘20191006’,‘20191007’],
data:List
},
tableData: [
{
name: “oppo”,
todayBuy: 500,
monthBuy: 3500,
totalBuy: 22000,
},
{
name: “vivo”,
todayBuy: 300,
monthBuy: 2200,
totalBuy: 24000,
},
{
name: “Apple”,
todayBuy: 800,
monthBuy: 4500,
totalBuy: 65000,
},
{
name: “小米”,
todayBuy: 1200,
monthBuy: 6500,
totalBuy: 45000,
},
{
name: “三星”,
todayBuy: 300,
monthBuy: 2000,
totalBuy: 34000,
},
{
name: “魅族”,
todayBuy: 350,
monthBuy: 3000,
totalBuy: 22000,
},
],
}
}
}
}
10.安装echarts
echarts官网：https://echarts.apache.org/handbook/zh/get-started/
npm i echarts@5.1.2
引入echarts：
fsstmock：https://www.fastmock.site/#/project/580c2449448d3562db09dbb84b0a02de
https://tailwindcss.com
vant网址：https://vant-ui.github.io/vant/v2/#/zh-CN/