chore: upgrade vue cli to 5.0 (#417)

Signed-off-by: Ryan Wang <i@ryanc.cc>
2022-01-21 16:50:23 +08:00 · 2022-01-21 16:50:23 +08:00 · 01a9e45e1a
parent 483577f447
commit 01a9e45e1a
61 changed files with 3152 additions and 7156 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -3,12 +3,24 @@ module.exports = {
  env: {
    node: true
  },
-  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
+  extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended'],
  parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/no-mutating-props': 0,
+    'vue/multi-word-component-names': 0,
+    'prettier/prettier': [
+      'error',
+      {
+        printWidth: 120,
+        semi: false,
+        singleQuote: true,
+        trailingComma: 'none',
+        arrowParens: 'avoid'
+      }
+    ]
  }
 }
--- a/.prettierrc
+++ b/.prettierrc
@ -1,5 +1,7 @@
 {
  "printWidth": 120,
  "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
 }
--- a/babel.config.js
+++ b/babel.config.js
@ -1,11 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/app',
-    [
-      '@babel/preset-env',
-      {
-        useBuiltIns: 'entry'
-      }
-    ]
-  ]
+  presets: ['@vue/cli-plugin-babel/preset']
 }
--- a/package.json
+++ b/package.json
@ -21,10 +21,10 @@
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
-    "@codemirror/basic-setup": "^0.19.0",
-    "@codemirror/lang-html": "^0.19.3",
+    "@codemirror/basic-setup": "^0.19.1",
+    "@codemirror/lang-html": "^0.19.4",
    "@codemirror/lang-java": "^0.19.1",
-    "@halo-dev/admin-api": "^1.0.0-alpha.46",
+    "@halo-dev/admin-api": "^1.0.0-alpha.47",
    "ant-design-vue": "^1.7.8",
    "dayjs": "^1.10.7",
    "enquire.js": "^2.1.6",
@ -33,6 +33,7 @@
    "filepond-plugin-image-preview": "^4.6.10",
    "halo-editor": "^2.8.3",
    "marked": "^4.0.10",
+    "md5.js": "^1.3.5",
    "nprogress": "^0.2.0",
    "tiny-pinyin": "^1.3.2",
    "verte": "^0.0.12",
@ -48,26 +49,22 @@
    "vuex": "^3.6.2"
  },
  "devDependencies": {
-    "@babel/polyfill": "^7.12.1",
-    "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-eslint": "^4.5.15",
-    "@vue/cli-plugin-unit-jest": "^4.5.15",
-    "@vue/cli-service": "^4.5.15",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^1.2.2",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
-    "babel-plugin-import": "^1.13.3",
-    "eslint": "^6.8.0",
-    "eslint-plugin-html": "^6.2.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-vue": "^6.2.2",
+    "@babel/core": "^7.16.10",
+    "@babel/eslint-parser": "^7.16.5",
+    "@vue/cli-plugin-babel": "~5.0.0-rc.2",
+    "@vue/cli-plugin-eslint": "~5.0.0-rc.2",
+    "@vue/cli-plugin-router": "~5.0.0-rc.2",
+    "@vue/cli-plugin-vuex": "~5.0.0-rc.2",
+    "@vue/cli-service": "~5.0.0-rc.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.3.0",
    "husky": "^6.0.0",
    "less": "^3.13.1",
    "less-loader": "^5.0.0",
-    "lint-staged": "^10.5.4",
-    "prettier": "^1.19.1",
+    "lint-staged": "^11.2.6",
+    "prettier": "^2.5.1",
    "tailwindcss": "^1.9.6",
    "vue-template-compiler": "^2.6.14"
  }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/GlobalFooter/GlobalFooter.vue
+++ b/src/components/GlobalFooter/GlobalFooter.vue
@ -1,10 +1,8 @@
 <template>
-  <div class="footer text-center" style="padding: 0 16px;margin: 48px 0 0;">
-    <div class="copyright" style="color: rgba(0, 0, 0, 0.45);font-size: 14px;">
+  <div class="footer text-center" style="padding: 0 16px; margin: 48px 0 0">
+    <div class="copyright" style="color: rgba(0, 0, 0, 0.45); font-size: 14px">
      Proudly power by
-      <router-link :to="{ name: 'About' }">
-        Halo
-      </router-link>
+      <router-link :to="{ name: 'About' }"> Halo </router-link>
    </div>
  </div>
 </template>
--- a/src/components/Login/LoginForm.vue
+++ b/src/components/Login/LoginForm.vue
@ -9,17 +9,17 @@
    >
      <a-form-model-item v-if="!form.needAuthCode" prop="username">
        <a-input v-model="form.model.username" placeholder="用户名/邮箱">
-          <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="user" />
+          <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="user" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item v-if="!form.needAuthCode" prop="password">
        <a-input v-model="form.model.password" placeholder="密码" type="password">
-          <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="lock" />
+          <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="lock" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item v-if="form.needAuthCode" prop="authcode">
        <a-input v-model="form.model.authcode" :maxLength="6" placeholder="两步验证码">
-          <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="safety-certificate" />
+          <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="safety-certificate" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
--- a/src/components/Menu/SideMenu.vue
+++ b/src/components/Menu/SideMenu.vue
@ -12,7 +12,7 @@
      :menu="menus"
      :mode="mode"
      :theme="theme"
-      style="padding: 16px 0px;"
+      style="padding: 16px 0px"
      @select="onSelect"
    ></s-menu>
  </a-layout-sider>
--- a/src/components/SettingDrawer/SettingDrawer.vue
+++ b/src/components/SettingDrawer/SettingDrawer.vue
@ -63,13 +63,11 @@
          <a-list :split="false">
            <a-list-item>
              <a-tooltip slot="actions">
