跟着vue-element-admin做一个自己的脚手架

创建项目

Element Plus

Element Plus 引入

Vue Router

安装后，在src文件下新建router文件夹，写入该配置：

然后在main.js挂载：

axios

安装后，开始封装请求:

创建实例

baseurl:

相关解释

创建拦截器：

import axios from "axios";
import {ElMessage} from 'element-plus'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000, // 默认超时时间
});



// 添加请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    console.log(error); // for debug
    return Promise.reject(error);
  }
);



// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 2xx 范围内的状态码都会触发该函数。

    if (response.headers["content-type"] === "application/octet-stream")
      return response;

    const res = response.data;

    return res;
  },
  (error) => {
    // 超出 2xx 范围的状态码都会触发该函数。
    console.log("err" + error); // for debug
    ElMessage({
        message: error.message,
        type: "error",
        duration: 5 * 1000,
    });

    return Promise.reject(error);
  }
);


export default service;

杂项

使用npm run dev命令:

使用@:(vue.config.js)

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = defineConfig({
  transpileDependencies: true,
    configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
})

引入全局css: