Блог

Я хочу создать простое веб-приложение с использованием фреймворка quasar. для проверки входных данных формы я планирую использовать vuelidate и vuelidate-Экстрактор ошибок. поэтому я установил эти пакеты и создал загрузочный файл с помощью quasar CLI «vuelidate-error-extractor». а также и добавьте это имя файла в плагин в конфигурации quasar

но при инициализации vuelidate-Экстрактора ошибок возникает проблема. может кто-нибудь помочь мне это исправить

это ошибка, которую я получил при попытке настроить это

это загрузочный файл

 import { boot } from 'quasar/wrappers' import Vuelidate from 'vuelidate' import VuelidateErrorExtractor, { templates } from "vuelidate-error-extractor";  const messages = {  required: '{attribute} is required.',  requiredCustom: '{attribute} is required.',  min: "Field {attribute} should be exceeded 5 characters",  onlynumbers: '{attribute} should be numbers.',  maxLength: '{attribute} should be less than {max} characters.', };      // "async" is optional; // more info on params: https://v2.quasar.dev/quasar-cli/boot-files export default boot( ({app,Vue}/* { app, router, ... } */) =gt; {  // something to do  app.use(Vuelidate)  app.use(VuelidateErrorExtractor, {  messages,  attributes: {  name: "Name",  email: "Email",  text: "Text"  }  });   app.component("formWrapper", templates.FormWrapper); })  

конфигурация квазара

 /*  * This file runs in a Node context (it's NOT transpiled by Babel), so use only  * the ES6 features that are supported by your Node version. https://node.green/  */  // Configuration for your app // https://quasar.dev/quasar-cli/quasar-conf-js  const { configure } = require('quasar/wrappers');  module.exports = configure(function (ctx) {  return {  // https://quasar.dev/quasar-cli/supporting-ts  supportTS: false,   // https://quasar.dev/quasar-cli/prefetch-feature  // preFetch: true,   // app boot file (/src/boot)  // --gt; boot files are part of "main.js"  // https://quasar.dev/quasar-cli/boot-files  boot: [  'i18n',  'axios',  'vuelidate'  ],   // https://quasar.dev/quasar-cli/quasar-conf-js#Property:-css  css: [  'app.css'  ],   // https://github.com/quasarframework/quasar/tree/dev/extras  extras: [  // 'ionicons-v4',  // 'mdi-v5',  // 'fontawesome-v5',  // 'eva-icons',  // 'themify',  // 'line-awesome',  // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!   'roboto-font', // optional, you are not bound to it  'material-icons', // optional, you are not bound to it  ],   // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property:-build  build: {  vueRouterMode: 'hash', // available values: 'hash', 'history'   // transpile: false,  // publicPath: '/',   // Add dependencies for transpiling with Babel (Array of string/regex)  // (from node_modules, which are by default not transpiled).  // Applies only if "transpile" is set to true.  // transpileDependencies: [],   // rtl: true, // https://quasar.dev/options/rtl-support  // preloadChunks: true,  // showProgress: false,  // gzip: true,  // analyze: true,   // Options below are automatically set depending on the env, set them if you want to override  // extractCSS: false,   // https://quasar.dev/quasar-cli/handling-webpack  // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain  chainWebpack (/* chain */) {  //  },  },   // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property:-devServer  devServer: {  server: {  type: 'http'  },  port: 8080,  open: true // opens browser window automatically  },   // https://quasar.dev/quasar-cli/quasar-conf-js#Property:-framework  framework: {  config: {},   // iconSet: 'material-icons', // Quasar icon set  // lang: 'en-US', // Quasar language pack   // For special cases outside of where the auto-import strategy can have an impact  // (like functional components as one of the examples),  // you can manually specify Quasar components/directives to be available everywhere:  //  // components: [],  // directives: [],   // Quasar plugins  plugins: []  },   // animations: 'all', // --- includes all animations  // https://quasar.dev/options/animations  animations: [],   // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr  ssr: {  pwa: false,   // manualStoreHydration: true,  // manualPostHydrationTrigger: true,   prodPort: 3000, // The default port that the production server should use  // (gets superseded if process.env.PORT is specified at runtime)   maxAge: 1000 * 60 * 60 * 24 * 30,  // Tell browser when a file from the server should expire from cache (in ms)   chainWebpackWebserver (/* chain */) {  //  },   middlewares: [  ctx.prod ? 'compression' : '',  'render' // keep this as last one  ]  },   // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa  pwa: {  workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'  workboxOptions: {}, // only for GenerateSW   // for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])  // if using workbox in InjectManifest mode  chainWebpackCustomSW (/* chain */) {  //  },   manifest: {  name: `wedeliver`,  short_name: `wedeliver`,  description: `A Quasar Framework app`,  display: 'standalone',  orientation: 'portrait',  background_color: '#ffffff',  theme_color: '#027be3',  icons: [  {  src: 'icons/icon-128x128.png',  sizes: '128x128',  type: 'image/png'  },  {  src: 'icons/icon-192x192.png',  sizes: '192x192',  type: 'image/png'  },  {  src: 'icons/icon-256x256.png',  sizes: '256x256',  type: 'image/png'  },  {  src: 'icons/icon-384x384.png',  sizes: '384x384',  type: 'image/png'  },  {  src: 'icons/icon-512x512.png',  sizes: '512x512',  type: 'image/png'  }  ]  }  },   // Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova  cordova: {  // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing  },   // Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor  capacitor: {  hideSplashscreen: true  },   // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron  electron: {  bundler: 'packager', // 'packager' or 'builder'   packager: {  // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options   // OS X / Mac App Store  // appBundleId: '',  // appCategoryType: '',  // osxSign: '',  // protocol: 'myapp://path',   // Windows only  // win32metadata: { ... }  },   builder: {  // https://www.electron.build/configuration/configuration   appId: 'wedelivershopapp'  },   // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain  chainWebpackMain (/* chain */) {  // do something with the Electron main process Webpack cfg  // extendWebpackMain also available besides this chainWebpackMain  },   // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain  chainWebpackPreload (/* chain */) {  // do something with the Electron main process Webpack cfg  // extendWebpackPreload also available besides this chainWebpackPreload  },  }  } });  

package.JSON file

 {  "name": "wedelivershopapp",  "version": "0.0.1",  "description": "A Quasar Framework app",  "productName": "wedeliver",  "author": "test",  "private": true,  "scripts": {  "test": "echo "No test specified" amp;amp; exit 0"  },  "dependencies": {  "@quasar/extras": "^1.0.0",  "axios": "^0.21.1",  "core-js": "^3.6.5",  "quasar": "^2.0.0",  "vue-i18n": "^9.0.0",  "vuelidate": "^0.7.7",  "vuelidate-error-extractor": "^2.4.1"  },  "devDependencies": {  "@quasar/app": "^3.0.0"  },  "browserslist": [  "last 10 Chrome versions",  "last 10 Firefox versions",  "last 4 Edge versions",  "last 7 Safari versions",  "last 8 Android versions",  "last 8 ChromeAndroid versions",  "last 8 FirefoxAndroid versions",  "last 10 iOS versions",  "last 5 Opera versions"  ],  "engines": {  "node": "gt;= 12.22.1",  "npm": "gt;= 6.13.4",  "yarn": "gt;= 1.21.1"  } }