-                <template slot="title">
-                  该设定仅 [顶部栏导航] 时有效
-                </template>
+                <template slot="title"> 该设定仅 [顶部栏导航] 时有效 </template>
                <a-select
                  :defaultValue="contentWidth"
                  size="small"
-                  style="width: 80px;"
+                  style="width: 80px"
                  @change="handleContentWidthChange"
                >
                  <a-select-option value="Fixed">固定</a-select-option>
--- a/src/main.js
+++ b/src/main.js
@ -10,10 +10,10 @@ import './core/lazy_use'
 import '@/router/guard/'
 import '@/filters/filter' // global filter
 import './components'
-import { version } from '../package.json'
+import pkg from '../package.json'

 Vue.config.productionTip = false
-Vue.prototype.VERSION = version
+Vue.prototype.VERSION = pkg.version

 Vue.use(router)
 Vue.use(Contextmenu)
--- a/src/mixins/mixin.js
+++ b/src/mixins/mixin.js
@ -61,12 +61,14 @@ const mixinPostEdit = {
      const toolbarHeight = 64
      const contentMarginTop = 24
      const titleInputHeight = 40
-      return `calc(100vh - ${toolbarHeight +
+      return `calc(100vh - ${
+        toolbarHeight +
        contentMarginTop +
        titleInputHeight +
        this.viewMetas.pageHeaderHeight +
        this.viewMetas.pageFooterHeight +
-        10}px - 1rem)`
+        10
+      }px - 1rem)`
    }
  },
  mounted() {
--- a/src/utils/api-client.js
+++ b/src/utils/api-client.js
@ -22,7 +22,6 @@ haloRestApiClient.interceptors.request.use(
    return config
  },
  error => {
-    console.log('request error', error)
    return Promise.reject(error)
  }
 )
--- a/src/views/attachment/components/AttachmentDetailModal.vue
+++ b/src/views/attachment/components/AttachmentDetailModal.vue
@ -11,7 +11,7 @@
      </a-col>
      <a-col :lg="15" :md="24" :sm="24" :xl="15" :xs="24">
        <a-list itemLayout="horizontal">
-          <a-list-item style="padding-top: 0;">
+          <a-list-item style="padding-top: 0">
            <a-list-item-meta>
              <template v-if="editable" slot="description">
                <a-input ref="nameInput" v-model="attachment.name" @blur="handleUpdateName" />
--- a/src/views/comment/components/CommentTab.vue
+++ b/src/views/comment/components/CommentTab.vue
@ -35,19 +35,13 @@
        <a-dropdown v-show="list.params.status != null && list.params.status !== '' && !isMobile()">
          <a-menu slot="overlay">
            <a-menu-item v-if="list.params.status === 'AUDITING'" key="1">
-              <a href="javascript:void(0);" @click="handleEditStatusMore(commentStatus.PUBLISHED.value)">
-                通过
-              </a>
+              <a href="javascript:void(0);" @click="handleEditStatusMore(commentStatus.PUBLISHED.value)"> 通过 </a>
            </a-menu-item>
            <a-menu-item v-if="list.params.status === 'PUBLISHED' || list.params.status === 'AUDITING'" key="2">
-              <a href="javascript:void(0);" @click="handleEditStatusMore(commentStatus.RECYCLE.value)">
-                移到回收站
-              </a>
+              <a href="javascript:void(0);" @click="handleEditStatusMore(commentStatus.RECYCLE.value)"> 移到回收站 </a>
            </a-menu-item>
            <a-menu-item v-if="list.params.status === 'RECYCLE'" key="3">
-              <a href="javascript:void(0);" @click="handleDeleteMore">
-                永久删除
-              </a>
+              <a href="javascript:void(0);" @click="handleDeleteMore"> 永久删除 </a>
            </a-menu-item>
          </a-menu>
          <a-button>
@ -130,18 +124,18 @@
              <span
                v-if="item.authorUrl"
                slot="title"
-                style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                style="max-width: 300px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
              >
-                <a-icon v-if="item.isAdmin" style="margin-right: 3px;" type="user" />&nbsp;
+                <a-icon v-if="item.isAdmin" style="margin-right: 3px" type="user" />&nbsp;
                <a :href="item.authorUrl" target="_blank">{{ item.author }}</a>
                &nbsp;<small style="color: rgba(0, 0, 0, 0.45)">{{ item.createTime | timeAgo }}</small>
              </span>
              <span
                v-else
                slot="title"
-                style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                style="max-width: 300px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
              >
-                <a-icon v-if="item.isAdmin" style="margin-right: 3px;" type="user" />&nbsp;{{ item.author }}&nbsp;<small
+                <a-icon v-if="item.isAdmin" style="margin-right: 3px" type="user" />&nbsp;{{ item.author }}&nbsp;<small
                  style="color: rgba(0, 0, 0, 0.45)"
                >
                  {{ item.createTime | timeAgo }}
@ -167,7 +161,7 @@
          scrollToFirstRowOnChange
        >
          <template slot="author" slot-scope="text, record">
-            <a-icon v-if="record.isAdmin" style="margin-right: 3px;" type="user" />
+            <a-icon v-if="record.isAdmin" style="margin-right: 3px" type="user" />
            <a v-if="record.authorUrl" :href="record.authorUrl" target="_blank">{{ text }}</a>
            <span v-else>{{ text }}</span>
          </template>
--- a/src/views/comment/components/TargetCommentTree.vue
+++ b/src/views/comment/components/TargetCommentTree.vue
@ -41,7 +41,7 @@
        </a-popconfirm>
      </template>
      <a slot="author" :href="comment.authorUrl" target="_blank">
