【Vue3】实现前端管理系统必备（1）——项目初始化_element依赖

安装Vue

安装与创建参考

npm install -g @vue/cli等利用npm命令安装/搭建依赖失败解决办法：
1.cmd以管理员身份打开
2.cnpm命令代替npm
1
2
3

（现在版本按以上参考完成创建项目时没有webpack的选项
创建时报错解决办法：以管理员身份打开Webstorm

两种运行方式：

安装git

很详细

了解

vue官方文档
Vue 项目结构分析，讲得好
以上链接的结构非该版本创建vue项目的结构，差不多。

vue3和2的区别了解

保姆级教程视频版

项目初始化

删除无用内容

创建项目自带helloword等组件，删除

css初始化

创建文件

该css内容项目所有组件都会遵守，具体可看前面保姆级教程视频版

写入main

必备依赖

1.axios依赖

npm install axios

2.element依赖

element官方文档
vue3.0以上依赖为element-plus引入依赖element-plus参考
不知道当时百度了啥，我的最后结果，可正常使用elementUI：

3.路由依赖

安装依赖：

npm install vue-router --save
1

在main中引入：

接口请求格式化

统一管理发出的请求便于维护

第一步：引入axios依赖

上文有

第二步：打开vue.config.js（没有就创建

写入：

module.exports = {
  devServer: {
    proxy: {
    //这个是自己的后端请求时前缀
      "/api": {
        target: "http://host:端口号", //这里填入你要请求的接口的前缀
        ws: true, //代理websocked
        changeOrigin: true, //虚拟的站点需要更管origin
        pathRewrite: {
          "^/api": "", //重写路径
        },
      },
      //这个是腾讯地图请求的前缀 具体前缀看其开发文档
      "/qq": {
        target: "https://apis.map.qq.com", 
        ws: true, 
        changeOrigin: true, 
        pathRewrite: {
          "^/qq": "", 
        },
      },
    },
    //port可以设定该vue项目的端口
    port: 8011,
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

第三步：在src下创建api文件夹，并创建以下文件

request和requstQQ不同点：请求的前缀不同 一个是项目的后台，一个是腾讯

第三步：ruquest.js为例：

定义request

// eslint-disable-next-line no-unused-vars   =>这个在错误提示该变量没有被使用时可以在它上一行注释
import Axios from "axios";
const request = Axios.create({
  baseURL: "/api",  		//这个就是前缀 之前在vue.config.js设定的
  timeout: 300000,
  // 链接超时  当发送时间超过300秒就不再发送了
  // 若网速过慢发送不成功就会报错
  headers: {},
});
1
2
3
4
5
6
7
8
9

有的请求会需要带上token，可以在request请求的时候统一带上

// request请求拦截器——增加token
request.interceptors.request.use((config) => {
  config.headers["token"] =
    window.localStorage.getItem("user") == null
      ? ""
      : JSON.parse(window.localStorage.getItem("user")).token;
  return config;
  // window.localStorage.getItem("user")
  //这个是按照项目登录时获得的内容存储的，不同项目不同依据
});
1
2
3
4
5
6
7
8
9
10

响应的结果可以先进行处理，同理存在响应拦截器
(ElMessageBox需要安装依赖element-plus
在ruquest.js最前import

import { ElMessageBox } from "element-plus";
1

request.interceptors.response.use((response) => {
  const code = response.status;
  if (code == 504) {
    ElMessageBox.confirm("网络请求超时", "提示", {
      showCancelButton: false,
      type: "warning",
    });
  }
 else if (code < 200 || code > 300) {
    ElMessageBox.confirm(response.message, "提示", {
      showCancelButton: false,
      type: "warning",
    });
  } else {
    if (response.data.code == 1) {
      //正常情况且返回正常数据  这个code以后台接口返回为准 
      return Promise.resolve(response);
    } 
    else {
        //异常提示
        ElMessageBox.confirm(response.data.msg, "提示", {
          showCancelButton: false,
          type: "warning",
        });
    }
  }
  return Promise.reject("error");
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

最后在该js下方导出

export default request;
1

第四步：api.js

基本：引入刚刚写好的request，requestQQ同理

userApi中则为请求的实体

//get请求变量为:params  post请求变量为:data
const userApi = {
  /**
   * 逆地址解析 已知坐标得到地址
   * get
   * @param params
   * @returns {*}
   */
  getAddressByLocation: (params) => {
    return requestQQ({
      url: "/ws/geocoder/v1",
      method: "get",
      params: params,
    });
  },
  /**
   * 增加用户账号
   * post
   * @param data
   * @returns {*}
   */
  addAccount: (data) => {
    return request({
      url: "/addaccount",
      method: "post",
      data: data,
    });
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

第五步：在vue中使用

1.在script内import上文写的api

import api from "@/api/api";
1

2.在method中定义的方法里使用：
无论是get还是post都是以下操作

      api.addAccount({ xx:xxx,xx1:xxxxx, }).then((res) => {
        if (res.data.code === 1) {
        //返回成功的操作
        }
      });
1
2
3
4
5

路由跳转

第一步：引入路由依赖

上文有

第二步：创建vue组件

在components中创建对应文件夹，创建vue component

第三步：在App.vue

删除多余内容，router-view写入

<template>
  <div>  <router-view /></div>
</template>
<script>
export default {
  name: 'App',
}
</script>
<style>
</style>

1
2
3
4
5
6
7
8
9
10
11

第四步：创建在src文件夹下创建router文件夹和index.js文件

第五步：index.js

import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
    {
        path: "/test",
        name: "TestRoute",
        //component对应的是该界面对应的组件
        component: () => import("../components/TestRoute"),
    },
];

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

第六步：运行打开网址

路由跳转2.0

在有些页面，只有登录的账号才可以进入该页面，否则应跳转到login界面，因此在路由跳转的index.js中应增加一项属性

requireAuth: true 代表需要先判断是否登录
1

判断位置：main.js中利用钩子函数判断是否拦截 router.beforeEach()，意思是在访问每一个路由前调用

router.beforeEach((to, from, next) => {
  //访问需要查看是否登录的页面时
  if (to.meta.requireAuth) {
    //已登录了则访问该网页
    if (已登录了则访问该网页的条件) {
      next();
    } else {
      //没有登录的情况则跳转到登录界面
      next({
      //path是在路由的index设置好的路径
        path: "login", 
        query: { redirect: to.fullPath },
      });
    }
  } else {
    //访问不需要查看是否登录的页面时
    if (to.path == "/login") {
      //访问login界面且已登录
      if (已登录了则访问该网页的条件) {
        next({
          path: "/",
        });
      } else {
        //访问login界面且未登录
        next();
      }
    } else {
      next();
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31