Some conclusions of vue

1. Preparation of software

First, install some plug-ins after downloading from the official website:

Then, some basic configurations can be made based on the Beautify plug-in:

Step 1: click Settings

Step 2: find the setting of beauty


Step 3: open setting json


Step 4: add custom code

My is as follows:


//Resolving Vue line breaks

    "vetur.format.defaultFormatter.html": "js-beautify-html",

    "vetur.format.defaultFormatter.js": "vscode-typescript",

    "vetur.format.defaultFormatterOptions": {

        "js-beautify-html": {

            "wrap_attributes": "auto"


        "prettyhtml": {

            "printWidth": 100,

            "singleQuote": false,

            "wrapAttributes": false,

            "sortAttributes": false




Settings based on koroFileHeader plug-in:

"fileheader.cursorMode": {

        "Description": "",

        "Version": "1.0",

        "Autor": "pmy",

        "Date": "Do not edit",

        "LastEditors": "pmy",

        "LastEditTime": "Do not edit"


At this point, the foundation of the software is almost finished and the vue project can be started;

2. Construction of the project

Others wrote very well. Give yourself a link to this place:

3. Some problems that may be encountered in Vue project development

(1) On the eckharts problem

First, the problem of graph reduction becomes 100px in width and height (the solution is that the external dom disappears)

For example, if display is used to display and hide, and echart loads the dom first, but cannot obtain the width of the dom, this problem will be caused. If v-if is used to control the display and hide, the dom can be destroyed to solve this problem

(2) About flv.js

Others write well:

(3) On rem compatible resolution

First of all, make it clear that Firefox can support fonts below 12px. chome and ie11360 can only support 12px. This is the biggest problem

The configuration is very simple, direct Vue config. JS configuration is OK:

css: {
        loaderOptions: {
            postcss: {
                plugins: [
                        remUnit: 10
                    }), // Base of conversion

Then configure yourself to generate a rem.js file, and then in main JS to call the method:

The code snippet of rem.js is as follows:

export function setRemInit() {
    // Content of postcss-px2rem
    // Base size
    const baseSize = 10;
    // Set rem function
    function setRem() {
        // The scale of the current page width relative to 1920 PX (design draft size) can be modified according to your needs.
        const scale = document.documentElement.clientWidth / 1920;
        // Set the font size of the page root node = `${baseSize * scale}px`;

        let baseNumber = 10;
        // This if statement code is used to the minimum font size of the screen. It does not need to be written
        if (Number(, -2)) <= baseNumber) {
   = baseNumber + 'px';

    // initialization
    // Reset rem when changing window size
    // window.addEventListener('resize', setRem);

(4) About the use of Gaode map

At that time, another article on mosquito nets will be published. It's too tired to put a mosquito net to fight mosquitoes.

(5) About element UI

Are you hungry ui? Take another coat of arms. The coat of arms is not easy to cultivate, and there are still a lot of them.

(6) page automatically calls component methods

As we all know, every time you write a call, it's a headache, so you should use the lazy way to let him move himself:


var comObj = {};
// Introduce all required dynamic components
const requireComponent = require.context(
  "@/components/views", //Relative path to the directory where the component is located
  true, //Query its subdirectories
  /\w+\.vue$/ //A regular expression that matches the file name of the underlying component
requireComponent.keys().forEach(fileName => {
  // Get file name
  var names = fileName
    .replace(/\.\w+$/, "");
  // Get component configuration
  const componentConfig = requireComponent(fileName);
  // If the component is exported through "export default", use ". Default first, otherwise return to the root of the module
  comObj[names] = componentConfig.default || componentConfig;
const requireComponent2 = require.context(
  "@/components/common", //Relative path to the directory where the component is located
  false, //Query its subdirectories
  /\w+\.vue$/ //A regular expression that matches the file name of the underlying component

(7) header history menu bar and cache problem

After clicking the menu bar, keep the history page or close it. The effect is as follows:


It mainly uses the keepalive component to retain the page:

As for the head, this component El tabs is used:

  <el-tabs v-model="editableTabsValue" type="card" :closable="editableTabs.length>1" @tab-remove="removeTab" class="myElTab" @tab-click="handleClick" v-show="editableTabs.length>0">
      <el-tab-pane v-for="item in editableTabs" :key="" :label="item.title" :name="">

The implementation mechanism is to pass values to the store, respectively the currently clicked history menu bar List and the currently active menu bar activeMenu. The latter is used to jump to the page and the former is used for recording.

The removal method is as follows:

removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if ( === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName =;
      //Remove clicked menu
      this.editableTabs = tabs.filter(tab => !== targetName);
      this.$store.dispatch("updateActiveMenuList", this.editableTabs);
      //After deletion, highlight the last one by default
      this.editableTabsValue = this.editableTabs[this.editableTabs.length - 1].name;
      this.$store.dispatch("updateActiveMenu", this.editableTabsValue);

Add the following methods:

addTab(targetName) {
      //Set highlight tab
      this.editableTabsValue = this.activeMenu;
      //Loop to find the English corresponding Chinese name
      let tabName = "";
      GlobalSetting.MenuList.forEach(v => {
        v.children.forEach(vv => {
          if (vv.index == targetName)
            tabName =
      //Judge whether it already exists in the menu list. If it already exists, it will not be added
      let flag = this.editableTabs.some(function (v) {
        return == targetName
      if (!flag) {
          title: tabName,
          name: targetName,
          content: targetName
        this.$store.dispatch("updateActiveMenuList", this.editableTabs);

That's it

Keywords: Vue

Added by Chadian22 on Mon, 27 Dec 2021 07:07:47 +0200