vue3+ts后台管理系统d1

项目初始化

npm create vite
bite.config.ts配置一些代理

• 项目配置
  eslint- npm init @eslint/config@latest ->语法校验
  //@ts-ignore 忽略当前文件ts类型的检测否则打包失败
  开发时文件与文件关系可能很复杂，所以需要配置src别名

• svg图标封装使用
  属性务必#icon-名称

<template>
  <svg style="width: 30px; height: 30px">
    <use :xlink:href="'#icon-' + name" :fill="color"></use>
  </svg>
</template>

<script setup lang="ts">
defineProps({
  color: {
    type: String,
    default: "",
  },
  name: String,
});
</script>

其他组件import SvgIcon from ..即可使用

- 自定义插件实现全局组件

//引入项目中全部的全局组件
import SvgIcon from "./SvgIcon/index.vue";
import Pagination from "./Pagination/index.vue";
//全局对象
const allGlobalComponent = { SvgIcon, Pagination };
// console.log(Object.keys(allGlobalComponent));

export default {
  //方法必须叫install
  install(app: any) {
    //注册项目全部的全局组件
    Object.keys(allGlobalComponent).forEach((key) => {
      app.component(
        key,
        allGlobalComponent[key as keyof typeof allGlobalComponent]
      );
    });
  },
};

在main.ts中调用该插件

import globalComponent from "./components";
app.use(globalComponent); //便会触发index.ts中的install方法

• axios
  处理网络请求、处理拦截器