Using these allows you to develop quickly

Don’t let your limits become your limits

This article focuses on the following, and will try to make it clearer by using short examples. Less installation use, injection of less global module; Mixins distribute reusable functionality in Vue components; Axios encapsulation for modular request interface; Vue-router Lazy loading and route blocking; Filter Format text.

• Use less precompiled language instead of traditional CSS
• Mixin injection is used
• Axios encapsulation
• Vue-router Lazy loading and route blocking
• The filter filter

bugfix:

• Fixed an exception in webpack.config.js with environment parameters exported from loadenv.js.
• 🐛: Fixes configuration errors caused by ESLint error messages@babel/plugin-syntax-dynamic-import

Less

Less is a pre-compiled language for CSS extensions that need to be compiled into traditional CSS without plug-ins. It can use variables, constants, nesting, mixing, and functions to write CSS more efficiently and flexibly. Some plug-ins automatically add the CSS prefix when compiling LESS.

Install the less

npm i less less-loader style-resources-loader -D
Copy the code

Style-resources-loader is a CSS processor resource loader for Webpack that injects multiple imported modules into your style resources (for example). Such as Variables, MixinSCSS, Sass, SCSS, less, stylus.

SRC create folder less, and then create common.less file, which contains global less styles such as colors, names, and so on. Example:

@info: #2d8cf0;
@success: #19be6b;
@warning: #ff9900;
@error: #ed4014;
Copy the code

Webpack. Config. Js in the configuration

// webpack.config.js
module.exports = {
...
  module: {
    rules: [{test: /\.less$/,
        use: [
          'style-loader'.'css-loader'.'less-loader', {
            loader: 'style-resources-loader'.options: {
              patterns: [resolve('src/less/common.less']}}]}... ] }};Copy the code

Once you’ve configured these, you can use less.

Less use of

The code in main.vue is as follows:

<template>
  <div class="main">main
    <div class="info">info</div>
    <div class="success">success</div>
    <div class="warning">warning</div>
    <div class="error">error</div>
  </div>
</template>.<style lang="less" scoped>
.main {
  .info {
    color: @info;
  }
  .success {
    color: @success;
  }
  .warning {
    color: @warning;
  }
  .error {
    color: @error; }}</style>
Copy the code

mixin

Cn.vuejs.org/v2/guide/mi…

Mixins provide a very flexible way to distribute reusable functionality in Vue components. A mixin object can contain any component option. When a component uses mixin, all mixin options are “blended” into the component’s own options.

For an example, see the Mixin switch page in Axios to cancel interface requests

axios

I already mentioned axios in the first article “Build Vue bucket”. In main.js, AXIos is mounted in the prototype of Vue object. It is not elegant to use axios directly, and if you use it in a project, you will definitely need to determine the return of multiple data states. It would be redundant to use them all directly in this.$HTTP.

Axios encapsulation

SRC directory utils, create request.js file.

import axios from 'axios';

/ * * * process. The env. APP_BASEURL environment parameters, automatically using corresponding environmental parameters in different environment * timeout: the default timeout 7 seconds * for more information see: https://www.npmjs.com/package/axios * /
const request = axios.create({
  baseURL: process.env.APP_BASEURL,
  timeout: 7000
  // headers: {
  // common: {
  // 'Authorization': 123
  / /}
  // }
});

