• NuxtJS项目——开发工具


      一、端对端测试

      ava 是一个很强大的 JavaScript 测试框架,结合 jsdom,可以轻松地给 nuxt 应用进行端对端测试。需要三步骤就可以完成端对端测试:

      (1)添加 ava 和 jsdom 作为项目的开发依赖:npm install --save-dev ava jsdom

      (2)在 package.json 中添加测试脚本,并配置 ava 需要编译待测试的文件。

      (3)在 test 目录下编写单元测试的逻辑代码。

      实际上 jsdom 会有一定的限制性,因为它背后并没有使用任何的浏览器引擎,但是也能涵盖大部分关于 dom元素的测试了。 如果想使用真实的浏览器引擎来测试你的应用,可以参考Nightwatch.js

      二、代码规范

      ESLint 是一个很棒的工具,帮助我们提升代码的规范和质量。需要四步完成该工具的应用:

      (1)安装ESLint

      通过如下命令可以完成对ESLint的一系列依赖包的安装:

      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)配置 ESLint

      在项目根目录下创建 .eslintrc.js 文件用于配置 ESLint,示例如下:

    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'
      ],
      // 自定义规则
      rules: {
        'semi': [2, 'never'],
        'no-console': 'off',
        'vue/max-attributes-per-line': 'off',
        'prettier/prettier': ['error', { 'semi': false }]
      }
    }

      (3)添加命令

      在 package.json 文件中添加一个 lint和 lintfix脚本命令,如下文所示:

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

      ESLint将检测校验所有JavaScript和Vue文件,同时忽略.gitignore中定义的被忽略文件。

      (4)启动命令

    • npm run lint:检查错误
    • npm run lintfix:修复那些可修复的

      建议通过webpack启用ESLint热更新模式。这样ESLint将在npm run dev时保存,可以在nuxt.config.js文件进行配置:

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

      在 package.json 中增加 "precommit": "npm run lint" ,这样可以实现每次提交代码之前自动进行代码检测校验。

  • 相关阅读:
    链表--判断一个链表是否为回文结构
    矩阵--“之”字形打印矩阵
    二叉树——平衡二叉树,二叉搜索树,完全二叉树
    链表--反转单向和双向链表
    codeforces 490C. Hacking Cypher 解题报告
    codeforces 490B.Queue 解题报告
    BestCoder19 1001.Alexandra and Prime Numbers(hdu 5108) 解题报告
    codeforces 488A. Giga Tower 解题报告
    codeforces 489C.Given Length and Sum of Digits... 解题报告
    codeforces 489B. BerSU Ball 解题报告
  • 原文地址:https://www.cnblogs.com/bien94/p/12591427.html
Copyright © 2020-2023  润新知