acomplish replacing Vue-cli with Vite

web/src/views/admin/Menu.vue

@@ -5,7 +5,13 @@
     </div>
 
     <el-row>
-      <el-table :data="items" :row-key="(row) => row.id" table-layout="auto" border style="width: 100%">
+      <el-table
+        :data="items"
+        :row-key="(row) => row.id"
+        table-layout="auto"
+        border
+        style="width: 100%"
+      >
         <el-table-column prop="name" label="菜单名称">
           <template #default="scope">
             <span class="sort" :data-id="scope.row.id">
@@ -51,7 +57,12 @@
           <template #label>
             <div class="label-title">
               开放注册
-              <el-tooltip effect="dark" content="可以填写 iconfont 图标名称也可以自己上传图片" raw-content placement="right">
+              <el-tooltip
+                effect="dark"
+                content="可以填写 iconfont 图标名称也可以自己上传图片"
+                raw-content
+                placement="right"
+              >
                 <el-icon>
                   <InfoFilled />
                 </el-icon>
@@ -89,49 +100,49 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
-import { httpGet, httpPost } from "@/utils/http";
-import { ElMessage } from "element-plus";
-import { dateFormat, removeArrayItem } from "@/utils/libs";
-import { InfoFilled, Plus, UploadFilled } from "@element-plus/icons-vue";
-import { Sortable } from "sortablejs";
-import Compressor from "compressorjs";
+import { httpGet, httpPost } from '@/utils/http'
+import { dateFormat, removeArrayItem } from '@/utils/libs'
+import { InfoFilled, Plus, UploadFilled } from '@element-plus/icons-vue'
+import Compressor from 'compressorjs'
+import { ElMessage } from 'element-plus'
+import { Sortable } from 'sortablejs'
+import { onMounted, reactive, ref } from 'vue'
 
 // 变量定义