-        <a-icon v-if="comment.isAdmin" style="margin-right: 3px;" type="user" />
+        <a-icon v-if="comment.isAdmin" style="margin-right: 3px" type="user" />
        {{ comment.author }}
      </a>
      <a-avatar slot="avatar" :alt="comment.author" :src="comment.avatar" size="large" />
--- a/src/views/interface/MenuList.vue
+++ b/src/views/interface/MenuList.vue
@ -50,15 +50,11 @@
                  <a-input v-model="teams.form.model.team" autoFocus />
                </a-form-model-item>
                <a-form-model-item style="margin-bottom: 0">
-                  <a-button type="primary" @click="handleCreateTeam">
-                    新增
-                  </a-button>
+                  <a-button type="primary" @click="handleCreateTeam"> 新增 </a-button>
                </a-form-model-item>
              </a-form-model>
            </template>
-            <a-button block class="mt-3" type="primary">
-              新增分组
-            </a-button>
+            <a-button block class="mt-3" type="primary"> 新增分组 </a-button>
          </a-popover>
        </a-card>
      </a-col>
@ -88,20 +84,12 @@
                @callback="formBatch.errored = false"
                @click="handleUpdateBatch"
              ></ReactiveButton>
-              <a-button v-if="!form.visible" ghost type="primary" @click="handleOpenCreateMenuForm()">
-                新增
-              </a-button>
-              <a-button v-else type="default" @click="handleCloseCreateMenuForm()">
-                取消新增
-              </a-button>
+              <a-button v-if="!form.visible" ghost type="primary" @click="handleOpenCreateMenuForm()"> 新增 </a-button>
+              <a-button v-else type="default" @click="handleCloseCreateMenuForm()"> 取消新增 </a-button>
              <a-dropdown :trigger="['click']">
                <a-menu slot="overlay">
-                  <a-menu-item @click="menuInternalLinkSelector.visible = true">
-                    从系统预设链接添加
-                  </a-menu-item>
-                  <a-menu-item @click="handleDeleteBatch">
-                    删除当前组
-                  </a-menu-item>
+                  <a-menu-item @click="menuInternalLinkSelector.visible = true"> 从系统预设链接添加 </a-menu-item>
+                  <a-menu-item @click="handleDeleteBatch"> 删除当前组 </a-menu-item>
                </a-menu>
                <a-button>
                  其他
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@ -1,12 +1,8 @@
 <template>
  <page-view :title="activatedTheme ? activatedTheme.name : '无'" affix subTitle="当前启用">
    <template slot="extra">
-      <a-button :loading="list.loading" icon="reload" @click="handleRefreshThemesCache">
-        刷新
-      </a-button>
-      <a-button icon="plus" type="primary" @click="installModal.visible = true">
-        安装
-      </a-button>
+      <a-button :loading="list.loading" icon="reload" @click="handleRefreshThemesCache"> 刷新</a-button>
+      <a-button icon="plus" type="primary" @click="installModal.visible = true"> 安装</a-button>
    </template>
    <a-row :gutter="12" align="middle" type="flex">
      <a-col :span="24">
@ -20,7 +16,7 @@
              <div class="theme-screenshot">
                <img :alt="item.name" :src="item.screenshots || '/images/placeholder.jpg'" loading="lazy" />
              </div>
-              <template slot="actions" class="ant-card-actions">
+              <template slot="actions">
                <div v-if="item.activated">
                  <a-icon style="margin-right: 3px" theme="twoTone" type="unlock" />
                  已启用
--- a/src/views/interface/ThemeSetting.vue
+++ b/src/views/interface/ThemeSetting.vue
@ -111,7 +111,7 @@
                  :defaultValue="item.defaultValue"
                  model="hex"
                  picker="square"
-                  style="display: inline-block;height: 24px;"
+                  style="display: inline-block; height: 24px"
                ></verte>
                <AttachmentInput
                  v-else-if="item.type === 'ATTACHMENT'"
--- a/src/views/interface/components/MenuInternalLinkSelector.vue
+++ b/src/views/interface/components/MenuInternalLinkSelector.vue
@ -1,9 +1,7 @@
 <template>
  <a-modal v-model="visible" :bodyStyle="{ padding: '0 24px 24px' }" :width="1024" title="从系统预设链接添加菜单">
    <template slot="footer">
-      <a-button @click="handleCancel">
-        取消
-      </a-button>
+      <a-button @click="handleCancel"> 取消 </a-button>
      <ReactiveButton
        :disabled="menus && menus.length <= 0"
        :errored="saveErrored"
--- a/src/views/interface/components/MenuTreeNode.vue
+++ b/src/views/interface/components/MenuTreeNode.vue
@ -28,12 +28,8 @@
              </span>
            </a-list-item-meta>
            <template slot="actions">
-              <a v-if="!item.formVisible" href="javascript:void(0);" @click="handleOpenEditForm(item)">
-                编辑
-              </a>
-              <a v-else href="javascript:void(0);" @click="handleCloseCreateMenuForm(item)">
-                取消编辑
-              </a>
+              <a v-if="!item.formVisible" href="javascript:void(0);" @click="handleOpenEditForm(item)"> 编辑 </a>
+              <a v-else href="javascript:void(0);" @click="handleCloseCreateMenuForm(item)"> 取消编辑 </a>
            </template>
            <template slot="actions">
              <a href="javascript:void(0);" @click="handleDelete(item.id)">删除</a>
@ -65,7 +61,7 @@
            @cancel="handleCloseCreateMenuForm(item)"
            @succeed="handleUpdateMenuSucceed(item)"
          />
-          <div class="a-list-nested" style="margin-left: 44px;">
+          <div class="a-list-nested" style="margin-left: 44px">
            <MenuTreeNode :excludedTeams="excludedTeams" :list="item.children" @reload="onReloadEmit" />
          </div>
        </div>
