Vue basic project configuration

First, the use Vuejs building project requires some basic configuration, so make the programming process more with less

1, first download nodejs, then use nodejs use NPM command to download more than VueCli3.0 Vue scaffolding. By scaffolding can create a project using Vue ui graphical interface, you can use vue create xxx to use the command line to create the project.

2, the most important option when creating the project is to use the best configuration files each profile separately, do not focus on <vue.confing.js>.

3, created after completion of the project npm run serve to start the project.

4, in the project directory open a new command prompt to install the plug-in and a variety of loader Vue.

Second, various loader, loader does not know of your own Google

1, file-loader, this package must be installed such that he can load svg, image and other files directly installed without configuration, installation command npm install file-loader -D

2, svg-sprite-loader, this package for efficient use icon icon, the need to configure, install command npm install svg-sprite-loader -D, first in a new configuration file in the root directory vue.config.js. Then configure the following:

const path = require("path");

 chainWebpack: config => {
    config.module
      .rule("svg")
      .exclude.add(path.resolve("./src/icons"))
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(path.resolve("./src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      })
      .end();
  }

3, normalize.css, eliminate the default value for each browser npm install normalize.css mounted directly in the import introduced to main.js

4, js-cookie, simply use a cookie, the cookie provides operating various operations directly using npm install js-cookie

5, autoprefixer to each different browser to add a prefix to apply different rules to some css browser, change the configuration in <.browserslistrc> configuration file, refer to the specific configuration github.

6, sometimes more deep nested path looks muddled. Alias ​​file path can be configured, so it looks concise, detailed configuration disposed <vue.config.js> and then simply use the time line so used, for example: import api from "api / login"

 const path = require("path");
 configureWebpack: {
    resolve: {
      alias: {
        view: path.resolve("./src/views"),
        comp: path.resolve("./src/components"),
        api: path.resolve("./src/api"),
        layer: path.resolve("./src/layers"),
        icon: path.resolve("./src/icons")
      }
    }
  }

 

7, after completing the configuration webpack vue inspect --rule xxx can be used to check the configuration is correct, then restart the project properly configured

Third, the configuration ESlint, can automatically correct the problem after configured to write the code for looking beautiful

1, when creating vue projects need to choose whether to use Eslint to correct coding errors, be sure to select the correct save. Of course, the latter can also be changed in the configuration file

2, when creating vue project also choose to use the correct template Eslin, it is recommended to use <prettier>, if not you can use npm install prettier -D

3, mounting eslint-plugin-html no configuration, npm install eslint-plugin-html -D

4. File -> Preferences -> Configuration -> Plugins, find Eslint, the upper right corner to open the configuration (json), configure the following code:

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        {"language": "vue","autoFix": true}
    ],
    "eslint.options": {
        "plugins":["html","vue"]
    },
    "files.autoSave": "off",
    "extensions.autoUpdate": false,
    "eslint.autoFixOnSave": true,
    "eslint.alwaysShowStatus": true,
    "eslint.lintTask.enable": true,
    "eslint.experimental.incrementalSync": true,
    "editor.tabSize": 2,

5, the <.eslintrc.js> are configured as follows:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};