项目公共部分的封装

设置公共样式

//reset.scss 清除默认样式
body,div,p,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,a,input,button,textarea,select{
  margin: 0;
  padding: 0;
  outline: none;
}
html,body{
  font-family:Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
  color: #333333;
  background-color: #ffffff;
  min-width: 1226px;
  font-size: 12px;
}
a{
  text-decoration: none;
}
ul,li{
  list-style: none;
}
input{
  font: normal;
}
input:focus,a:focus{
  outline: none;
}

//config.css根据设计定义基本主题
// 常规字体大小设置 
$fontA:       80px; //产品站大标题
$fontB:       38px; //产品站标题
$fontC:       28px; //导航标题
$fontD:       26px; //产品站副标题
$fontE:       24px; 
$fontF:       22px;
$fontG:       20px; //用在较为重要的文字、操作按钮
$fontH:       18px; //用于大多数文字
$fontI:       16px; //用于辅助性文字
$fontJ:       14px; //用于一般文字
$fontK:       12px; //系统默认大小

// 常规配色设置
$colorA:      #FF6600 !default; //用于需要突出和强调的文字、按钮和icon
$colorB:      #333333 !default; //用于较为重要的文字信息、内页标题等
$colorC:      #666666 !default; //用于普通段落信息 引导词
$colorD:      #999999 !default; //用于辅助、此要的文字信息、普通按钮的描边
$colorE:      #cccccc !default; //用于特别弱的文字
$colorF:      #d7d7d7 !default; //用于列表分割线、标签秒变
$colorG:      #ffffff !default; //用于导航栏文字、按钮文字、白色背景
$colorH:      #e5e5e5 !default; //用于上下模块分割线
$colorI:      #000000 !default; //纯黑色背景，用于遮罩层
$colorJ:      #F5F5F5 !default; //弹框标题背景色
$colorK:      #FFFAF7 !default; //订单标题背景色

//mixin.scss 

//flex布局复用
@mixin flex($hov:space-between,$col:center){
  display:flex;
  justify-content:$hov;
  align-items:$col;
}
@mixin bgImg($w:0,$h:0,$img:'',$size:contain){
  display:inline-block;
  width:$w;
  height:$h;
  background:url($img) no-repeat center;
  background-size:$size;
}
@mixin position($pos:absolute,$top:0,$left:0,$w:100%,$h:100%){
  position:$pos;
  top:$top;
  left:$left;
  width:$w;
  height:$h;
}
@mixin positionImg($pos:absolute,$top:0,$right:0,$w:0,$h:0,$img:''){
  position:$pos;
  top:$top;
  right:$right;
  width:$w;
  height:$h;
  background:url($img) no-repeat center;
  background-size:contain;
}
@mixin height($h:0,$lh:$h) {
  height: $h;
  line-height: $lh;
}
@mixin wH($w:0,$h:0) {
  width:$w;
  height: $h;
}
@mixin border($bw:1px,$bc:$colorF,$bs:solid) {
  border: $bw $bs $bc; 
}

vue.config.js公共配置

const path = require('path')
module.exports = {
  // 基本路径 //test pull
  publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
  // 输出文件目录
  outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,
  /** vue3.0内置了webpack所有东西，
   * webpack配置,see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
   **/
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
        include: ['./src/icons']
      })
  },
  configureWebpack: config => {
    config.resolve = {
      // 配置解析别名 // test push
      extensions: ['.js', '.json', '.vue'], // 自动添加文件名后缀
      alias: {
        vue: 'vue/dist/vue.js',
        '@': path.resolve(__dirname, './src'),
        '@c': path.resolve(__dirname, './src/components')
      }
    }
  },
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      sass: {
        data: `@import "@/styles/main.scss";`
        // prependData: `@import "./src/styles/main.scss";`
      }
    },
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require('os').cpus().length > 1,
  /**
   *  PWA 插件相关配置,see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
   */
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    open: false, // 编译完成是否打开网页
    host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
    port: 8080, // 访问端口
    https: false, // 编译失败时刷新页面
    hot: true, // 开启热加载
    hotOnly: false,
    proxy: {
      '/devApi': {
        target: 'http://www.web-jshtml.cn/productapi/token', //API服务器的地址  http://www.web-jshtml.cn/api
        changeOrigin: true,
        pathRewrite: {
          '^/devApi': ''
        }
      }
    },
    overlay: {
      // 全屏模式下是否显示脚本错误
      warnings: true,
      errors: true
    },
    // eslint-disable-next-line no-unused-vars
    before: app => {}
  },
  /**
   * 第三方插件配置
   */
  pluginOptions: {}
}

axios二次封装

import axios from 'axios'
import { Message } from 'element-ui'
import { utileInstance } from '@/libs/utils'
import router from '@/router/index'
let instance = axios.create({
    baseURL: process.env.NODE_ENV == 'development' ? 'xxx' : 'xx'
})

// let loadingInstance = null
//设置统一的请求头
instance.defaults.headers.post['content-type'] = 'application/json'
//http状态码信息
let httpCode = {
    400: '请求参数错误',
    401: '权限不足, 请重新登录',
    403: '服务器拒绝本次访问',
    404: '请求资源未找到',
    500: '内部服务器错误',
    501: '服务器不支持该请求中使用的方法',
    502: '网关错误',
    504: '网关超时'
}
instance.interceptors.request.use(config => {
    const TOKEN = utileInstance.getLocalStorage('admintoken')
    config.headers['token'] = TOKEN || ''

    if (config.url == 'greenhouse/gh_qrcode' || config.url == 'picking_user/pu_qrcode' || config.url.includes('ExportExcel')) {
        config['responseType'] = 'blob'
    }
    // loadingInstance = Loading.service({       
    //     spinner: 'fa fa-spinner fa-spin fa-3x fa-fw',
    //     text: '拼命加载中...'
    //   })

    return config
})

instance.interceptors.response.use(res => {
    setTimeout(() => {
        // loadingInstance.close()
    }, 1000);

    if (res.data.type === '1') {
        // Message({
        //     message: res.data.text,
        //     type: 'success'
        //   })
        return Promise.resolve(res.data)
    } else if (res.data.constructor == Blob) {
        return Promise.resolve(res)
    } else {
        if (res.data.type == '-1') {
            localStorage.clear('token')
            router.push({ path: '/login' })
        }
        Message({
            message: res.data.text,
            type: 'error'
        })
        return Promise.reject(res.data.message)
    }
}, error => {
    // loadingInstance.close()
    if (error.response) {
        let tip = error.response.status in httpCode ? httpCode[error.response.status] : error.response.data.message
        Message({
            message: tip,
            type: 'error'
        })
    }
    return Promise.reject(error)

})

const get = (url, data, config) => {
    return instance({
        url: url,
        method: 'GET',
        data: data,
        ...config
    }).then(res => {
        return Promise.resolve(res)
    }).catch(err => {
        return Promise.reject(err)
    })
}

const post = (url, data, config) => {
    return instance({
        url: url,
        method: 'POST',
        data: data,
        ...config
    }).then(res => {
        return Promise.resolve(res)
    }).catch(err => {
        return Promise.reject(err)
    })
}

export { post, get }

文件流下载

         qrcode(url, params, name) {
            this.$api.tableAll(url, params).then(res => {
                this.$message({
                    message: '下载成功',
                    type: 'success'
                });
                const myBlob = new window.Blob([res.data], { type: "image/png" });
                let link = document.createElement("a");
                link.download = name
                link.href = URL.createObjectURL(myBlob);
                link.target = '_blank';
                document.body.appendChild(link);
                link.click();
                URL.revokeObjectURL(link.href)
                document.body.removeChild(link)
            })
        },