--- a/src/views/interface/components/ThemeDeleteConfirmModal.vue
+++ b/src/views/interface/components/ThemeDeleteConfirmModal.vue
@ -1,9 +1,7 @@
 <template>
  <a-modal v-model="modalVisible" :afterClose="onAfterClose" :closable="false" :width="416" destroyOnClose title="提示">
    <template slot="footer">
-      <a-button @click="modalVisible = false">
-        取消
-      </a-button>
+      <a-button @click="modalVisible = false"> 取消 </a-button>
      <ReactiveButton
        :errored="deleteErrored"
        :loading="deleting"
@ -15,9 +13,7 @@
      ></ReactiveButton>
    </template>
    <p>确定删除【{{ theme.name }}】主题？</p>
-    <a-checkbox v-model="deleteSettings">
-      同时删除主题配置
-    </a-checkbox>
+    <a-checkbox v-model="deleteSettings"> 同时删除主题配置 </a-checkbox>
  </a-modal>
 </template>
 <script>
--- a/src/views/interface/components/ThemeSettingDrawer.vue
+++ b/src/views/interface/components/ThemeSettingDrawer.vue
@ -22,7 +22,7 @@
          </a-card-meta>
        </a-card>
      </a-col>
-      <a-col :lg="formColValue" :md="formColValue" :sm="24" :xl="formColValue" :xs="24" style="padding-bottom: 50px;">
+      <a-col :lg="formColValue" :md="formColValue" :sm="24" :xl="formColValue" :xs="24" style="padding-bottom: 50px">
        <a-spin :spinning="settingLoading">
          <div v-if="themeConfigurations.length > 0" class="card-container">
            <a-tabs defaultActiveKey="0" type="card">
@ -68,7 +68,7 @@
                      :defaultValue="item.defaultValue"
                      model="hex"
                      picker="square"
-                      style="display: inline-block;height: 24px;"
+                      style="display: inline-block; height: 24px"
                    ></verte>
                    <a-input
                      v-else-if="item.type === 'ATTACHMENT'"
@ -105,7 +105,7 @@
        </a-spin>
      </a-col>

-      <a-col v-if="viewMode" :lg="20" :md="20" :sm="24" :xl="20" :xs="24" style="padding-bottom: 50px;">
+      <a-col v-if="viewMode" :lg="20" :md="20" :sm="24" :xl="20" :xs="24" style="padding-bottom: 50px">
        <a-card :bodyStyle="{ padding: 0 }" :bordered="true">
          <iframe
            id="themeViewIframe"
--- a/src/views/post/CategoryList.vue
+++ b/src/views/post/CategoryList.vue
@ -95,7 +95,13 @@
                </template>
                <span
                  slot="title"
-                  style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                  style="
+                    max-width: 300px;
+                    display: block;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  "
                >
                  {{ item.name }}{{ item.password ? '（加密）' : '' }}
                </span></a-list-item-meta
--- a/src/views/post/PostList.vue
+++ b/src/views/post/PostList.vue
@ -156,11 +156,11 @@
              </template>
              <span
                slot="title"
-                style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                style="max-width: 300px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
              >
                <a-icon
                  v-if="item.topPriority !== 0"
-                  style="margin-right: 3px;"
+                  style="margin-right: 3px"
                  theme="twoTone"
                  twoToneColor="red"
                  type="pushpin"
@ -226,7 +226,7 @@
          <span slot="postTitle" slot-scope="text, record">
            <a-icon
              v-if="record.topPriority !== 0"
-              style="margin-right: 3px;"
+              style="margin-right: 3px"
              theme="twoTone"
              twoToneColor="red"
              type="pushpin"
@ -276,7 +276,7 @@
          <span
            slot="commentCount"
            slot-scope="text, record"
-            style="cursor: pointer;"
+            style="cursor: pointer"
            @click="handleShowPostComments(record)"
          >
            <a-badge
@ -373,12 +373,8 @@
      @onClose="selectedPost = {}"
    >
      <template #extraFooter>
-        <a-button :disabled="selectPreviousButtonDisabled" @click="handleSelectPrevious">
-          上一篇
-        </a-button>
-        <a-button :disabled="selectNextButtonDisabled" @click="handleSelectNext">
-          下一篇
-        </a-button>
+        <a-button :disabled="selectPreviousButtonDisabled" @click="handleSelectPrevious"> 上一篇 </a-button>
+        <a-button :disabled="selectNextButtonDisabled" @click="handleSelectNext"> 下一篇 </a-button>
      </template>
    </PostSettingModal>

--- a/src/views/post/TagList.vue
+++ b/src/views/post/TagList.vue
@ -66,7 +66,7 @@
              <template slot="title">
                <span>{{ tag.postCount }} 篇文章</span>
              </template>
-              <post-tag :tag="tag" style="margin-bottom: 8px;cursor:pointer;" @click.native="form.model = tag" />
+              <post-tag :tag="tag" style="margin-bottom: 8px; cursor: pointer" @click.native="form.model = tag" />
            </a-tooltip>
          </a-spin>
        </a-card>
--- a/src/views/post/components/PostSettingModal.vue
+++ b/src/views/post/components/PostSettingModal.vue
@ -122,9 +122,7 @@
    </div>
    <template slot="footer">
      <slot name="extraFooter" />
-      <a-button :disabled="loading" @click="modalVisible = false">
-        关闭
-      </a-button>
+      <a-button :disabled="loading" @click="modalVisible = false"> 关闭 </a-button>
      <ReactiveButton
        v-if="!form.model.id"
        :errored="form.draftSaveErrored"
--- a/src/views/sheet/components/CustomSheetList.vue
+++ b/src/views/sheet/components/CustomSheetList.vue
@ -74,7 +74,7 @@
          </template>
          <span
            slot="title"
