vue3

.eslintignore

@@ -7,3 +7,4 @@
 /public
 
 .eslintrc.js
+babel.config.js

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
   root: true,
 
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
     ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
     sourceType: 'module' // Allows for the use of imports
   },
@@ -23,9 +23,9 @@ module.exports = {
     // Uncomment any of the lines below to choose desired strictness,
     // but leave only one uncommented!
     // See https://eslint.vuejs.org/rules/#available-rules
-    'plugin:vue/essential', // Priority A: Essential (Error Prevention)
-    // 'plugin:vue/strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
-    // 'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+    'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
+    // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
+    // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
 
     // https://github.com/prettier/eslint-config-prettier#installation
     // usage with Prettier, provided by 'eslint-config-prettier'.
@@ -46,6 +46,10 @@ module.exports = {
     ga: 'readonly', // Google Analytics
     cordova: 'readonly',
     __statics: 'readonly',
+    __QUASAR_SSR__: 'readonly',
+    __QUASAR_SSR_SERVER__: 'readonly',
+    __QUASAR_SSR_CLIENT__: 'readonly',
+    __QUASAR_SSR_PWA__: 'readonly',
     process: 'readonly',
     Capacitor: 'readonly',
     chrome: 'readonly'

babel.config.js

@@ -1,5 +1,13 @@
-module.exports = {
-  presets: [
-    '@quasar/babel-preset-app'
-  ]
+module.exports = api => {
+  return {
+    presets: [
+      [
+        '@quasar/babel-preset-app',
+        api.caller(caller => caller && caller.target === 'node')
+          ? { targets: { node: 'current' } }
+          : {}
+      ]
+    ]
+  }
 }
+

jsconfig.json

@@ -24,7 +24,7 @@
         "src/boot/*"
       ],
       "vue$": [
-        "node_modules/vue/dist/vue.esm.js"
+        "node_modules/vue/dist/vue.runtime.esm-bundler.js"
       ]
     }
   },
@@ -33,4 +33,4 @@
     ".quasar",
     "node_modules"
   ]
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pic_online_front",
-  "version": "0.0.1",
+  "version": "2.0.1",
   "description": "Front for pic_online",
   "productName": "Pic Online",
   "author": "IITII <[email protected]>",
@@ -15,21 +15,23 @@
     "@quasar/extras": "^1.0.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
-    "quasar": "^1.0.0",
+    "mitt": "^3.0.0",
+    "quasar": "^2.0.0",
     "v-viewer": "^1.5.1",
     "vue-code-highlight": "^0.7.8",
-    "vue-i18n": "^8.0.0",
+    "vue-i18n": "^9.0.0-beta.0",
     "vue-video-player": "^5.0.2",
-    "vue-waterfall-easy": "^2.4.4"
+    "vue-waterfall-easy": "^2.4.4",
+    "vuex": "^4.0.1"
   },
   "devDependencies": {
-    "@quasar/app": "^2.0.0",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^7.21.0",
+    "@babel/eslint-parser": "^7.13.14",
+    "@quasar/app": "^3.0.0",
+    "eslint": "^7.14.0",
     "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-vue": "^7.7.0",
+    "eslint-plugin-vue": "^7.0.0",
     "eslint-webpack-plugin": "^2.4.0",
-    "vuejs-logger": "^1.5.5"
+    "vuejs3-logger": "^1.0.0"
   },
   "browserslist": [
     "last 10 Chrome versions",
@@ -43,7 +45,7 @@
     "last 5 Opera versions"
   ],
   "engines": {
-    "node": ">= 10.18.1",
+    "node": ">= 12.22.1",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }

quasar.conf.js

@@ -4,29 +4,31 @@
  */
 
 // Configuration for your app
-// https://v1.quasar.dev/quasar-cli/quasar-conf-js
+// https://v2.quasar.dev/quasar-cli/quasar-conf-js
+
 /* eslint-env node */
 const ESLintPlugin = require('eslint-webpack-plugin')
+const {configure} = require('quasar/wrappers')
 
