diff --git "a/\345\256\236\347\224\250\345\260\217\345\267\245\345\205\267/20240120.jpg" "b/\345\256\236\347\224\250\345\260\217\345\267\245\345\205\267/20240120.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..26d39c1ae3a41307674c819ffbe3690dbaac12db
Binary files /dev/null and "b/\345\256\236\347\224\250\345\260\217\345\267\245\345\205\267/20240120.jpg" differ
diff --git "a/\345\256\236\347\224\250\345\260\217\345\267\245\345\205\267/vue\351\246\226\351\241\265\350\265\204\346\272\220\350\277\233\345\272\246\346\235\241" "b/\345\256\236\347\224\250\345\260\217\345\267\245\345\205\267/vue\351\246\226\351\241\265\350\265\204\346\272\220\350\277\233\345\272\246\346\235\241"
new file mode 100644
index 0000000000000000000000000000000000000000..0925ea0f0756fe9515341b1518ba6c5418106102
--- /dev/null
+++ "b/\345\256\236\347\224\250\345\260\217\345\267\245\345\205\267/vue\351\246\226\351\241\265\350\265\204\346\272\220\350\277\233\345\272\246\346\235\241"
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <style>
+      #assets-loading {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        color: #000;
+        font-size: 18px;
+        font-weight: 900;
+      }
+      #assets-loading .assets-loading-title {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+      }
+      #assets-loading .assets-loading-title > div:nth-child(2) {
+        border-radius: 50%;
+        border: 2px solid #000;
+        width: 18px;
+        height: 18px;
+        margin-left: 10px;
+        border-left: 2px solid transparent;
+        animation: rotate 2s linear infinite;
+        transition: 0.5s;
+      }
+      @keyframes rotate {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+      #assets-loading .assets-loading-time {
+        margin-top: 10px;
+        width: 300px;
+        height: 20px;
+        border-radius: 10px;
+        border: 1px solid #999;
+        overflow: hidden;
+        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+      }
+      #assets-loading-time-center {
+        width: 10px;
+        border-radius: 30px;
+        margin-left: -5px;
+        height: 100%;
+        background-color: #999;
+      }
+    </style>
+    <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
+    <link rel="stylesheet" href="<%=css%>" />
+    <% } %>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to
+        continue.
+      </strong>
+    </noscript>
+    <div id="app"></div>
+    <div id="assets-loading">
+      <div class="assets-loading-title">
+        <div>资源加载中</div>
+        <div></div>
+      </div>
+      <div class="assets-loading-time">
+        <div id="assets-loading-time-center"></div>
+      </div>
+    </div>
+    <% var jsCount = htmlWebpackPlugin.options.cdn.js.length; %> <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
+    <script src="<%=js%>"></script>
+    <script>
+      var assetsLoadingTimeCenter = document.getElementById('assets-loading-time-center')
+      assetsLoadingTimeCenter.style.width = assetsLoadingTimeCenter.clientWidth + 300 / '<%= jsCount %>' + 'px'
+    </script>
+    <% } %>
+  </body>
+</html>
