vue2.x +vuecli3createProject

transfer项目

"vue create '项目名'" 创建项目 （需要vue-cli 3.x以上）

创建项目

1.选择第一步
"Manually select features"
2.选择第二步 选择以下
"Babel"
"Router"
"Vuex"
"CSS Pre-processors"
3.选择第三步
"2.x"
4.选择第四步 ter
"n"
5.选择第五步 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
"dart-sass"
6.选择第六步
"In package.json"
7.选择第七步 Save this as a preset for future projects?
"n"

/App.vue 公共css

<style>
.el-loading-mask {
  /* background-color: rgba(255, 255, 255, 0.3) !important; */
}

#app {
  width: 100%;
  margin: 0 auto;
  min-width: 1300px;
  background: #fff;

  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  font-size: 14px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;//不压缩
}

html {
  /* AntD 字体家族：https://ant.design/docs/spec/font-cn#%E5%AD%97%E4%BD%93%E5%AE%B6%E6%97%8F */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
</style>

新增 /config/index.js 配置文件

export const config = {
    app_name: '小动物',
    api_host: 'https://dongwu.dev.iwto.cn',
    // api_host: 'http://localhost:9102',
    // api_host: '',// 打包用这个
}

新增 /vue.config.js 没有可以新建 声明打包相关配置

module.exports = {
    publicPath: "./",  // 可以设置成相对路径，这样所有的资源都会被链接为相对路径，打出来的包可以被部署在任意路径
    outputDir: "./dist",  //打包时生成的生产环境构建文件的目录
    assetsDir: './static123456',  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
}

修改 /router/index.js 404页面 和 测试页面 和 首页

新增网络请求文件 /utils/request.js 并安装 npm install axios

import axios from 'axios'
import config from '@/config/index.js'
import router from "@/router";

import {Notification} from 'element-ui';

// ------- start -------------
let getToken = () => {
  return config.getToken()
}
let getBaseUrl = () => {
  return config.apiHost
}

let showErrMsg = (data) => {
  Notification({
    title: data.title || '提示',
    message: data.content,
    type: data.type || 'warning'
  });
}

let tokenErr = () => {
  router.push('/login')
  showErrMsg({
    title: '提示',
    content: '登录令牌失效,请先登录'
  })
}

// ------- end -------------

const myAxiosInstance = axios.create()

myAxiosInstance.interceptors.request.use(
  requestConfig => {
    requestConfig.baseURL = getBaseUrl()

    let token = getToken()

    if (token) {
      requestConfig.headers['token'] = token;
    }

    //数据导出
    if (requestConfig.data && requestConfig.data['exportExcel'] === true) {
      requestConfig.responseType = 'blob'
    }

    // return requestConfig; 或 return Promise.resolve(requestConfig);
    return Promise.resolve(requestConfig);
  },
  err => {
    showErrMsg({
      title: '提示',
      content: "请求异常"
    })
    return Promise.reject(err);
  }
)

myAxiosInstance.interceptors.response.use(
  response => {
    if (response.status < 500) {
      let res = response.data;

      let code = response.headers['xzd-code'] * 1 || res.code
      let msg = decodeURIComponent(response.headers['xzd-msg'] || '') || res.msg
      let fileName = response.headers['xzd-file-name'] || ''

      if (code === 1 || code === 200) {
        if (response.config.data && response.config.data.includes('"exportExcel":true') && fileName) {
          return response
        } else {
          return response.data
        }
      } else if (code === 0 || code === 201) {
        showErrMsg({
          title: '提示',
          content: msg || '系统错误',
        })
        return Promise.reject(res)
      } else if (code === 202) {
        tokenErr()
        return Promise.reject(res)
      } else {
        showErrMsg({
          title: '提示',
          content: '提示 res.code 未在预期内'
        })
        return Promise.reject('服务器异常')
      }
    } else {
      showErrMsg({
        title: '提示',
        content: "响应异常"
      })
    }
  },
  error => {
    if (error.response && error.response.status === 401) {
      tokenErr()
    } else {
      showErrMsg({
        title: '提示',
        content: "服务器响应异常"
      })
    }

    return Promise.reject(error)
  }
)

export default myAxiosInstance

页面loading效果 /public/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> -->
    <title></title>
    <style>
        html,
        body,
        #app {
            /* height: 100%; */
            margin: 0px;
            padding: 0px;
        }

        #loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999999;
            background: #0d0d1bcf;
        }

        #loader {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border-radius: 50%;
            border: 3px solid transparent;
            /* COLOR 1 */
            border-top-color: #FFF;
            -webkit-animation: spin 2s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -ms-animation: spin 2s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -moz-animation: spin 2s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -o-animation: spin 2s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 2s linear infinite;
            /* Chrome, Firefox 16+, IE 10+, Opera */
            z-index: 1001;
        }

        #loader:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            /* COLOR 2 */
            border-top-color: #FFF;
            -webkit-animation: spin 3s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -moz-animation: spin 3s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -o-animation: spin 3s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -ms-animation: spin 3s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 3s linear infinite;
            /* Chrome, Firefox 16+, IE 10+, Opera */
        }

        #loader:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FFF;
            /* COLOR 3 */
            -moz-animation: spin 1.5s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -o-animation: spin 1.5s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -ms-animation: spin 1.5s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -webkit-animation: spin 1.5s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 1.5s linear infinite;
            /* Chrome, Firefox 16+, IE 10+, Opera */
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);
                /* IE 9 */
                transform: rotate(0deg);
                /* Firefox 16+, IE 10+, Opera */
            }

            100% {
                -webkit-transform: rotate(360deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);
                /* IE 9 */
                transform: rotate(360deg);
                /* Firefox 16+, IE 10+, Opera */
            }
        }

        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);
                /* IE 9 */
                transform: rotate(0deg);
                /* Firefox 16+, IE 10+, Opera */
            }

            100% {
                -webkit-transform: rotate(360deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);
                /* IE 9 */
                transform: rotate(360deg);
                /* Firefox 16+, IE 10+, Opera */
            }
        }

        /* JavaScript Turned Off */

        #loader-wrapper .load_title {
            font-family: 'Open Sans';
            color: #FFF;
            font-size: 19px;
            width: 100%;
            text-align: center;
            z-index: 9999999999999;
            opacity: 1;
            line-height: 30px;

            position: absolute;
            bottom: 0;
        }

        #loader-wrapper .load_title span {
            font-weight: normal;
            font-style: italic;
            font-size: 13px;
            color: #FFF;
            opacity: 0.5;
        }
    </style>

</head>

<body>
    <div id="app">
        <div id="loader-wrapper">
            <div id="loader"></div>
            <div class="load_title">
                正在加载,请耐心等待...
                <br>
                <span>v1.3</span>
            </div>
        </div>
    </div>
</body>

</html>

/src/api/test.js

import request from "@/utils/request";

export  function test1(data){
  return request({
    method: "post",
    url: '/api/test/test1',
    data,
  });
}


// 这个是调用处
// 开始loading
test1({}).then(res => {
  console.log(res)
}).catch(err => {
  console.log('catchErr', err)
}).finally(()=>{
  // 停止loading
})