Build a background management system framework based on VUE-CLI3

node -vCopy the code

NPM cache clean -f then install the NPM module: NPM install -g n Upgrade Node. js to the latest stable version: n stable If it is a MAC, add sudo in front of the command: sudo n stableCopy the code

npm uninstall vue-cli -gCopy the code

Vue - cli3 / / installation
npm install -g @vue/cli 

// Check the version number after installationVue -v or vue --versionCopy the code

vue create project // project is the name of the projectCopy the code

npm run serveCopy the code

// vue.config.js
const path = require('path');

function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    // The base URL for deploying the application package, which defaults to '/'
    // If your application will be deployed at the root of the domain name, for example, https://www.vue-cli.com/, set it to "/".
    // If your application is deployed under a subpath, then you need to specify the subpath here. For example, if you are deployed at https://www.my-vue.com/my-app/; So change this value to "/my-app/"
    publicPath: "/".Directory of the production environment build files generated when vue-cli-service build is run. Note that the target directory is cleared before building (passing --no-clean at build time turns this behavior off).
    outputDir: "dist".// The directory where static resources (js, CSS, img, fonts) are generated.
    assetsDir: "".// Specify the output path of the generated index.html
    indexPath: "index.html".// By default, generated static resources include hash in their file names for better cache control. However, this also requires that the HTML for index be automatically generated by the Vue CLI. If you cannot use index HTML generated by the Vue CLI, you can turn off file name hashing by setting this option to false
    filenameHashing: true.// Build multi-page application, page configuration
    pages: {
        index: {
            // Page entry
            entry: 'src/main.js'.// Template source
            template: 'public/index.html'.// Output in dist/index.html
            filename: 'index.html'.// When using the title option,
            / / title of the template tag needs to be < title > < % = htmlWebpackPlugin. Options. The title % > < / title >
            title: 'Index Page'.// The blocks contained in this page are contained by default
            // The extracted generic chunk and Vendor chunk.
            chunks: ['chunk-vendors'.'chunk-common'.'index']},// When using the entry only string format,
        // The template will be derived to 'public/subpage.html'
        // And if it can't be found, go back to 'public/index.html'.
        // The output file name is derived to 'subpage.html'.
        // subpage: 'src/subpage/main.js'
    },

    // Whether to use eslint-loader in the development environment to save lint code each time. This value will take effect after @vue/cli-plugin-eslint is installed.
    // When set to true, eslint-loader prints lint errors as compilation warnings. By default, warnings are only printed to the command line and do not cause compilations to fail.
    // If you want Lint errors to appear directly in the browser at development time, you can use lintOnSave: 'error'. This forces eslint-Loader to print Lint errors as compilation errors, which also means that lint errors will cause compilation to fail.
    lintOnSave: false.// Whether to use the Vue build with the runtime compiler. Setting this to true allows you to use the template option in Vue components, but this will add an extra 10KB or so to your application.
    runtimeCompiler: false.// By default babel-loader ignores all files in node_modules. If you want to explicitly translate a dependency through Babel, you can list it in this option.
    transpileDependencies: [],

    // If you don't need the source map for production, set it to false to speed up production builds.
    productionSourceMap: true.// is a function that takes a Webpack-chainableconFig instance. Allows for more fine-grained changes to the internal WebPack configuration.
    chainWebpack: (config) = > {
        // Configure the alias
        config.resolve.alias
            .set(The '@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('components', resolve('src/components'))
            .set('router', resolve('src/router'))
            .set('utils', resolve('src/utils'))
            .set('store', resolve('src/store'))
            .set('views', resolve('src/views'))},// Whether thread-loader is used for Babel or TypeScript. This option is automatically enabled when the system CPU has more than one kernel and only applies to production builds.
    parallel: require("os").cpus().length > 1.// Pass options to the PWA plug-in.
    // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},

    // All webpack-dev-server options are supported. Note: some values like host, port, and HTTPS may be overridden by command line arguments.
    // Some values like publicPath and historyApiFallback should not be modified because they need to be synchronized with the publicPath of the development server to work properly.
    // Proxy configuration
    devServer: {
        host: "0.0.0.0".port: 8080./ / the port number
        https: false.// https:{type:Boolean}
        open: true.// Configure automatic startup browser Open: 'Google Chrome'- default startup for Google

        // Configure a single agent
        // proxy: 'http://localhost:9000' 

        // Configure multiple agents
        proxy: {
            "/api": {
                // target: "https://127.0.0.0:8080", // target host
                target: "https://mock.yonyoucloud.com/mock/5708".ws: true.// Proxy WebSockets
                changeOrigin: true.// Allow WebSockets across domains
                pathRewrite: {
                    "^/api": ""}}}},// Third-party plug-in options
    // This is an object that does not perform any schema validation, so it can be used to pass any third-party plug-in options.
    pluginOptions: {
        foo: {
            / / the plugin can be used as a ` options. PluginOptions. Foo ` access these options.}},// Sometimes you want to pass options to the webpack preprocessor loader. You can use the css.loaderoptions option in vue.config.js. For example, you can pass shared global variables to all Sass/Less styles like this
    css: {
        loaderOptions: {
            // Pass options to sas-loader
            sass: {
                prependData: ` @import "@/assets/css/common.scss"; @import "@/assets/css/mixin.scss"; @import "@/assets/css/reset.scss"; @import "@/assets/css/var.scss"; `}}}};Copy the code