-            style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+            style="max-width: 300px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
          >
            <a v-if="item.status === 'PUBLISHED'" :href="item.fullPath" class="no-underline" target="_blank">
              <a-tooltip :title="'点击访问【' + item.title + '】'" placement="top">{{ item.title }}</a-tooltip>
@ -218,12 +218,8 @@
      @onClose="selectedSheet = {}"
    >
      <template #extraFooter>
-        <a-button :disabled="selectPreviousButtonDisabled" @click="handleSelectPrevious">
-          上一篇
-        </a-button>
-        <a-button :disabled="selectNextButtonDisabled" @click="handleSelectNext">
-          下一篇
-        </a-button>
+        <a-button :disabled="selectPreviousButtonDisabled" @click="handleSelectPrevious"> 上一篇 </a-button>
+        <a-button :disabled="selectNextButtonDisabled" @click="handleSelectNext"> 下一篇 </a-button>
      </template>
    </SheetSettingModal>
    <TargetCommentDrawer
--- a/src/views/sheet/components/IndependentSheetList.vue
+++ b/src/views/sheet/components/IndependentSheetList.vue
@ -29,7 +29,7 @@
        <a-list-item-meta>
          <span
            slot="title"
-            style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+            style="max-width: 300px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
          >
            <a v-if="item.available" :href="item.fullPath" target="_blank">{{ item.title }}</a>
            <a v-else :href="item.fullPath" disabled target="_blank">{{ item.title }}</a>
--- a/src/views/sheet/components/SheetSettingModal.vue
+++ b/src/views/sheet/components/SheetSettingModal.vue
@ -110,9 +110,7 @@
    </div>
    <template slot="footer">
      <slot name="extraFooter" />
-      <a-button :disabled="loading" @click="modalVisible = false">
-        关闭
-      </a-button>
+      <a-button :disabled="loading" @click="modalVisible = false"> 关闭 </a-button>
      <ReactiveButton
        v-if="!form.model.id"
        :errored="form.draftSaveErrored"
--- a/src/views/sheet/independent/JournalList.vue
+++ b/src/views/sheet/independent/JournalList.vue
@ -103,7 +103,7 @@
      </a-col>
    </a-row>

-    <div style="position: fixed;bottom: 30px;right: 30px;">
+    <div style="position: fixed; bottom: 30px; right: 30px">
      <a-button
        icon="setting"
        shape="circle"
--- a/src/views/sheet/independent/LinkList.vue
+++ b/src/views/sheet/independent/LinkList.vue
@ -95,7 +95,13 @@
                </template>
                <span
                  slot="title"
-                  style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                  style="
+                    max-width: 300px;
+                    display: block;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  "
                >
                  {{ item.name }}
                </span>
@ -132,7 +138,7 @@
        </a-card>
      </a-col>
    </a-row>
-    <div style="position: fixed;bottom: 30px;right: 30px;">
+    <div style="position: fixed; bottom: 30px; right: 30px">
      <a-button
        icon="setting"
        shape="circle"
--- a/src/views/sheet/independent/PhotoList.vue
+++ b/src/views/sheet/independent/PhotoList.vue
@ -67,7 +67,7 @@
        @showSizeChange="handlePaginationChange"
      />
    </div>
-    <div style="position: fixed;bottom: 30px;right: 30px;">
+    <div style="position: fixed; bottom: 30px; right: 30px">
      <a-button icon="setting" shape="circle" size="large" type="primary" @click="optionFormVisible = true"></a-button>
    </div>
    <a-modal v-model="optionFormVisible" :afterClose="() => (optionFormVisible = false)" title="页面设置">
--- a/src/views/system/Installation.vue
+++ b/src/views/system/Installation.vue
@ -2,7 +2,7 @@
  <a-row align="middle" class="h-screen" justify="center" type="flex">
    <a-col :lg="16" :md="20" :sm="20" :xl="12" :xs="23" :xxl="8">
      <div class="card-container animated fadeIn">
-        <a-card :bordered="false" style="box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;">
+        <a-card :bordered="false" style="box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0">
          <div class="halo-logo">
            <img alt="Halo Logo" src="/images/logo.svg" />
            <span>安装向导</span>
@ -11,12 +11,8 @@
          <!-- Blogger info -->
          <div class="mt-5 mb-5">
            <a-radio-group v-model="installationMode">
-              <a-radio-button value="new">
-                全新安装
-              </a-radio-button>
-              <a-radio-button value="import">
-                数据导入
-              </a-radio-button>
+              <a-radio-button value="new"> 全新安装 </a-radio-button>
+              <a-radio-button value="import"> 数据导入 </a-radio-button>
            </a-radio-group>
          </div>
          <a-form-model
@ -27,45 +23,41 @@
            class="installationForm animated fadeIn"
            layout="horizontal"
          >
-            <a-divider dashed orientation="left">
-              管理员信息
-            </a-divider>
+            <a-divider dashed orientation="left"> 管理员信息 </a-divider>
            <a-form-model-item prop="username">
              <a-input v-model="form.model.username" placeholder="用户名">
-                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="user" />
+                <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="user" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="username">
              <a-input v-model="form.model.nickname" placeholder="用户昵称">
-                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="user" />
+                <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="user" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="email">
              <a-input v-model="form.model.email" placeholder="用户邮箱">
-                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="mail" />
+                <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="mail" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="password">
              <a-input v-model="form.model.password" placeholder="登录密码（8-100位）" type="password">
-                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="lock" />
+                <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="lock" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="confirmPassword">
              <a-input v-model="form.model.confirmPassword" placeholder="确认登录密码" type="password">