-module.exports = function (/* ctx */) {
+module.exports = configure(function (ctx) {
   return {
-    // https://v1.quasar.dev/quasar-cli/supporting-ts
+    // https://v2.quasar.dev/quasar-cli/supporting-ts
     supportTS: false,
 
-    // https://v1.quasar.dev/quasar-cli/prefetch-feature
+    // https://v2.quasar.dev/quasar-cli/prefetch-feature
     // preFetch: true,
 
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
-    // https://v1.quasar.dev/quasar-cli/boot-files
+    // https://v2.quasar.dev/quasar-cli/boot-files
     boot: [
       'logger',
       'i18n',
       'axios',
       'eventBus',
     ],
 
-    // https://v1.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
+    // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
     css: [
       'app.scss'
     ],
@@ -45,9 +47,13 @@ module.exports = function (/* ctx */) {
       'material-icons', // optional, you are not bound to it
     ],
 
-    // Full list of options: https://v1.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
+    // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
     build: {
       vueRouterMode: 'hash', // available values: 'hash', 'history'
+      env: {
+        AXIOS_TIMEOUT: process.env.AXIOS_TIMEOUT,
+        AXIOS_BASE_URL: process.env.AXIOS_BASE_URL || 'http://localhost:89/',
+      },
 
       // transpile: false,
 
@@ -56,59 +62,39 @@ module.exports = function (/* ctx */) {
       // Applies only if "transpile" is set to true.
       // transpileDependencies: [],
 
-      // rtl: false, // https://v1.quasar.dev/options/rtl-support
+      // rtl: true, // https://v2.quasar.dev/options/rtl-support
       // preloadChunks: true,
       // showProgress: false,
-      showProgress: true,
-      gzip: true,
-      // sourceMap: true,
-      // minify: false,
-      sourceMap: process.env.NODE_ENV !== 'production',
-      minify: process.env.NODE_ENV === 'production',
-      publicPath: process.env.PIC_DEPLOY_DIR || '/',
-      distDir: process.env.PIC_OUTPUT_DIR || undefined,
+      // gzip: true,
       // analyze: true,
 
       // Options below are automatically set depending on the env, set them if you want to override
       // extractCSS: false,
 
-      // https://v1.quasar.dev/quasar-cli/handling-webpack
+      // https://v2.quasar.dev/quasar-cli/handling-webpack
       // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
       chainWebpack(chain) {
         chain.plugin('eslint-webpack-plugin')
           .use(ESLintPlugin, [{extensions: ['js', 'vue']}])
       },
     },
 
-    // Full list of options: https://v1.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
+    // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
     devServer: {
       https: false,
       port: 8080,
-      open: true // opens browser window automatically
+      open: false // opens browser window automatically
     },
 
-    // https://v1.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
+    // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
     framework: {
       iconSet: 'material-icons', // Quasar icon set
-      // https://quasar.dev/options/quasar-language-packs#using-quasar-language-pack-in-app-space
-      // lang: 'en-us', // Quasar language pack
-      lang: 'zh-hans', // Quasar language pack
-      config: {
-        notify: {
-          html: false,
-          position: 'top-right',
-          timeout: 2500,
-          // closeBtn: true
-          closeBtn: '×'
-        }
-      },
 
-      // Possible values for "importStrategy":
-      // * 'auto' - (DEFAULT) Auto-import needed Quasar components & directives
-      // * 'all'  - Manually specify what to import
-      importStrategy: 'auto',
+      // https://quasar.dev/options/quasar-language-packs#using-quasar-language-pack-in-app-space
+      // lang: 'en-US', // Quasar language pack
+      lang: 'zh-CN', // Quasar language pack
 
-      // For special cases outside of where "auto" importStrategy can have an impact
+      // 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:
       //
@@ -121,22 +107,61 @@ module.exports = function (/* ctx */) {
         // 'SessionStorage',
         'Notify',
         'Dialog'
-      ]
+      ],
+
+      config: {
+        notify: {
+          html: false,
+          position: 'top-right',
+          timeout: 2500,
+          // closeBtn: true
+          closeBtn: '×'
+        }
+      },
+      // Adds the flex responsive++ CSS classes (noticeable bump in footprint)
+      cssAddon: true,
     },
 
     // animations: 'all', // --- includes all animations
-    // https://v1.quasar.dev/options/animations
+    // https://v2.quasar.dev/options/animations
     animations: [],
 
-    // https://v1.quasar.dev/quasar-cli/developing-ssr/configuring-ssr
+    // https://v2.quasar.dev/quasar-cli/developing-ssr/configuring-ssr
     ssr: {
-      pwa: false
+      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) {
+        chain.plugin('eslint-webpack-plugin')
+          .use(ESLintPlugin, [{extensions: ['js']}])
+      },
+
+      middlewares: [
+        ctx.prod ? 'compression' : '',
+        'render' // keep this as last one
+      ]
     },
 
-    // https://v1.quasar.dev/quasar-cli/developing-pwa/configuring-pwa
+    // https://v2.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) {
+        chain.plugin('eslint-webpack-plugin')
+          .use(ESLintPlugin, [{extensions: ['js']}])
+      },
+
       manifest: {
         name: `Pic Online`,
         short_name: `Pic Online`,
@@ -175,17 +200,17 @@ module.exports = function (/* ctx */) {
       }
     },
 
-    // Full list of options: https://v1.quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
+    // Full list of options: https://v2.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://v1.quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
+    // Full list of options: https://v2.quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
     capacitor: {
       hideSplashscreen: true
     },
 
-    // Full list of options: https://v1.quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
+    // Full list of options: https://v2.quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
     electron: {
       bundler: 'packager', // 'packager' or 'builder'
 
@@ -208,13 +233,17 @@ module.exports = function (/* ctx */) {
         appId: 'pic_online_front'
       },
 
-      // More info: https://v1.quasar.dev/quasar-cli/developing-electron-apps/node-integration
-      nodeIntegration: true,
+      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
+      chainWebpackMain(chain) {
+        chain.plugin('eslint-webpack-plugin')
+          .use(ESLintPlugin, [{extensions: ['js']}])
+      },
 
-      extendWebpack(/* cfg */) {
-        // do something with Electron main process Webpack cfg
-        // chainWebpack also available besides this extendWebpack
-      }
+      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
+      chainWebpackPreload(chain) {
+        chain.plugin('eslint-webpack-plugin')
+          .use(ESLintPlugin, [{extensions: ['js']}])
+      },
     }
   }
-}
+})