vue3+vite+dotenv+pinia

1. 初始化 npm init vite@latest
2. 安装 sass npm install sass node-sass sass-loader -D
3. 安装 path npm install path -D
4. 安装类型声明包 npm install -D @types/node

• 这个@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;

5. 路由 npm install -D vue-router@4

6. 组件 npm install element-plus --save

7. 安装axios dotenv js-cookie npm install axios npm install dotenv

8. pinia 数据存储的使用

   1. const floorStore = useFloorStore(); const { floorIdAfter, selFloorId, searchFloorId } = storeToRefs(floorStore); //这是提取useFloorStore值的有效方式，可以获取state、getters的值，并且保持响应式
   2. 改变pinia值的方式有以下两种 第一种 调用action 改变值：floorStore.setSelFloorId("66"); 第二种 直接改变，用$patch floorStore.$patch({ selFloorId: "88", });
   3. 检测值发生变化的两种方式

      //订阅模式
      floorStore.$subscribe((mutation, state) => {
          console.log("floorStore.$subscribe--state", state.selFloorId);
      });
      //监听模式
      watch(floorStore.$state, (state) => {
      });
      

9. 定义环境变量的过程

   1. 安装dotenv帮助我们加载指定的环境变量，
   2. 新建文件.env.zhijiang，在文件中定义了 VITE_BASE_API='/zhijiang' VITE_TARGET_HOST='http://192.168.0.222:58008'，
   3. 在 package.json文件中，配置脚本 「"dev:zhijiang": "vite serve --mode zhijiang"」，
   4. 在终端执行命令 npm run dev:zhijiang 就可以指定环境，加载指定环境变量（dotenv的帮助）。
   5. 在src的代码中 通过 import.meta.env.VITE_BASE_API 可以读取该环境变量值
   6. 在request.ts 文件中，根据不同的环境获取不同的VITE_BASE_API，设置为baseURL: const service = axios.create({ baseURL: import.meta.env.VITE_BASE_API, timeout: 99999, });
   7. 在vite.config.ts文件中 配置不同的 proxy，'/zhijiang'、'/borui' 等对应的，就可以了。

10. 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,
        }
    }