-                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="lock" />
+                <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="lock" />
              </a-input>
            </a-form-model-item>
-            <a-divider dashed orientation="left">
-              站点信息
-            </a-divider>
+            <a-divider dashed orientation="left"> 站点信息 </a-divider>
            <a-form-model-item prop="url">
              <a-input v-model="form.model.url" placeholder="博客地址">
-                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="link" />
+                <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="link" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="title">
              <a-input v-model="form.model.title" placeholder="博客标题">
-                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="book" />
+                <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="book" />
              </a-input>
            </a-form-model-item>
          </a-form-model>
--- a/src/views/system/ToolList.vue
+++ b/src/views/system/ToolList.vue
@ -7,7 +7,7 @@
            <a-icon type="experiment" />
            开发者选项
          </div>
-          <p style="min-height: 50px;">点击进入开发者选项页面</p>
+          <p style="min-height: 50px">点击进入开发者选项页面</p>
          <a-button class="float-right" type="primary" @click="handleToDeveloperOptions()">进入</a-button>
        </a-card>
      </a-col>
@ -17,19 +17,13 @@
            <a-icon type="hdd" />
            博客备份
          </div>
-          <p style="min-height: 50px;">支持备份全站数据和数据导出，支持下载到本地</p>
+          <p style="min-height: 50px">支持备份全站数据和数据导出，支持下载到本地</p>

          <a-dropdown class="float-right">
            <a-menu slot="overlay">
-              <a-menu-item key="1" @click="backupWorkDirDrawerVisible = true">
-                整站备份
-              </a-menu-item>
-              <a-menu-item key="2" @click="exportDataDrawerVisible = true">
-                数据导出
-              </a-menu-item>
-              <a-menu-item key="3" @click="exportMarkdownDrawerVisible = true">
-                导出文章为 Markdown 文档
-              </a-menu-item>
+              <a-menu-item key="1" @click="backupWorkDirDrawerVisible = true"> 整站备份 </a-menu-item>
+              <a-menu-item key="2" @click="exportDataDrawerVisible = true"> 数据导出 </a-menu-item>
+              <a-menu-item key="3" @click="exportMarkdownDrawerVisible = true"> 导出文章为 Markdown 文档 </a-menu-item>
            </a-menu>
            <a-button class="ml-2">
              备份
@ -44,7 +38,7 @@
            <a-icon type="file-markdown" />
            Markdown 文章导入
          </div>
-          <p style="min-height: 50px;">支持 Hexo/Jekyll 文章导入并解析元数据</p>
+          <p style="min-height: 50px">支持 Hexo/Jekyll 文章导入并解析元数据</p>
          <a-button class="float-right" type="primary" @click="markdownUpload = true">导入</a-button>
        </a-card>
      </a-col>
--- a/src/views/system/developer/tabs/Environment.vue
+++ b/src/views/system/developer/tabs/Environment.vue
@ -133,7 +133,7 @@
        </a-card>
      </a-col>
    </a-row>
-    <div style="position: fixed;bottom: 30px;right: 30px;">
+    <div style="position: fixed; bottom: 30px; right: 30px">
      <a-button icon="sync" shape="circle" size="large" type="primary" @click="handleRefresh"></a-button>
    </div>
  </div>
--- a/src/views/system/developer/tabs/StaticStorage.vue
+++ b/src/views/system/developer/tabs/StaticStorage.vue
@ -3,12 +3,8 @@
    <a-card :bodyStyle="{ padding: 0 }" :bordered="false">
      <div class="table-operator">
        <a-button icon="cloud-upload" type="primary" @click="uploadModal.visible = true">上传</a-button>
-        <a-button icon="plus" @click="handleOpenCreateDirectoryModal({})">
-          新建文件夹
-        </a-button>
-        <a-button :loading="list.loading" icon="sync" @click="handleListStatics">
-          刷新
-        </a-button>
+        <a-button icon="plus" @click="handleOpenCreateDirectoryModal({})"> 新建文件夹</a-button>
+        <a-button :loading="list.loading" icon="sync" @click="handleListStatics"> 刷新</a-button>
      </div>
      <div class="mt-4">
        <a-table
--- a/src/views/user/Profile.vue
+++ b/src/views/user/Profile.vue
@ -12,7 +12,7 @@
                @click="attachmentDrawer.visible = true"
              />
            </a-tooltip>
-            <div class="mt-4 mb-1 text-xl font-medium leading-5" style="color: rgba(0, 0, 0, 0.85);">
+            <div class="mt-4 mb-1 text-xl font-medium leading-5" style="color: rgba(0, 0, 0, 0.85)">
              {{ userForm.model.nickname }}
            </div>
            <div>{{ userForm.model.description }}</div>
@ -216,9 +216,7 @@
      icon="safety-certificate"
    >
      <template slot="footer">
-        <a-button key="back" @click="handleCloseMFAuthModal">
-          取消
-        </a-button>
+        <a-button key="back" @click="handleCloseMFAuthModal"> 取消 </a-button>
        <ReactiveButton
          key="submit"
          :errored="mfaParam.errored"
@ -234,7 +232,7 @@
      <a-form-model ref="mfaForm" :model="mfaParam" :rules="mfaParam.rules" layout="vertical">
        <a-form-model-item v-if="mfaUsed" label="两步验证码" prop="authcode">
          <a-input v-model="mfaParam.authcode" :maxLength="6">
-            <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="safety-certificate" />
+            <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="safety-certificate" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item v-if="!mfaUsed" :help="`MFAKey:${mfaParam.mfaKey}`" label="1. 请扫描二维码或导入 key">
@ -247,7 +245,7 @@
        </a-form-model-item>
        <a-form-model-item v-if="!mfaUsed" label="2. 验证两步验证码" prop="authcode">
          <a-input v-model="mfaParam.authcode" :maxLength="6">
