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

上一篇:Windows上设置Sass


下一篇:nuxtjs开发的ssr网站,如何在后退时返回到上次滚动位置