-const items = ref([]);
-const item = ref({});
-const showDialog = ref(false);
-const title = ref("");
+const items = ref([])
+const item = ref({})
+const showDialog = ref(false)
+const title = ref('')
 const rules = reactive({
-  name: [{ required: true, message: "请输入菜单名称", trigger: "change" }],
-  icon: [{ required: true, message: "请上传菜单图标", trigger: "change" }],
-  url: [{ required: true, message: "请输入菜单地址", trigger: "change" }],
-});
-const loading = ref(true);
-const formRef = ref(null);
+  name: [{ required: true, message: '请输入菜单名称', trigger: 'change' }],
+  icon: [{ required: true, message: '请上传菜单图标', trigger: 'change' }],
+  url: [{ required: true, message: '请输入菜单地址', trigger: 'change' }],
+})
+const loading = ref(true)
+const formRef = ref(null)
 
 const fetchData = () => {
   // 获取数据
-  httpGet("/api/admin/menu/list")
+  httpGet('/api/admin/menu/list')
     .then((res) => {
       if (res.data) {
         // 初始化数据
-        const arr = res.data;
+        const arr = res.data
         for (let i = 0; i < arr.length; i++) {
-          arr[i].last_used_at = dateFormat(arr[i].last_used_at);
+          arr[i].last_used_at = dateFormat(arr[i].last_used_at)
         }
-        items.value = arr;
+        items.value = arr
       }
-      loading.value = false;
+      loading.value = false
     })
     .catch(() => {
-      ElMessage.error("获取数据失败");
-    });
-};
+      ElMessage.error('获取数据失败')
+    })
+}
 
 onMounted(() => {
-  const drawBodyWrapper = document.querySelector(".el-table__body tbody");
-  fetchData();
+  const drawBodyWrapper = document.querySelector('.el-table__body tbody')
+  fetchData()
 
   // 初始化拖动排序插件
   Sortable.create(drawBodyWrapper, {
@@ -139,80 +150,82 @@ onMounted(() => {
     animation: 500,
     onEnd({ newIndex, oldIndex, from }) {
       if (oldIndex === newIndex) {
-        return;
+        return
       }
 
-      const sortedData = Array.from(from.children).map((row) => row.querySelector(".sort").getAttribute("data-id"));
-      const ids = [];
-      const sorts = [];
+      const sortedData = Array.from(from.children).map((row) =>
+        row.querySelector('.sort').getAttribute('data-id')
+      )
+      const ids = []
+      const sorts = []
       sortedData.forEach((id, index) => {
-        ids.push(parseInt(id));
-        sorts.push(index + 1);
-        items.value[index].sort_num = index + 1;
-      });
+        ids.push(parseInt(id))
+        sorts.push(index + 1)
+        items.value[index].sort_num = index + 1
+      })
 
-      httpPost("/api/admin/menu/sort", { ids: ids, sorts: sorts }).catch((e) => {
-        ElMessage.error("排序失败：" + e.message);
-      });
+      httpPost('/api/admin/menu/sort', { ids: ids, sorts: sorts }).catch((e) => {
+        ElMessage.error('排序失败：' + e.message)
+      })
     },
-  });
-});
+  })
+})
 
 const add = function () {
-  title.value = "新增菜单";
-  showDialog.value = true;
-  item.value = {};
-};
+  title.value = '新增菜单'
+  showDialog.value = true
+  item.value = {}
+}
 
 const edit = function (row) {
-  title.value = "修改菜单";
-  showDialog.value = true;
-  item.value = row;
-};
+  title.value = '修改菜单'
+  showDialog.value = true
+  item.value = row
+}
 
 const save = function () {
   formRef.value.validate((valid) => {
     if (valid) {
-      showDialog.value = false;
+      showDialog.value = false
       if (!item.value.id) {
-        item.value.sort_num = items.value.length + 1;
+        item.value.sort_num = items.value.length + 1
       }
-      httpPost("/api/admin/menu/save", item.value)
+      httpPost('/api/admin/menu/save', item.value)
         .then(() => {
-          ElMessage.success("操作成功！");
-          fetchData();
+          ElMessage.success('操作成功！')
+          fetchData()
         })
         .catch((e) => {
-          ElMessage.error("操作失败，" + e.message);
-        });
+          ElMessage.error('操作失败，' + e.message)
+        })
     } else {
-      return false;
+      return false
     }
-  });
-};
+  })
+}
 
 const enable = (row) => {
-  httpPost("/api/admin/menu/enable", { id: row.id, enabled: row.enabled })
+  httpPost('/api/admin/menu/enable', { id: row.id, enabled: row.enabled })
     .then(() => {
-      ElMessage.success("操作成功！");
+      ElMessage.success('操作成功！')
     })
     .catch((e) => {
-      ElMessage.error("操作失败：" + e.message);
-    });
-};
+      ElMessage.error('操作失败：' + e.message)
+    })
+}
 
 const remove = function (row) {
-  httpGet("/api/admin/menu/remove?id=" + row.id)
+  httpGet('/api/admin/menu/remove?id=' + row.id)
     .then(() => {
-      ElMessage.success("删除成功！");
+      ElMessage.success('删除成功！')
       items.value = removeArrayItem(items.value, row, (v1, v2) => {
-        return v1.id === v2.id;
-      });
+        return v1.id === v2.id
+      })
     })
     .catch((e) => {
-      ElMessage.error("删除失败：" + e.message);
-    });
-};
+      ElMessage.error('删除失败：' + e.message)
+    })
+}
 
 // 图片上传
 const uploadImg = (file) => {
@@ -220,28 +233,28 @@ const uploadImg = (file) => {
   new Compressor(file.file, {
     quality: 0.6,
     success(result) {
-      const formData = new FormData();
-      formData.append("file", result, result.name);
+      const formData = new FormData()
+      formData.append('file', result, result.name)
       // 执行上传操作
-      httpPost("/api/admin/upload", formData)
+      httpPost('/api/admin/upload', formData)
         .then((res) => {
-          item.value.icon = res.data.url;
-          ElMessage.success("上传成功");
+          item.value.icon = res.data.url
+          ElMessage.success('上传成功')
         })
         .catch((e) => {
-          ElMessage.error("上传失败:" + e.message);
-        });
+          ElMessage.error('上传失败:' + e.message)
+        })
     },
     error(e) {
-      ElMessage.error("上传失败:" + e.message);
+      ElMessage.error('上传失败:' + e.message)
     },
-  });
-};
+  })
+}
 </script>
 
-<style lang="stylus">
-@import "@/assets/css/admin/form.styl"
-@import "@/assets/css/main.styl"
+<style lang="stylus" scoped>
+@import "../../assets/css/admin/form.styl"
+@import "../../assets/css/main.styl"
 .menu {
 
   .handle-box {