Proyecto NuxtJS - Herramientas de desarrollo

　　En primer lugar, de extremo a extremo de prueba

　　ava JavaScript es un marco de pruebas muy potente, combinado jsdom, puede dar fácilmente nuxt aplicaciones de extremo a extremo de pruebas. Se toma tres pasos a fin completamente a prueba final:

　　(1) añadir ava y jsdom como proyectos de desarrollo dependiente: NPM instalar --save-dev ava jsdom

　　(2) los package.json scripts de prueba adicionales, y configurar ava necesidades de archivo para ser compilados para ser probado.

　　(3) en el test código el directorio pruebas de unidad lógica.

　　De hecho jsdom habrá algunas restricciones, ya que no utiliza ningún tipo detrás del motor del navegador, sino que también abarca la mayor parte de las pruebas de los elementos DOM. Si desea utilizar un motor de navegador real para probar la aplicación, puede hacer referencia Nightwatch.js .

　　En segundo lugar, la especificación de códigos

　　ESLint es una gran herramienta para ayudar a mejorar los estándares y la calidad del código. Cuatro pasos necesarios para completar la aplicación de la herramienta:

　　(1) ESLint Instalación

　　ESLint puede completar la instalación de una serie de dependencias por el comando siguiente:

　　NPM instalar --save-dev-babel eslint eslint eslint-config-estándar eslint-plugin-html eslint-plugin-promesa eslint-plugin-estándar eslint-plugin-importación eslint-plugin-nodo

　　(2) Configuración ESLint

　　Creado en el directorio raíz del proyecto .eslintrc.js de archivos se utiliza para configurar ESLint, los ejemplos son los siguientes:

module.exports = { 
  root: verdad , 
  env: { 
    navegador: verdad , 
    nodo: verdadera 
  }, 
  parserOptions: { 
    analizador: 'babel-eslint' 
  }, 
  se extiende: [
     'eslint: recomendado' ,
     // https: // github. com / vuejs / eslint-plugin-vue # prioridad-a-esencial-de prevención de errores 
    // considerar cambiar a `plugin: vue / o fuertemente recommended`` plugin: vue / recommended` normas más estrictas. 
    'plugin: vue / recomendado' ,
     'plugin: más bonita / recomienda' 
  ], 
  // 校验.vue文件
  plugins: [
    'Vue' 
  ], 
  // costumbre gobierna 
  las reglas: {
     'SEMI': [2, 'Nunca' ],
     'NO-consola': 'OFF' ,
     'VUE / max-atributos-per-Line': 'OFF' ,
     'más bonito / más bonita': [ 'error', { 'SEMI': en false }] 
  } 
}

　　(3) comando Agregar

　　En package.json la adición de un archivo linty la lintfixsecuencia de comandos, como se muestra a continuación:

"guiones" : {
   "pelusa": "eslint --ext Js, .vue .gitignore --ignore-path" ,
   "Lintfix": "eslint --fix --ext Js, .vue --ignore-ruta .gitignore." 
}

　　ESLint será detectar y verificar que todos los archivos de JavaScript Vue, sin tener en cuenta .gitignoreignorado definido en el archivo.

　　(4) el comando de arranque

NPM pelusa de ejecución: error de comprobación
NPM lintfix de ejecución: reparación de los reparables

　　Se recomienda activar el modo de actualización ESLint caliente webpack. Tal ESLint va a npm run devahorrar tiempo, se puede configurar en el archivo nuxt.config.js:

  / * 
   ** configuración de construcción 
  * / 
  construcción: { 
   / * 
    **您可以在这里扩展webpack配置
   * / 
   extender (config, CTX) { 
      // Ejecutar ESLint en Guardar 
      si (ctx.isDev && ctx.isClient) { 
        config. module.rules.push ({ 
          cumplir: "pre" , 
          prueba: /\.(js|vue)$/ , 
          loader: "eslint-loader" , 
          excluyen: / (node_modules) / 
        }) 
      } 
    } 
  }

　　En package.json aumentó "precommit": "npm run lint" , lo que permite para el código de detección automática antes de cada código de verificación presentada.

Proyecto NuxtJS - Herramientas de desarrollo

Supongo que te gusta