ts项目建立中出现的问题

1. 找不到模块“path”或其相应的类型声明。

npm install @types/node --save-dev

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: "/",
  server: {
    host: "0.0.0.0"
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')//设置别名
    }
  },
})

2. 创建路由提示 --找不到模块“@/views/XXX.vue”或其相应的类型声明。

出现这个问题的原因大概就是：ts只支持导出导入模块，但是vue不是模块，我们需要申明一下vue是个模块
在vite-env.d.ts中写入

/// <reference types="vite/client" />
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

也可以参考：http://t.csdn.cn/36V2B

3. 数据大屏全屏切换

<template>
  <div id="content" class="h-full bg" style="">
    <div>
      <div class="text-3xl text-center text">
        数据大屏
        <div class="text-xl float-right mt-2 text" @click="togggle">
          {{ isFullscreen ? "退出全屏" : "打开全屏" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";

//判断浏览器是否支持全屏
let isSupport = document.fullscreenEnabled;
//给全屏一个判断状态,全屏时为true，窗口为false
let isFullscreen = ref(false);
//监听全屏状态，在浏览器支持全屏的条件下，当前元素是否是全屏
//document.fullscreenElement 当前展示为全屏模式的元素
const screenchange = () => {
  if (isSupport) {
    document.fullscreenElement
      ? (isFullscreen.value = true)
      : (isFullscreen.value = false);
  }
};
//注册监听
document.addEventListener("fullscreenchange", screenchange, true);

//点击 切换屏幕状态
const togggle = () => {
  const element: HTMLElement = document.getElementById(
    "content"
  ) as HTMLElement; //指定全屏区域元素
  if (isSupport) {
    if (isFullscreen.value) {
      //document.exitFullscreen()退出全屏模式的方法
      document.exitFullscreen();
      isFullscreen.value = false;
    } else {
      //requestFullscreen(),请求全屏的方法
      element.requestFullscreen();
      isFullscreen.value = true;
    }
  }
};
</script>

下载功能

原理：创建一个节点，触发该节点，最后删除节点。
参考文章：https://blog.csdn.net/weixin_45397318/article/details/121514349
方法1：

export const downLoad = (url: string) => {
  const iframe = document.createElement("iframe");
  iframe.src = url;
  iframe.style.display = "none"; // 防止影响页面
  iframe.style.height = "0"; // 防止影响页面
  document.body.appendChild(iframe); // 必写，iframe挂在到dom树上才会发请求
  // 定时删除节点
  setTimeout(() => {
    document.body.removeChild(iframe);
  }, 2000);
};

方法2：

export const downLoad1 = (url: string) => {
  const link = document.createElement('a') // 创建一个 a 标签用来模拟点击事件	
  link.style.display = 'none'
  link.href = url
  link.setAttribute('download', '文件名')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

对象拼接

const aaa = Object.assign(对象1,对象2 );

使用element plus部分样式引入后存在问题

在 tsconfig.json 中 include 引入 auto-imports.d.ts 这个element-plus 自动引入组件的ts文件

TS中的!和?用法

1. 属性或参数中使用 ？：表示该属性或参数为可选项

2. 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop

3. 变量后使用 ！：表示类型推断排除null、undefined

时间

let date = +new Date()  // 1712628507312  -- 毫秒值
let date = new Date().toLocaleString('chinese',{hour12:false})  // 2024/4/9 10:11:14