-            <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="safety-certificate" />
+            <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="safety-certificate" />
          </a-input>
        </a-form-model-item>
      </a-form-model>
--- a/src/views/user/ResetPassword.vue
+++ b/src/views/user/ResetPassword.vue
@ -43,9 +43,7 @@
          <a-button :block="true" type="primary" @click="handleResetPassword">重置密码</a-button>
        </a-form-model-item>
      </a-form-model>
-      <router-link :to="{ name: 'Login' }" class="tip">
-        返回登录
-      </router-link>
+      <router-link :to="{ name: 'Login' }" class="tip"> 返回登录 </router-link>
    </div>
  </div>
 </template>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -131,24 +131,24 @@ module.exports = {
    },
    spacing: {
      px: '1px',
-      '0': '0',
-      '1': '0.25rem',
-      '2': '0.5rem',
-      '3': '0.75rem',
-      '4': '1rem',
-      '5': '1.25rem',
-      '6': '1.5rem',
-      '8': '2rem',
-      '10': '2.5rem',
-      '12': '3rem',
-      '16': '4rem',
-      '20': '5rem',
-      '24': '6rem',
-      '32': '8rem',
-      '40': '10rem',
-      '48': '12rem',
-      '56': '14rem',
-      '64': '16rem'
+      0: '0',
+      1: '0.25rem',
+      2: '0.5rem',
+      3: '0.75rem',
+      4: '1rem',
+      5: '1.25rem',
+      6: '1.5rem',
+      8: '2rem',
+      10: '2.5rem',
+      12: '3rem',
+      16: '4rem',
+      20: '5rem',
+      24: '6rem',
+      32: '8rem',
+      40: '10rem',
+      48: '12rem',
+      56: '14rem',
+      64: '16rem'
    },
    backgroundColor: theme => theme('colors'),
    backgroundImage: {
@ -195,10 +195,10 @@ module.exports = {
    },
    borderWidth: {
      default: '1px',
-      '0': '0',
-      '2': '2px',
-      '4': '4px',
-      '8': '8px'
+      0: '0',
+      2: '2px',
+      4: '4px',
+      8: '8px'
    },
    boxShadow: {
      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
@ -229,17 +229,17 @@ module.exports = {
      current: 'currentColor'
    },
    flex: {
-      '1': '1 1 0%',
+      1: '1 1 0%',
      auto: '1 1 auto',
      initial: '0 1 auto',
      none: 'none'
    },
    flexGrow: {
-      '0': '0',
+      0: '0',
      default: '1'
    },
    flexShrink: {
-      '0': '0',
+      0: '0',
      default: '1'
    },
    fontFamily: {
@ -291,7 +291,7 @@ module.exports = {
      screen: '100vh'
    }),
    inset: {
-      '0': '0',
+      0: '0',
      auto: 'auto'
    },
    letterSpacing: {
@ -309,14 +309,14 @@ module.exports = {
      normal: '1.5',
      relaxed: '1.625',
      loose: '2',
-      '3': '.75rem',
-      '4': '1rem',
-      '5': '1.25rem',
-      '6': '1.5rem',
-      '7': '1.75rem',
-      '8': '2rem',
-      '9': '2.25rem',
-      '10': '2.5rem'
+      3: '.75rem',
+      4: '1rem',
+      5: '1.25rem',
+      6: '1.5rem',
+      7: '1.75rem',
+      8: '2rem',
+      9: '2.25rem',
+      10: '2.5rem'
    },
    listStyleType: {
      none: 'none',
@ -348,12 +348,12 @@ module.exports = {
      ...breakpoints(theme('screens'))
    }),
    minHeight: {
-      '0': '0',
+      0: '0',
      full: '100%',
      screen: '100vh'
    },
    minWidth: {
-      '0': '0',
+      0: '0',
      full: '100%'
    },
    objectPosition: {
@ -368,28 +368,28 @@ module.exports = {
      top: 'top'
    },
    opacity: {
-      '0': '0',
-      '25': '0.25',
-      '50': '0.5',
-      '75': '0.75',
-      '100': '1'
+      0: '0',
+      25: '0.25',
+      50: '0.5',
+      75: '0.75',
+      100: '1'
    },
    order: {
      first: '-9999',
      last: '9999',
      none: '0',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7',
-      '8': '8',
-      '9': '9',
-      '10': '10',
-      '11': '11',
-      '12': '12'
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12'
    },
    padding: theme => theme('spacing'),
    placeholderColor: theme => theme('colors'),
@ -402,9 +402,9 @@ module.exports = {
      current: 'currentColor'
    },
    strokeWidth: {
-      '0': '0',
-      '1': '1',
-      '2': '2'
+      0: '0',
+      1: '1',
+      2: '2'
    },
    textColor: theme => theme('colors'),
    textOpacity: theme => theme('opacity'),
@ -442,28 +442,28 @@ module.exports = {
    }),
    zIndex: {
      auto: 'auto',
-      '0': '0',
-      '10': '10',
-      '20': '20',
-      '30': '30',
-      '40': '40',
-      '50': '50'
+      0: '0',
+      10: '10',
+      20: '20',
+      30: '30',
+      40: '40',
+      50: '50'
    },
    gap: theme => theme('spacing'),
    gridTemplateColumns: {
      none: 'none',
-      '1': 'repeat(1, minmax(0, 1fr))',
-      '2': 'repeat(2, minmax(0, 1fr))',
-      '3': 'repeat(3, minmax(0, 1fr))',
-      '4': 'repeat(4, minmax(0, 1fr))',
-      '5': 'repeat(5, minmax(0, 1fr))',
-      '6': 'repeat(6, minmax(0, 1fr))',
-      '7': 'repeat(7, minmax(0, 1fr))',
-      '8': 'repeat(8, minmax(0, 1fr))',
-      '9': 'repeat(9, minmax(0, 1fr))',
-      '10': 'repeat(10, minmax(0, 1fr))',
-      '11': 'repeat(11, minmax(0, 1fr))',
-      '12': 'repeat(12, minmax(0, 1fr))'
+      1: 'repeat(1, minmax(0, 1fr))',
+      2: 'repeat(2, minmax(0, 1fr))',
+      3: 'repeat(3, minmax(0, 1fr))',
+      4: 'repeat(4, minmax(0, 1fr))',
+      5: 'repeat(5, minmax(0, 1fr))',
+      6: 'repeat(6, minmax(0, 1fr))',
+      7: 'repeat(7, minmax(0, 1fr))',
+      8: 'repeat(8, minmax(0, 1fr))',
+      9: 'repeat(9, minmax(0, 1fr))',
+      10: 'repeat(10, minmax(0, 1fr))',
+      11: 'repeat(11, minmax(0, 1fr))',
+      12: 'repeat(12, minmax(0, 1fr))'
    },
    gridColumn: {
      auto: 'auto',
@ -482,44 +482,44 @@ module.exports = {
    },
    gridColumnStart: {
      auto: 'auto',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7',
-      '8': '8',
-      '9': '9',
-      '10': '10',
-      '11': '11',
-      '12': '12',
-      '13': '13'
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13'
    },
    gridColumnEnd: {
      auto: 'auto',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7',
-      '8': '8',
-      '9': '9',
-      '10': '10',
-      '11': '11',
-      '12': '12',
-      '13': '13'
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13'
    },
    gridTemplateRows: {
      none: 'none',
-      '1': 'repeat(1, minmax(0, 1fr))',
-      '2': 'repeat(2, minmax(0, 1fr))',
-      '3': 'repeat(3, minmax(0, 1fr))',
-      '4': 'repeat(4, minmax(0, 1fr))',
-      '5': 'repeat(5, minmax(0, 1fr))',
-      '6': 'repeat(6, minmax(0, 1fr))'
+      1: 'repeat(1, minmax(0, 1fr))',
+      2: 'repeat(2, minmax(0, 1fr))',
+      3: 'repeat(3, minmax(0, 1fr))',
+      4: 'repeat(4, minmax(0, 1fr))',
+      5: 'repeat(5, minmax(0, 1fr))',
+      6: 'repeat(6, minmax(0, 1fr))'
    },
    gridRow: {
      auto: 'auto',
@ -532,23 +532,23 @@ module.exports = {
    },
    gridRowStart: {
      auto: 'auto',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7'
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7'
    },
    gridRowEnd: {
      auto: 'auto',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7'
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7'
    },
    transformOrigin: {
      center: 'center',
@ -562,25 +562,25 @@ module.exports = {
      'top-left': 'top left'
    },
    scale: {
-      '0': '0',
-      '50': '.5',
-      '75': '.75',
-      '90': '.9',
-      '95': '.95',
-      '100': '1',
-      '105': '1.05',
-      '110': '1.1',
-      '125': '1.25',
-      '150': '1.5'
+      0: '0',
+      50: '.5',
+      75: '.75',
+      90: '.9',
+      95: '.95',
+      100: '1',
+      105: '1.05',
+      110: '1.1',
+      125: '1.25',
+      150: '1.5'
    },
    rotate: {
      '-180': '-180deg',
      '-90': '-90deg',
      '-45': '-45deg',
-      '0': '0',
-      '45': '45deg',
-      '90': '90deg',
-      '180': '180deg'
+      0: '0',
+      45: '45deg',
+      90: '90deg',
+      180: '180deg'
    },
    translate: (theme, { negative }) => ({
      ...theme('spacing'),
@ -594,10 +594,10 @@ module.exports = {
      '-12': '-12deg',
      '-6': '-6deg',
      '-3': '-3deg',
-      '0': '0',
-      '3': '3deg',
-      '6': '6deg',
-      '12': '12deg'
+      0: '0',
+      3: '3deg',
+      6: '6deg',
+      12: '12deg'
    },
    transitionProperty: {
      none: 'none',
@ -615,24 +615,24 @@ module.exports = {
      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)'
    },
    transitionDuration: {
-      '75': '75ms',
-      '100': '100ms',
-      '150': '150ms',
-      '200': '200ms',
-      '300': '300ms',
-      '500': '500ms',
-      '700': '700ms',
-      '1000': '1000ms'
+      75: '75ms',
+      100: '100ms',
+      150: '150ms',
+      200: '200ms',
+      300: '300ms',
+      500: '500ms',
+      700: '700ms',
+      1000: '1000ms'
    },
    transitionDelay: {
-      '75': '75ms',
-      '100': '100ms',
-      '150': '150ms',
-      '200': '200ms',
-      '300': '300ms',
-      '500': '500ms',
-      '700': '700ms',
-      '1000': '1000ms'
+      75: '75ms',
+      100: '100ms',
+      150: '150ms',
+      200: '200ms',
+      300: '300ms',
+      500: '500ms',
+      700: '700ms',
+      1000: '1000ms'
    },
    animation: {
      none: 'none',
--- a/vue.config.js
+++ b/vue.config.js
@ -1,6 +1,8 @@
 const pkg = require('./package.json')

-module.exports = {
+const { defineConfig } = require('@vue/cli-service')
+
+module.exports = defineConfig({
  publicPath: process.env.PUBLIC_PATH,

  chainWebpack: config => {
@ -24,4 +26,4 @@ module.exports = {
  lintOnSave: false,
  transpileDependencies: [],
  productionSourceMap: false
-}
+})