// Request interception
request.interceptors.request.use(
  config= > {
    // Parameter format conversion during post request
    if (config.method === 'post' || config.method === 'POST') {
      config.data = qs.stringify(config.data);
    }

    // config is something to send the request with, such as data
    return config;
  },
  error= > {
    Promise.reject(error); }); request.interceptors.response.use(response= > {
    // Handle the HTTP status code, as well as the status value returned by the back-end interface
    // const { status, data } = response;
    // if (status === 200) {
    // return data;
    // } else {
    // window.alert(status);
    // }
    const data = response.data;
    return data;
  },
  error= > {
    // Request processing error
    if (error.name === 'Error') {
      // window.alert(error.message);
    }
    // return error;});export default request;
Copy the code

Axios use

SRC directory to create folder API, this file only need to request interface, such as I need to request the data interface /getData.

Modify the env. Development APP_BASEURL, if without the HTTP | HTTPS, axios will default character think this is the url of the pathname

APP_BASEURL="http://dev/" APP_TEXT=" development test text "NODE_ENV="development"Copy the code

import request from '@/utils/request';

If you want to request a URL that is not BASE_URL, such as a new URL: https://v1.hitokoto.cn, you can simply reset the URL in data to replace the original url@param {Object} data* /
export const getData = data= >
  request({
    url: '/getData'.method: 'GET'. data });Copy the code

Then use:

import { getData } from '@/api/account/index';

export default {
  created(){...// Use method 1
    getData().then(res= > {
      console.log('Promise then', res);
    }).catch(err= > {
      console.log('Promise catch error', err);
    });

    // Use method 2
    this.getReqData();
  },
  methods: {
    / / async asynchronous
    async getReqData() {
      // Reset replaces the original link
      const data = await getData({
        baseURL: 'https://v1.hitokoto.cn'.url: ' '
      });
      console.log('async async fetch ', data); }}};Copy the code

Network error because http://dev/ does not exist. Shown below

The Mixin switch page of Axios cancels the interface request

Note: Some business scenarios cancel the Axios request after switching pages to prevent a message indicating the previous request (or the previous request) from appearing on the new page. Refer to big guy’s mixin way to cancel.

/ * * *@name cancelRequestMixin.js
 * @url https://juejin.cn/post/6844904023191977998
 * @description Cancel the interface call */ after switching pages

import axios from 'axios';

const CancelToken = axios.CancelToken;

const cancelRequestMixin = {
  data() {
    return {
      axiosCancelToken: null./ / cancelToken instance
      axiosCancel: null / / cancel method
    };
  },
  created() {
    // Initialize an axiosCancelToken instance and register the axiosCancel method
    this.axiosCancelToken = new CancelToken(c= > {
      this.axiosCancel = c;
    });
  },
  beforeDestroy() {
    // The component destruction phase calls the axiosCancel method to cancel the request
    this.axiosCancel('Cancel request'); }};export default cancelRequestMixin;
Copy the code

Vue-router Indicates lazy route loading and route blocking

Vue-router Indicates lazy route loading

JavaScript packages can become very large when packaged to build applications, affecting page loads. It would be much more efficient if we could split the components corresponding to different routes into different code blocks and then load the components only when the routes are accessed.

🐛 : Updates

Parsing error: Unexpected Token importesLint Error Parsing error: Unexpected token importesLint error Parsing error: Unexpected token importesLint

npm i babel-eslint -D
Copy the code

Then configure it in.eslintrc.js:

module.exports = {
...
  parserOptions: {
+ parser: 'babel-eslint',
    ecmaVersion: 2018,
    sourceType: 'module'
  }
...
}
Copy the code

Lazy loading use

component: () => import(/webpackChunkName:’name’/’@/views/name.vue’)

Router /index.js file changes:

import Vue from 'vue';
import VueRouter from 'vue-router';
import main from '@/views/main.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/'.name: 'main'.component: main
  },
  {
    path: '/auth'.name: 'auth'.meta: {
      // The auth field indicates that permission is required to enter
      auth: true
    },
    component: () = > import(/*webpackChunkName:'auth'*/'@/views/auth.vue')}, {// as a display page after interception
    path: '/ 403'.name: '403'.// Here import esLint keeps reporting errors, anyone wondering why?
    component: () = > import(/*webpackChunkName:'403'*/'@/views/403.vue')}, {// All non-existent routes are redirected to 404
    path: The '*'.name: '404'.component: () = > import(/*webpackChunkName:'404'*/'@/views/404.vue')}];const router = new VueRouter({
  routes
});

export default router;
Copy the code

Routing to intercept

Add 3 pages auth.vue, 403.vue, 404.vue, the content is customized, used to show the example of route interception.

• auth.vueThe page displays the content that requires permissions
• 403.vueMessage no permission

Modify the main js.

. router.beforeEach((to, from, next) = > {
  if (to.meta.auth) {
    if (!localStorage.getItem('token')) {
      router.push('/ 403');
    } else{ next(); }}else{ next(); }}); .Copy the code

If you want to enter auth, you will not be able to enter the 403 page. You need to add token: value to localStorage.

filter

Cn.vuejs.org/v2/guide/fi…

Vue.js allows you to customize filters that can be used for some common text formatting. Filters can be used in two places: double curly brace interpolation and v-bind expressions (the latter supported as of 2.1.0+). Filters should be added to the end of JavaScript expressions, indicated by the “pipe” symbol.

<! -- In double braces -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
Copy the code

createfilter.jsfile

This is an example of a formatted function

// Time formatting
const dateFormatter = (formatter, date) = > {
  date = date ? new Date(date) : new Date(a);const Y = date.getFullYear() + ' ';
  const M = date.getMonth() + 1;
  const D = date.getDate();
  const H = date.getHours();
  const m = date.getMinutes();
  const s = date.getSeconds();
  return formatter
    .replace(/YYYY|yyyy/g, Y)
    .replace(/YY|yy/g, Y.substr(2.2))
    .replace(/MM/g, (M < 10 ? '0' : ' ') + M)
    .replace(/DD/g, (D < 10 ? '0' : ' ') + D)
    .replace(/HH|hh/g, (H < 10 ? '0' : ' ') + H)
    .replace(/mm/g, (m < 10 ? '0' : ' ') + m)
    .replace(/ss/g, (s < 10 ? '0' : ' ') + s);
};
// Easy to expand
export { dateFormatter }
Copy the code

Define global filters and use them

The main. Js modified:

.import * as filters from './filter';

Object.keys(filters).forEach(key= >{ Vue.filter(key, filters[key]); }); .Copy the code

Use in code

<template>
  <div>
    <p>Pages that need to be blocked</p>
    <div class="money">{{ date | dateFormatter('YYYY-MM-DD')}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: new Date()}}}</script>
Copy the code

Here is the end of the article, vUE project construction will be uploaded to GitHub, need friends can pull, the following article will be based on this. Feel free to leave a comment in the comments section if there are improvements to be made or if you have better suggestions (pretend to be read by many people).

Github Repository: github.com/heiyehk/web… Code branches at: /tree/dev/20200624-Somefeatures