Chore: 更新结构 & 依赖

.env.development

@@ -12,9 +12,7 @@ DEV_SERVER_PORT=9000
 # DEV_SERVER_PAGE=/
 # 是否使用https (不支持http2) 默认false
 # DEV_SERVER_HTTPS=true
-# 开发环境sourceMap https://webpack.js.org/configuration/devtool/#devtool
-#   建议 eval(默认cheap-module-eval-source-map), 且配置 TypeScript 生成 sourceMap
-#   这样更快, 且无同名.vue文件sourceMap冲突 (反正<template><style>也不能调试不是)
+# 开发环境sourceMap https://webpack.js.org/configuration/devtool/#devtool 默认eval
 # DEV_TOOL=eval
 # https://webpack.js.org/configuration/output/#outputecmaversion
 # ES_VERSION=2020

.eslintrc.js

@@ -76,7 +76,7 @@ module.exports = {
       ENV,
       { functions: false, classes: false },
     ],
-    '@typescript-eslint/interface-name-prefix': ['error', 'always'], // 接口I开头
+    '@typescript-eslint/interface-name-prefix': 0,
     '@typescript-eslint/member-delimiter-style': [
       'error',
       {

.vscode/vue.code-snippets

@@ -20,7 +20,7 @@
       "import { Component, Vue } from 'vue-property-decorator'",
       "",
       "/// [import] vue组件,其他,CSS Module ///",
-      "// import { getAsync } from '@/utils/highOrder'",
+      "// import { getAsync } from '@com/hoc'",
       "// import STYLE from './index.module.scss'",
       "",
       "/// 常量(UPPER_CASE),单例/变量(camelCase),函数(无副作用,camelCase) ///",
@@ -72,7 +72,7 @@
       "import { Component, Vue } from 'vue-property-decorator'",
       "",
       "/// [import] vue组件,其他,CSS Module ///",
-      "// import { getAsync } from '@/utils/highOrder'",
+      "// import { getAsync } from '@com/hoc'",
       "// import STYLE from './index.module.scss'",
       "",
       "/// 常量(UPPER_CASE),单例/变量(camelCase),函数(无副作用,camelCase) ///",
@@ -118,7 +118,7 @@
       "import { Component, Vue } from 'vue-property-decorator'",
       "",
       "/// [import] vue组件,其他,CSS Module ///",
-      "// import { getAsync } from '@/utils/highOrder'",
+      "// import { getAsync } from '@com/hoc'",
       "// import STYLE from './index.module.scss'",
       "",
       "/// 常量(UPPER_CASE),单例/变量(camelCase),函数(无副作用,camelCase) ///",
@@ -169,7 +169,7 @@
       "import { Component, Vue } from 'vue-property-decorator'",
       "",
       "/// [import] vue组件,其他,CSS Module ///",
-      "// import { getAsync } from '@/utils/highOrder'",
+      "// import { getAsync } from '@com/hoc'",
       "// import STYLE from './index.module.scss'",
       "",
       "/// 常量(UPPER_CASE),单例/变量(camelCase),函数(无副作用,camelCase) ///",

README.md

@@ -178,6 +178,7 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
 │   │── libs # 存储不(能)通过 npm 管理的第三方库/依赖库等相关
 │   │── scss # 样式/CSS 对象(.module).scss 文件
 │   │── skin # 皮肤(scss变量) 文件
+│   │── route # 路由配置
 │   │── router # 路由设置
 │   │── store # 状态管理
 │   │   └── modules # 各模块状态管理
@@ -308,7 +309,7 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
   ```
 
 - `enum/type/interface` 需要导出的直接 `export` (否则可能会得到 undefined), 其他的除了字典(硬编码)和只有默认导出的外, 先定义再`export`(IDE 提示更友好), 并且`export`语句放到最后
-- 不要使用 `$` 作为组件事件名, 该名字已被[异步组件刷新](src/utils/highOrder.ts)占用
+- 不要使用 `$` 作为组件事件名, 该名字已被[异步组件刷新](src/components/hoc)占用
 - Vue实例**私有属性**命名规则(避免 [属性名](https://cn.vuejs.org/v2/style-guide/#私有属性名-必要) 冲突):
   - `$_` 实例命名空间(在保证易维护的前提下可以使用单字母, 但应尽量避免)
   - `_$` **全局/跨组件/hack**命名空间, 命名前应**先全局搜索**是否有重复
@@ -322,6 +323,7 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
   - 基础组件样式(按照[BEM](https://en.bem.info)约定命名[参考链接](https://www.ibm.com/developerworks/cn/web/1512_chengfu_bem/))
 
   均应使用 [CSSModule](https://vue-loader-v14.vuejs.org/zh-cn/features/css-modules.html)(开发环境class名:`[folder]__[name]_[local]-[emoji]$`), 以更好的实现模块化(支持复用)
+
 - CSS Modules class 名使用 `camelCase`, 选择器嵌套**不应超过三层**
 - <a id="scss变量"></a>**皮肤文件**(scss变量) _(包含<a href="#别名">各别名</a>下[.env](.env) `GLOBAL_SCSS`变量指定的文件)_ 中不要出现具体样式, 也不要有[`:export{}`](https://github.com/css-modules/icss#export)(应在 `scss/export` 目录下或 `export*.scss` 中使用)
 - 为保证在`ts/js`中引入scss文件时, 变量注入正确(使用缓存会导致无法对相同文件注入不同变量，不用缓存显然不合理而且也不支持), 应在合适的位置新建 scss 文件来中转:
@@ -438,7 +440,7 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
     import './scss/f.scss?skin=light'
 
     // CSS Module
-    import getSkin from '@/utils/skin'
+    import getSkin from '@/skin'
     import styleDark from './scss/g.module.scss?skin=dark|foo.scss'
     import styleLight from './scss/g.module.scss?skin=light|bar.scss'
 
@@ -618,13 +620,15 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
 - 对多个 js chunk 共同依赖的模块进行缓存/单独提取, 大模块只出现在一个chunk里(cacheGroups)
 - 相同chunk下的基础样式和各个皮肤样式文件分别合并 或 其他合理的合并策略【webpack 5 支持设置 css chunk 的 minSize/maxSize 啦】
 - [现代模式](https://cli.vuejs.org/zh/guide/browser-compatibility.html#现代模式)
-- 打包/热更新慢(已使用 `hard-source-webpack-plugin` 插件动态追踪缓存依赖):
-  1. (第三方)依赖静态化
-    - 优点: 静态化依赖只需一次构建; 支持CDN加载(可供多个应用使用)
-    - 缺点: 增加文件体积, 消耗浏览器资源; 需要更新维护工作
-  2. 开发调试时支持指定需要的模块, 比如指定路由
+- 打包/热更新慢:
+  1. [热更新]使 `hard-source-webpack-plugin` (动态缓存结果文件)在开发环境排除`src`文件夹生效
+  2. [热更新]开发环境减少js(ts必须编译)转码/编译工作量, 比如保留最新ES标准语法, 更进一步可以配合模块加载方式(`<script type="module">` 参考[vite](https://github.com/vuejs/vite)), 但这需要使用最新浏览器调试且调试时不会暴露兼容性问题
+  3. [热更新]开发时指定需要的模块, 比如指定路由
     - 优点: 只需构建指定模块, 提升热更新效率
-    - 缺点: 未解决打包慢问题
+    - 缺点: 需要其他模块时需要重新指定
+  4. (第三方)依赖静态化[不推荐]
+    - 优点: 静态化依赖只需一次构建; 支持CDN加载(可供多个应用使用)
+    - 缺点: 通常会增加文件体积(无法tree-shaking)/数量, 可能导致全局变量污染; CDN维护更新/版本管理
 
 ## 部署(nginx)
 

build/production.config.js

@@ -100,13 +100,12 @@ function plugin(config, ENV) {
 module.exports = function(config, ENV, pages) {
   // https://webpack.js.org/configuration/other-options/#recordspath
   config.merge({ recordsPath: require('path').resolve('build/~records') })
-  /// 多皮肤 ///
   const skinLoader = require('./skinLoader')
   if (skinLoader.init(ENV).SKINS) {
     const name = 'skin-loader'
     /** 选项
      * {
-     *   localHandler: String 默认: 'src/utils/skin.ts'
+     *   localHandler: String 默认: 'src/skin'
      *    ({[skin]:Object}) => Object
      * }
      */

build/skinLoader.js

@@ -4,7 +4,7 @@ const path = require('path')
 const loaderUtils = require('loader-utils')
 
 const PLUGIN_NAME = 'skin-loader'
-const DEFAULT_HANDLER = path.resolve('src/utils/skin')
+const DEFAULT_HANDLER = path.resolve('src/skin')
 
 const EXTENSION = '.scss'
 const INDEX = '/index.scss'
@@ -76,7 +76,8 @@ function init(ENV = process.env) {
       let name
       for (let file of fs.readdirSync(DIR_SKIN, { withFileTypes: true })) {
         file.isFile()
-          ? SKIN_NAME === (name = file.name.replace(REG_EXTENSION, '')) &&
+          ? ((name = file.name.replace(REG_EXTENSION, '') === file.name) ||
+              name === SKIN_NAME) &&
             (file = 0)
           : (SKIN_NAME !== (name = file.name) &&
               exists(DIR_SKIN, (file.name += INDEX))) ||

package.json

@@ -60,10 +60,10 @@
     "@vue/cli-service": "~4.3.1",
     "@vue/eslint-config-standard": "^5.1.2",
     "@vue/eslint-config-typescript": "^5.0.2",
-    "@vue/test-utils": "^1.0.0",
+    "@vue/test-utils": "^1.0.2",
     "alternate-css-extract-plugin": "^0.9.4",
     "compression-webpack-plugin": "^3.1.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.0.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
@@ -86,7 +86,8 @@
     "unicode-match-property-value-ecmascript": "^1.2.0",
     "vue-template-compiler": "^2.6.11",
     "vue-tsx-support": "^2.3.3",
-    "webpack-remove-strict-mode-plugin": "^1.0.0"
+    "webpack-remove-strict-mode-plugin": "^1.0.0",
+    "worker-loader": "^2.0.0"
   },
   "bugs": {
     "url": "https://github.com/Maorey/vue-tpl/issues"

src/api/user.ts

@@ -6,14 +6,22 @@
 import { setHEAD, get, post } from '@/utils/ajax'
 import { local } from '@/utils/storage'
 import CONFIG from '@/config'
-import { user as API } from '@/enums/api'
 
 // 加密算法(token + RSA 加密)
 import Jsencrypt from 'jsencrypt'
 import md5 from 'crypto-js/md5'
 
-/** rsa加密公匙
- */
+/** 用户登录相关接口 */
+export const enum API {
+  /** 获取登陆验证码 */
+  verify = 'verify',
+  /** 用户登陆 */
+  login = 'login',
+  /** 用户注销登陆 */
+  logout = 'logout',
+}
+
+/** rsa加密公匙 */
 let publicKey: string
 
 /** 获取验证码(及publicKey)

src/components/ChooserAsync.tsx

@@ -8,7 +8,7 @@ import { CreateElement, VNode } from 'vue'
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 
 /// [import] vue组件,其他,CSS Module ///
-// import { getAsync } from '@/utils/highOrder'
+// import { getAsync } from '@com/hoc'
 // import STYLE from './index.module.scss'
 import Info from './Info'
 import Loading from './Loading'

src/components/ChooserAsyncFunctional.tsx

@@ -6,13 +6,14 @@
 import Vue, { Component, RenderContext, VNode } from 'vue'
 
 /// [import] vue组件,其他,CSS Module ///
-// import { getAsync } from '@/utils/highOrder'
+// import { getAsync } from '@com/hoc'
 // import STYLE from './index.module.scss'
 import Info from './Info'
 import Loading from './Loading'
 
-import { hasOwn, isDef, isFn, isEqual, setHook } from '@/utils'
+import { hasOwn, isDef, isFn, isEqual } from '@/utils'
 import clone from '@/utils/clone'
+import { setHook } from '@/libs/vue'
 
 /// 常量(UPPER_CASE),单例/变量(camelCase),函数(无副作用,camelCase) ///
 // const ModuleOne: any = getAsync(() =>
@@ -274,9 +275,7 @@ export default (context: RenderContext) => {
   let data // 小工具人
   const store = getStore(
     (temp = context.parent),
-    hasOwn((data = context.data), 'key')
-      ? data.key
-      : (data.key = DEFAULT_KEY)
+    hasOwn((data = context.data), 'key') ? data.key : (data.key = DEFAULT_KEY)
   )
 
   if (store.i.d || (temp.$el && !temp.$el.parentNode) || diff(store, context)) {

src/components/File.tsx

@@ -9,7 +9,7 @@ import { CreateElement, VNode } from 'vue'
 import { Component, Vue, Prop } from 'vue-property-decorator'
 
 /// [import] vue组件,其他,CSS Module ///
-// import { getAsync } from '@/utils/highOrder'
+// import { getAsync } from '@com/hoc'
 // import STYLE from './index.module.scss'
 import ElLink from 'element-ui/lib/link'
 

src/components/Image.tsx

@@ -8,7 +8,7 @@ import { CreateElement, VNode } from 'vue'
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 
 /// [import] vue组件,其他,CSS Module ///
-// import { getAsync } from '@/utils/highOrder'
+// import { getAsync } from '@com/hoc'
 // import STYLE from './index.module.scss'
 import Info from './Info'
 
@@ -89,6 +89,10 @@ export default class extends Vue {
     this.isSleep = true
   }
 
+  private destroyed() {
+    this.store.DROP(this.task)
+  }
+
   /// [watch] (@Watch('attr') onAttrChange(val, oldVal) {}) ///
   /// [methods] (method(){}) ///
   @Watch('src')
@@ -111,16 +115,6 @@ export default class extends Vue {
     }
 
     switch (task.state) {
-      case STATE.drop:
-        return (this.$_vnode = (
-          <Info
-            icon="el-icon-picture-outline"
-            type="info"
-            msg={this.alt}
-            retry="重新加载图片"
-            on={{ $: this.load }}
-          />
-        ))
       case STATE.wait:
         return (this.$_vnode = (
           <Info

src/components/RouterViewTransparent.ts

@@ -6,7 +6,7 @@
 import { Component } from 'vue'
 
 /// [import] vue组件,其他,CSS Module ///
-// import { getAsync } from '@/utils/highOrder'
+// import { getAsync } from '@com/hoc'
 // import STYLE from './index.module.scss'
 import CONFIG from '@/config'
 import getKey from '@/utils/getKey'

src/utils/highOrder.ts → src/components/hoc.ts

@@ -4,12 +4,12 @@
  * @Date: 2019-07-02 14:32:33
  */
 import Vue, { Component, AsyncComponent, RenderContext } from 'vue'
-import CONFIG from '@/config'
 
-import Loading from '@com/Loading' // 加载中
-import Info from '@com/Info' // 加载失败
+import Loading from './Loading' // 加载中
+import Info from './Info' // 加载失败
 
-import getKey from './getKey'
+import CONFIG from '@/config'
+import getKey from '@/utils/getKey'
 
 /** 组件筛选器
  * @param {RenderContext} context vue渲染上下文
@@ -313,4 +313,4 @@ export default class extends Vue {
 */
 // 更多...
 
-export { filterByIS as filter, Chooser, getChooser, getAsync }
+export { Chooser as default, filterByIS as filter, getChooser, getAsync }