NuxtJS Project - Development Tools

　　First, end to end test

　　ava JavaScript is a very powerful testing framework, combined jsdom, can easily give nuxt applications end to end testing. You take three steps to complete end to end test:

　　(1) adding ava and jsdom as a development-dependent projects: npm install --save-dev ava jsdom

　　(2) the package.json added test scripts, and configure ava file needs to be compiled to be tested.

　　(3) in the test code the logic unit tests directory.

　　In fact jsdom there will be some restriction, because it does not use any behind the browser engine, but also covers most of the testing on the dom elements. If you want to use a real browser engine to test your application, you can refer Nightwatch.js .

　　Second, the code specification

　　ESLint is a great tool to help us improve the standards and quality of the code. Four steps required to complete the application of the tool:

　　(1) Installation ESLint

　　ESLint can complete the installation of a series of dependencies by the following command:

　　npm install --save-dev babel-eslint eslint eslint-config-standard eslint-plugin-html eslint-plugin-promise eslint-plugin-standard eslint-plugin-import eslint-plugin-node

　　(2) Configuration ESLint

　　Created in the root directory of the project .eslintrc.js file is used to configure ESLint, examples are as follows:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    'eslint:recommended',
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/recommended',
    'plugin:prettier/recommended'
  ],
  // 校验 .vue 文件
  plugins: [
    'VUE' 
  ], 
  // custom rules 
  the rules: {
     'SEMI': [2, 'Never' ],
     'NO-Console': 'OFF' ,
     'VUE / max-Attributes-per-Line': 'OFF' ,
     'prettier / prettier': [ 'error', { 'SEMI': to false }] 
  } 
}

　　(3) Add command

　　In package.json adding a file lintand lintfixscript command, as shown below:

"scripts": {
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}

　　ESLint will detect and verify that all JavaScript files Vue, while ignoring .gitignoreignored defined in the file.

　　(4) Start command

npm run lint: check error
npm run lintfix: repair those repairable

　　It recommends enabling ESLint hot update mode webpack. Such ESLint will npm run devsave time, can be configured in nuxt.config.js file:

  /*
   ** Build configuration
  */
  build: {
   /*
    ** 您可以在这里扩展webpack配置
   */
   extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/
        })
      }
    }
  }

　　In package.json increased "precommit": "npm run lint" , which allows for automatic detection code before each submitted check code.

NuxtJS Project - Development Tools

Guess you like