Common. SCSS mainly stores common styles mixin. SCSS mainly stores mixed styles reset. SCSS mainly stores reset styles.varSCSS mainly stores variablesCopy the code

module.exports = {
    css: {
        loaderOptions: {
            // Pass options to sas-loader
            sass: {
                prependData: ` @import "@/assets/css/common.scss"; @import "@/assets/css/mixin.scss"; @import "@/assets/css/reset.scss"; @import "@/assets/css/var.scss"; `}}}},Copy the code

NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = 'Local Development API Address'Copy the code

NODE_ENV = 'test'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_BASEURL = 'Test environment API Address'Copy the code

NODE_ENV = 'pre-release'
VUE_APP_CURRENTMODE = 'pre'
VUE_APP_BASEURL = 'Pre-release environment API address'Copy the code

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURL = 'Official Environment API Address'Copy the code

    "scripts": {
        "dev": "vue-cli-service serve"."build:test": "vue-cli-service build --mode test"."build:per": "vue-cli-service build --mode pre-release"."build:prod": "vue-cli-service build --mode production"."build": "vue-cli-service build"."lint": "vue-cli-service lint"
    },Copy the code

// vue.config.js
console.log(process.env.NODE_ENV); // development (output in terminal)Copy the code

"scripts": {
"dev": "vue-cli-service serve --mode test",}// --mode test changes the mode configuration item in Webpack 4 to test, and it reads the configuration in the corresponding.env.[model] file
// If no configuration file is found, the default environment development is used
// Also vue-cli-service build uses the default production environmentCopy the code

npm install iview -SCopy the code

npm install axios --save-devCopy the code

import axios from "axios";
import { Message } from "iview";
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["Authorization"] = window.localStorage.getItem('token')?window.localStorage.getItem('token') : "";
  return request;
});

// Login expired (the token is invalid) The login page is displayed
axios.interceptors.response.use(response= > {
  let data = response.data;
  if (
    data.state && [401].includes(data.state.code)
  ) {
    router.then(lib= > {
      if (lib.default.currentRoute.name === "login") return;
      lib.default.push({
        name: "login"
      })
      Message.warning(data.state.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.state && data.state.code === 200) {
      return Promise.resolve({
        data: data.data,
        msg: data.state.msg,
        code: data.state.code,
        page: data.page
      });
    }
    return Promise.reject(
      data.state &&
      data.state.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.state &&
    err.response.data.state.msg ||
    "Network error"
  );
})

// 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()
  })
})

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 "./axios";

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

// Obtain user information (unified authentication login user)
export function getLoginInfo() {
    return get("/oauth/getLoginInfo");
}

/ / login
export function login(params) {
    return post("/oauth/login", params);
}

/ / exit
export function logout(params) {
    return get("/oauth/logout", params);
}Copy the code

import { login } from "@/api/getData.js";
export default {
  data() {
    return {
      userName: ' '.password: ' '
    };
  },
  methods: {
    async login() {
      try {
        this.loading = true;
        let { msg } = await login({
          userName: this.userName,
          userPwd: this.password
        });
        this.$Message.success(msg);
        this.$router.push({ name: "loginPage" });
      } catch (e) {
        this.$Message.warning(e);
      } finally {
        this.loading = false; }}}};Copy the code