常见问题

//  nuxt.config.ts
  icon: {
    provider: "none",
    customCollections: [
      {
        prefix: "ai",
        dir: "./app/assets/icons"
      }
    ]
  },

export default defineConfig({
  // 生产环境打包配置
  build: {
    chunkSizeWarningLimit: 1000,
    rollupOptions: {
      // 将打包出来的文件，拆分成多个小文件
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        }
      }
    }
  }
});

const formData = new FormData();
formData.append("scene", "sqlite");
formData.append("file", chunk);
formData.append("index", `${index}`);
formData.append("total", `${total}`);
formData.append("name", name);
formData.append("ext", "db");

formData.forEach((value, key) => {
  console.log(key, value);
});

declare interface Window {
  tinyMce: any;
}

"suppressImplicitAnyIndexErrors": true

interface Myobject {
  [key: string]: boolean; // 字段扩展声明
}

// vant
import "vant/es/button/style";

// element-plus
import "element-plus/es/components/button/style/css";

// 删除以下打包拆分
build: {
    rollupOptions: {
      // 将打包出来的文件，拆分成多个小文件
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        }
      }
    }
  }

div {
  -webkit-user-select: none; /*谷歌 /Chrome*/
  -moz-user-select: none; /*火狐/Firefox*/
  -ms-user-select: none; /*IE 10+*/
  user-select: none;
}

<template>
  <van-image src="url" class="w-full" />
</template>

<script setup lang="ts">
const url = new URL("./assets/image.png", import.meta.url).href;
</script>

<template>
  <van-image :src="require('./image.png')" />
</template>

<template>
  <count-down time="60000" />

  <van-dialog v-model:show="show" title="标题" show-cancel-button>
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
  <van-dialog>
</template>

<script lang="ts" setup>
import { CountDown，Dialog } from 'vant';
 const VanDialog = Dialog.Component;

const show = ref(true);
</script>

.el-button--success.is-disabled {
  --el-button-disabled-bg-color: #fff;
  --el-button-disabled-border-color: #ccc;
}

<template>
  <el-tree
    :data="departmentTree"
    show-checkbox
    ref="treeRef"
    @check-change="handleCheckChange"
    node-key="sid"
    default-expand-all
    :expand-on-click-node="false"
    :props="{ class: customNodeClass, label: customLabel }"
  />
</template>

<script lang="ts" setup>
import type Node from "element-plus/es/components/tree/src/model/node";

// 根据数据：如果当前节点的数据有staffId 表示当前节点应该渲染员工名字，否则渲染部门名字
const customLabel = (data: any) => {
  if (data.staffId) {
    return data.staffName;
  }
  return data.name;
};

// 根据层级：如果当前节点属于第一级，...
const customLabel = (data: any, node: Node) => {
  if (node.level === 1) {
    return "xxx";
  }
};
</script>

<template>
  <!-- value用reactive定义好像有问题？ -->
  <el-select v-model="value" value-key="id">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.label"
      :value="item"
    />
  </el-select>
</template>

<template>
  <!-- toggleDark() -->
  <button @click="toggleDark">
    {{ isDark ? "Dark" : "Light" }}
  </button>
</template>

<script setup lang="ts">
import { useDark, useToggle } from "@vueuse/core";

const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>

// compiler-vue.d.ts

import { AxiosRequestConfig } from "axios";

declare module "axios" {
  interface AxiosInstance {
    (config: AxiosRequestConfig): Promise<any>;
  }
}

  routes: [
    {
      path: "/",
      redirect: "/login"
    },
    {
      path: "/login",
      name: "login",
      component: () => import("@/views/login/login.vue")
    },
    //  url为 /map 会显示PageLayout及子路由map
    //  虽然输入 / 重定向到 login ，但是输入 /map 会进入map
    {
      path: "/",
      component: PageLayout,
      redirect: "/map",
      children: [
        {
        path: "map",
        component: () => import("@/views/map/index.vue")
        }
      ]
    }

const getUserList = async () => {
  const res: any = await userList({});
  state.userList = res;
};

setTimeout(() => {}, 0);

const array = [1, 2, 3, 4];
array.forEach((ele) => {
  ele = ele * 3;
});
console.log(array); // [1,2,3,4]

const objArr = [
  {
    name: "wxw",
    age: 22
  },
  {
    name: "wxw2",
    age: 33
  }
];
objArr.forEach((ele) => {
  if (ele.name === "wxw2") {
    ele.age = 88;
  }
});
console.log(objArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 88}]

const changeItemArr = [
  {
    name: "wxw",
    age: 22
  },
  {
    name: "wxw2",
    age: 33
  }
];
changeItemArr.forEach((ele) => {
  if (ele.name === "wxw2") {
    ele = {
      name: "change",
      age: 77
    };
  }
});
console.log(changeItemArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 33}]

// 对象的键可以是数字、字符串、变量、symbol，但是都会被转化为字符串
const xx = Symbol("xx");

const name = {
  1: "小李",
  2: "小虞",
  3: "张三",
  A: "aa",
  [xx]: "王五"
};
console.log(name[1]); // 小李
console.log(name["3"]); // 张三
console.log(name["A"]); // aa
console.log(name.A); // aa
console.log(name[xx]); // 王五

.my-dialog {
    :deep(.el-dialog__header) {
        border-bottom: 1px solid #d8d8d8;
    }
}

try {
  // ...
} catch (error) {
  throw new Error(error);
}

 "compilerOptions": {
  //  ...
    "useUnknownInCatchVariables": false,
  //  ...
  }

// iframe
window.parent.postMessage(data, "*");

//父级
window.addEventListener(
  "message",
  function (e) {
    console.log(e);
  },
  false
);

(top as Window).window.location.href = "url";

/* 去除浏览器input自动填充的默认样式 */
input:-internal-autofill-selected {
    /* 这里#fff是底色 */
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    -webkit-text-fill-color: #333;
}