相关文章推荐
儒雅的钢笔  ·  Unreal4 C++ ...·  1 年前    · 
爱笑的日记本  ·  jQuery.parseJSON() ...·  2 年前    · 
  • 这个@types/node 是类型声明,因为有些第三方包不是ts写的,这种第三方包无法通过typescript编译, typescript提供了两种解决方案:第一使用@types 提供的类型声明文件,第二是自己编写.d.ts类型声明文件; 好消息是@types提供了大部分主流包的声明文件。
  • tsconfig.json文件
  • "compilerOptions" : { "paths" : { //用于设置模块名称基于baseUrl的路径映射关系 解决这种通过'@'导入文件的问题 import request from "@/utils/request" "@/*" : [ "./src/*" "typeRoots" : [ "./typings" ] , //让Typescript编译器 在指定的该路径查找 声明文件 "types" : [ "jquery" ] //TypeScript 编译器会默认引入typeRoot下所有的声明文件,指定types后,只引入指定的模块

    .d.ts声明文件的知识 declare module 扩展模块 它可以用来扩展原有模块的类型 export namespace 导出(含有子属性的)对象 ,namespace是命名空间,用来避免重名的 declare var 声明全局变量 declare function 声明全局方法 declare class 声明全局类 declare enum 声明全局枚举类型 需要注意的是,声明语句中只能定义类型,切勿在声明语句中定义具体的实现

    .d.ts文件内容 例子 declare const jQuery: (selector: string) => any;//declare var 并没有真的定义一个变量,只是定义了全局变量 jQuery 的类型 declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false;

  • const floorStore = useFloorStore(); const { floorIdAfter, selFloorId, searchFloorId } = storeToRefs(floorStore); //这是提取useFloorStore值的有效方式,可以获取state、getters的值,并且保持响应式
  • 改变pinia值的方式有以下两种 第一种 调用action 改变值:floorStore.setSelFloorId("66"); 第二种 直接改变,用 p a t c h f l o o r S t o r e . patch floorStore. patch({ selFloorId: "88",
  • 检测值发生变化的两种方式
    //订阅模式
    floorStore.$subscribe((mutation, state) => {
        console.log("floorStore.$subscribe--state", state.selFloorId);
    //监听模式
    watch(floorStore.$state, (state) => {
    
  • 新建文件.env.zhijiang,在文件中定义了 VITE_BASE_API='/zhijiang' VITE_TARGET_HOST='http://192.168.0.222:58008',
  • 在 package.json文件中,配置脚本 「"dev:zhijiang": "vite serve --mode zhijiang"」,
  • 在终端执行命令 npm run dev:zhijiang 就可以指定环境,加载指定环境变量(dotenv的帮助)。
  • 在src的代码中 通过 import.meta.env.VITE_BASE_API 可以读取该环境变量值
  • 在request.ts 文件中,根据不同的环境获取不同的VITE_BASE_API,设置为baseURL: const service = axios.create({ baseURL: import.meta.env.VITE_BASE_API, timeout: 99999,
  • 在vite.config.ts文件中 配置不同的 proxy,'/zhijiang'、'/borui' 等对应的,就可以了。
  • vue3的 hooks思想 举例子一个经典的hooks用法

    //useCouter.ts
    import { ref, computed } from "vue";
    export default function () {
        const counter = ref(0);
        const doubleCounter = computed(() => {
            return counter.value * 2;
        const increment = () => counter.value++;
        const decrement = () => counter.value--;
        return { counter, doubleCounter, increment, decrement };
    
    //index.vue文件
    setup () {
        // counter
        const { counter, doubleCounter, increment, decrement } = useCounter();//获取到后 就可以直接用了
        return {
        doubleCounter,
        increment,
        decrement,
      
    分类:
    前端
  •