feat:更新

src/App.vue

@@ -1,5 +1,7 @@
 <template>
-  <router-view />
+  <div id="app">
+    <router-view />
+  </div>
 </template>
 
 <style lang="scss">

src/main.js

@@ -1,6 +1,15 @@
-import { createApp } from "vue";
+import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import Antd from "ant-design-vue";
+import "ant-design-vue/dist/antd.css";
 
-createApp(App).use(store).use(router).mount("#app");
+Vue.config.productionTip = false;
+Vue.use(Antd);
+
+new Vue({
+    router,
+    store,
+    render: (h) => h(App),
+}).$mount("#app");

src/router/index.js

@@ -1,26 +1,28 @@
-import { createRouter, createWebHashHistory } from "vue-router";
-import Home from "../views/Home.vue";
+import Vue from "vue";
+import VueRouter from "vue-router";
+// import Home from "../views/Home.vue";
+
+Vue.use(VueRouter);
 
 const routes = [
-  {
-    path: "/",
-    name: "Home",
-    component: Home,
-  },
-  {
-    path: "/about",
-    name: "About",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue"),
-  },
+    // {
+    //   path: "/",
+    //   name: "Home",
+    //   component: Home,
+    // },
+    {
+        path: "/",
+        name: "About",
+        // route level code-splitting
+        // this generates a separate chunk (about.[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () =>
+            import ( /* webpackChunkName: "about" */ "../views/About.vue"),
+    },
 ];
 
-const router = createRouter({
-  history: createWebHashHistory(),
-  routes,
+const router = new VueRouter({
+    routes,
 });
 
-export default router;
+export default router;

src/store/index.js

@@ -1,6 +1,9 @@
-import { createStore } from "vuex";
+import Vue from "vue";
+import Vuex from "vuex";
 
-export default createStore({
+Vue.use(Vuex);
+
+export default new Vuex.Store({
   state: {},
   mutations: {},
   actions: {},

src/views/About.vue

@@ -1,5 +1,34 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <a-upload-dragger
+      name="file"
+      :multiple="true"
+      @change="handleChange"
+      @beforeUpload="beforeUpload"
+    >
+      <p class="ant-upload-drag-icon">
+        <a-icon type="inbox" />
+      </p>
+      <p class="ant-upload-text">Click or drag file to this area to upload</p>
+      <p class="ant-upload-hint">
+        Support for a single or bulk upload. Strictly prohibit from uploading
+        company data or other band files
+      </p>
+    </a-upload-dragger>
   </div>
 </template>
+
+<script>
+export default {
+  name: "About",
+  methods: {
+    handleChange(info) {
+      console.log(info);
+    },
+    beforeUpload(event) {
+      console.log(event);
+      return false;
+    },
+  },
+};
+</script>