vue2.x +vuecli3 createProject

作者: xueyueshuai | 来源:发表于2023-04-27 12:38 被阅读0次

transfer项目

创建项目

1.选择第一步
"Manually select features"
2.选择第二步
"Choose Vue version"
"Babel"
"Router"
"Vuex"
"CSS Pre-processorsx"
3.选择第三步
"2.x"
4.选择第四步
"n"
5.选择第五步
"dart-sass"
6.选择第六步
"In package.json"
7.选择第七步
"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;
}

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'


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

let showErrorMsg = (data) => {
    console.log('showErrorMsg',data)
}

let logoutSuccess = ()=>{
    console.log('logoutSuccess');
}

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

const myAxiosInstance = axios.create({
  // timeout: 6000,
})

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

    let token = getToken()
    if (token) {
      requestConfig.headers['Xzd-Token'] = token;
    }

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

    // return requestConfig; 或 return Promise.resolve(requestConfig);
    return Promise.resolve(requestConfig);
  },
  err => {
    showErrorMsg({
      message: '提示',
      description: "请求异常"
    })
    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'] || ''

      switch (code) {
        case 200:
          if (response.config.data && response.config.data.includes('"exportExcel":true') && fileName) {
            return response
          } else {
            return response.data
          }
          break;

        case 201:
          showErrorMsg({
            message: '提示',
            description: msg || '系统错误',
            style: {
              whiteSpace: "pre-wrap"
            }
          })
          return Promise.reject(res)
          break;

        case 202:
          showErrorMsg({
            message: '提示',
            description: '登录令牌失效(v2)'
          })
          logoutSuccess()
          return Promise.reject(res)
          break;

        default:
          showErrorMsg({
            message: '提示code码不存在',
            description: '提示code码不存在'
          })
          return Promise.reject('服务器异常')
          break;
      }

    } else {
      showErrorMsg({
        message: '提示',
        description: "响应异常"
      })
    }
  },
  error => {
    showErrorMsg({
      message: '提示',
      description: "服务器响应异常"
    })
    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
})

vue2.x +vuecli3 createProject

transfer项目

创建项目

/App.vue 公共css

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

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

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

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

页面loading效果 /public/index.html

/src/api/test.js

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

vue2.x +vuecli3 createProject

transfer项目

创建项目

/App.vue 公共css

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

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

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

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

页面loading效果 /public/index.html

/src/api/test.js

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

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