Vue2项目实战

项目实战

Vue 2 即将在2023 年 12 月 31 日终止支持，于是心血来潮开发了一个简单的小项目~

---

余生可贵，不可浪费~~~

---

一、 搭建项目环境

关于项目： 前端用到了Vue.2 + ElementUi，后端用node做了几个简单的接口。
项目类型：类似管理系统设计了几个相关页面，有登录、首页及菜单页面等，其中首页及大屏(菜单页全屏展示)用到了Echarts实现…
页面展示：

二、封装axios请求

1.安装axios

npm install axios --save-dev

2.封装相关接口api

代码如下（示例）：

//获取列表数据
export function getList(params){
   
    return http.get(`${
   resquest}/list`,params)
}

可参考集合 Vue项目封装axios。

三、配置路由

代码如下（示例）：

import Router from 'vue-router';
// 创建router实例对象并暴露
const router = new VueRouter({
   
  mode: "history",
  base: process.env.BASE_URL,  // 如果使用history模式，必须设置base参数
  routes: [
    {
   
      path: