Vue-cli scaffolding construction project and Axios packaging

$ npm install -g cnpm --registry=https://registry.npm.taobao.orgCopy the code

npm install webpack -gCopy the code

npm install -g vue-cliCopy the code

vue init webpack demoCopy the code

npm run devCopy the code

npm install element-ui -SCopy the code

npm install --save-dev css-loader
npm install --save-dev sass-loader
npm install --save-dev style-loader

// Sass-loader depends on Node-sass
npm install --save-dev node-sassCopy the code

rules:[
    ....
    {
        test: /\.sass$/.loaders: ['style'.'css'.'sass']}]Copy the code

    proxyTable: {
      '/api': {           // Configure the background proxy
        target: 'http://192.168.37.56:8090'.secure: false.pathRewrite: {
          '^/api': ' '
        },
        changeOrigin: true
      },
      "/socket": {       / / configuration webSocket
        target: 'http://192.168.37.56:8090'.secure: false.pathRewrite: {
          '^/socket': ' '
        },
        changeOrigin: true.ws: true}},Copy the code

'use strict'
const path = require('path')

module.exports = {
  // Development environment
  dev: {
    assetsSubDirectory: 'static'.// Compile the output secondary directory
    assetsPublicPath: '/'.// The root directory for compiling and publishing, which can be configured as the resource server domain name or CDN domain name
    proxyTable: {}, // Configure the background proxy
    host: 'localhost'.// Run the domain name IP of the test page
    port: 8080.// The port to run the test page
    autoOpenBrowser: false.// Whether the browser opens automatically when the project runs
    errorOverlay: true.// Browser error message
    notifyOnErrors: true.// Cross-platform error message
    poll: false.// Use the file system to get notification of file changes devserver.watchoptions
    devtool: 'cheap-module-eval-source-map'.// Add debugging, this property is the original source code
    cacheBusting: true.// Invalidate the cache
    cssSourceMap: true // It is very difficult to locate bugs after code compression. SourceMap is introduced to record the position information before and after compression. When errors are generated, the location is directly located before compression
  },
  // Production environment
  build: {
    index: path.resolve(__dirname, '.. /dist/index.html'), // Compile the input index.html file
    assetsRoot: path.resolve(__dirname, '.. /dist'), // Static resource path to compile output (the file when the project is packaged)
    assetsSubDirectory: 'static'.// Compile the output secondary directory
    assetsPublicPath: '/'.// The root directory for compiling and publishing, which can be configured as the resource server domain name or CDN domain name
    productionSourceMap: true.// Whether to enable cssSourceMap
    devtool: '#source-map'.// Add debugging, this property is the original source code
    productionGzip: false.// Whether to enable gzip
    productionGzipExtensions: ['js'.'css'].// Use the extension of the gzip compressed file
    bundleAnalyzerReport: process.env.npm_config_report // Package analysis}}Copy the code

npm install axios --save-devCopy the code

import axios from "axios";
import store from "@/store";
import { Message } from "element-ui";
let router = import("@/router");

axios.defaults.baseURL = "/api";
axios.defaults.headers.post["Content-Type"] = "application/json; charset=UTF-8";
axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.headers["Cache-Control"] = "no-cache";
axios.defaults.headers["pragma"] = "no-cache";

let source = axios.CancelToken.source();

// Request to add token
axios.interceptors.request.use(request= > {
    request.headers["demo-auth"] = store.state.loginInfo ? store.state.loginInfo.userId : ""; // The userId has been saved in store
    return request;
})

// Switch the page to cancel the request
axios.interceptors.request.use(request= > {
    request.cancelToken = source.token;
    return request;
});
router.then(lib= > {
    lib.default.beforeEach((to, from, next) = > {
        source.cancel()
        source = axios.CancelToken.source();
        next()
    })
})

// The login expires
axios.interceptors.response.use(response= > {
    let data = response.data;
    if([10002].includes(data.ret)
    ) {
        router.then(lib= > lib.default.push({ name: "login" })); // Jump to the login page
        Message.warning(data.msg);
    }
    return response;
})

// Return value destruct
axios.interceptors.response.use(response= > {
    let data = response.data;
    let isJson = (response.headers["content-type"] | |"").includes("json");
    if (isJson) {
        if (data.code === 200) {
            return Promise.resolve({
                data: data.data,
                msg: data.msg,
                code: data.code,
            });
        }
        return Promise.reject(
            data.msg ||
            "Network error"
        );
    } else {
        return data;
    }
}, err => {
    let isCancel = axios.isCancel(err);
    if (isCancel) {
        return new Promise((a)= >{}); }return Promise.reject(
        err.response.data &&
        err.response.data.msg ||
        "Network error"
    );
})

export function post(url, data, otherConfig) {
    return axios.post(url, data, otherConfig);
}

export function get(url, data, otherConfig) {
    return axios.get(url, { params: data, ... otherConfig }); }Copy the code

import { get, post } from "@/services/ajax";

// Get the program configuration
export function getConfig() {
    return get("static/config.json".null, { baseURL: ". /" });
}

// Find the occupied location of the goods
export function queryGoodsLabel(params) {
    return get("/goods/queryGoodsLabel", params);
}

// Replace the occupied position
export function switchLabel(params) {
    return post("/goods/switchLabel", params); }}Copy the code

import { queryGoodsLabel, switchLabel } from '@/services/getData.js'
export default {
        data() {
            return{}},methods: {
            changePlace(row) {
                this.params = {
                    id: row.id,
                    customsListNumber: row.customsListNumber,
                }

                // Find the occupied location of the goods
                queryGoodsLabel(this.params).then(res= > {
                    this.$refs.positionDialog.refill(res.data.split(","), true);
                }).catch(err= > {

                })
            },
            change(data) {
                this.params.labels = data.join(', ')

                // Replace the occupied position
                switchLabel(this.params).then(res= > {
                    this.$Message.success('Position changed successfully')
                }).catch(err= > {
                    this.$Message.error(err)
                })
            }
        },
    }Copy the code