• 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" ,这样可以实现每次提交代码之前自动进行代码检测校验。

  • 相关阅读:
    四轴PID思路整理
    STM32输入捕获TIM2四通道
    四轴和遥控器的对应
    四层板学习(二)
    四层板学习(一)布线前的准备
    冲突的处理方法
    散列表
    重设置电脑时间
    深圳销量统计源码分析
    源码分析
  • 原文地址:https://www.cnblogs.com/bien94/p/12591427.html
Copyright © 2020-2023  润新知