vite+typescript从入门到实战(三）-阿里云开发者社区

vite+typescript从入门到实战(二）：https://developer.aliyun.com/article/1483572

vite中安装sass 预处理器

npm install --save-dev sass

三、关于sass的“.....Using / for division.....”报错

这是由于sass版本导致的问题，不影响项目编译，解决方法：
1.将 “/”的位置改为 match.dev(arg1,arg2)

@use "sass:math"; /* 头部不要忘记加入这个，不然会报错找不到math */
     
/* 将这个 */
@return ($px/$rem)+rem;
/* 改为下边这个 */
@return match.div($px,$rem)+rem;

2.使用官方sass-migrator工具

    $ npm install -g sass-migrator

环境变量文件

.env

# port 端口号
VITE_PORT = 8888

# open 运行 npm run dev 时自动打开浏览器
VITE_OPEN = false

# public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可
VITE_PUBLIC_PATH = /vue-next-admin-preview/

.env.development

# 本地环境
ENV = 'development'

# 本地环境接口地址
VITE_API_URL = 'http://localhost:8888/'

.env.production

# 线上环境
ENV = 'production'

# 线上环境接口地址
VITE_API_URL = 'https://lyt-top.gitee.io/vue-next-admin-preview/'

组件传值

父传子

父组件：

<template>
   <div class="son">
     <son1 :toChild="toChild" />
   </div>
</template>
<script>
    import { reactive, toRefs } from 'vue'
    import son1 from './branch/son1.vue'
    export default {
      components: {
        son1
      },
      setup(props,context) {
        const data = reactive({
          toChild: '传递数据1'
        })
     
        return {
          ...toRefs(data)
        }
      }
    }
</script>

子组件

    // 第一种-------------------配置setup-------------------
    <script>
    export default {
      props: {  //这里必须写，不然setup中的props也拿不到
        toChild: {
          type: String,
          default: '无数据'
        }
      },
      setup(props, context) {
        console.log(props.toChild)  //  传递数据1
        return {};
      },
    };
    </script>
     
    // 第二种------------------setup语法糖--------------------
    <script setup>
      const props = defineProps({
        name: {
          type: String,
          default: ''
        }
      })
    </script>

 注意：defineProps只能直接暴露在setup下，不能放在回调中。不需要引入，直接调用即可

子传父

子组件

    // 第一种-----------------配置setup---------------------
    <script>
    import { ref } from "vue";
    export default {
      setup(props, context) {
        const { emit } = context
        const msg = ref('999')
        // 子传父
        const send = () => {
          emit('sonSend',msg)
        }
        return {
          msg,
          send
        };
      },
    };
    </script>
     
    // 第二种-----------------setup语法糖----------------------
    <script setup>
      const emit = defineEmits(['sonSend'])
      const btnClick = () => {
        emit('sonSend', '999')
      }
    </script>

注意：defineEmits只能直接暴露在setup下，不能放在回调中。不需要引入，直接调用即可.同defineProps

父组件

    <template>
      <div class="son">
        <son1 @sonSend="sonSend" />  //监听子组件的自定义事件
      </div>
    </template>
    <script>
    import son1 from './branch/son1.vue'
    export default {
      components: {
        son1
      },
      setup(props,context) {
        const sonSend = (val) => {
          console.log(val.value)  // 999
        }
        return {
          sonSend
        }
      }
    }
    </script>

兄弟之间传值

vue2 我们通过EventBus new Vue的方式来实现。Vue3 中没有了 EventBus 跨组件通信，但是现在有了一个替代的方案 mitt.js，原理还是 EventBus

1.安装mitt

 npm install mitt --save

新建 bus.js

//bus.js 
    import mitt from 'mitt'
    const bus = mitt()
    export default bus

然后直接引用就可以了

兄弟组件1

      <template>
        <button @click="btn">我是兄弟组件b</button>
      </template>
     
      import bus from '@/utils/bus'
      function btn() {
        bus.emit("fromBother", '传给好兄弟'); //参数一为自定义事件名称，参数二是传递的参数
      }
      return{
          btn
      }

兄弟组件2

    import bus from '@/utils/bus'
    import { onUnmounted } from "vue"
     
    setup(props,context) {
      function fromBother(val) {
        console.log(val,'val--->>>兄弟传过来')
      }
      onMounted(() => {
        bus.on('fromBother',fromBother)   //监听兄弟组件传过来的值
      })
      onUnmounted(() => {  //销毁的时候 解绑
        bus.off('fromBother',fromBother)
      })
      return {}
    }

封装request.ts

import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Session } from '/@/utils/storage';

// 配置新建一个 axios 实例
const service = axios.create({
  baseURL: import.meta.env.VITE_API_URL as any,
  timeout: 50000,
  headers: { 'Content-Type': 'application/json' },
});

// 添加请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么 token
    if (Session.get('token')) {
      config.headers.common['Authorization'] = `${Session.get('token')}`;
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
service.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    const res = response.data;
    if (res.code && res.code !== 0) {
      // `token` 过期或者账号已在别处登录
      if (res.code === 401 || res.code === 4001) {
        Session.clear(); // 清除浏览器全部临时缓存
        window.location.href = '/'; // 去登录页
        ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
          .then(() => {})
          .catch(() => {});
      }
      return Promise.reject(service.interceptors.response);
    } else {
      return response.data;
    }
  },
  (error) => {
    // 对响应错误做点什么
    if (error.message.indexOf('timeout') != -1) {
      ElMessage.error('网络超时');
    } else if (error.message == 'Network Error') {
      ElMessage.error('网络连接错误');
    } else {
      if (error.response.data) ElMessage.error(error.response.statusText);
      else ElMessage.error('接口路径找不到');
    }
    return Promise.reject(error);
  }
);

// 导出 axios 实例
export default service;

使用request.ts

import request from '/@/utils/request';

/**
 * 用户登录
 * @param params 要传的参数值
 * @returns 返回接口数据
 */
export const signIn = (params: object): Object => request({ url: '/user/signIn', method: 'post', data: params })

getCurrentInstance 方法

1、概述：一个很重要的方法，获取当前组件的实例、上下文来操作router和vuex等。
2、使用：由vue提供，按需引入：import { getCurrentInstance} from 'vue';

import { getCurrentInstance } from 'vue';
// 获取当前组件实例
const instance = getCurrentInstance();

// 获取当前组件的上下文，下面两种方式都能获取到组件的上下文。
const { ctx }  = getCurrentInstance();  //  方式一，这种方式只能在开发环境下使用，生产环境下的ctx将访问不到
const { proxy }  = getCurrentInstance();  //  方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐）
// ctx 中包含了组件中由ref和reactive创建的响应式数据对象,以及以下对象及方法;
proxy.$attrs
proxy.$data
proxy.$el
proxy.$emit
proxy.$forceUpdate
proxy.$nextTick
proxy.$options
proxy.$parent
proxy.$props
proxy.$refs
proxy.$root
proxy.$slots
proxy.$watch

使用 proxy

const { proxy } = getCurrentInstance() as any;

proxy.mittBus.emit('restoreDefault');

proxy.mittBus.on('setSendColumnsChildren', (res: any) => {
  state.menuList = res.children;
});

provide和inject

provide和inject，他们的使用时成组合使用，用于从父级组件向下级的子组件，孙组件传递值。
1、概述：实现嵌套组件树形数据传递与接收。
2、使用：由vue提供，按需引入：

import { provide, inject } from 'vue';

import { provide, inject } from 'vue'
// 父组件注入
const component = {
  setup() {
    provide('name', 'zhagn_san');
    // 如果是需要注入多个值则重复使用provide即可
  };
};
// 子组件接收
const children = {
  setup() {
    // inject的第二个参数为没有接收到注入的数据时的默认返回值，如果没有，则返回undefined
    const user = inject('name', 'li_si');
    // 需要接收多个注入的值也是重复使用inject即可
    return { user };
  };
};

4、实例：再实际使用过程中，往往我们需要将注入的值实现响应式变化，则需要注入响应式

// 父组件注入
const component = {
  setup() {
    const user = reactive({ name: 'zhagn_san', age: 20 });
    provide('user', user);
  };
};
// 子组件接收后，如果父组件中的user发生了改变，则子组件中也会发生响应式变化
const children = {
  setup() {
    const user = inject('user', {});
    return { user };
  };
};

5、注意：不建议在注入时对响应式变量进行改变（在子组件中改变注入的值），因为此操作会改变Vue的单向数据流。建议采用注入改变其值的方法来对响应式变量进行改变。

import { reactive, provide, inject } from 'vue'
// 父组件注入
const component = {
  setup() {
    const user = reactive({ name: 'zhagn_san', age: 20 });
    function changeHandler() {
        user.age = 30;
    }
    provide('user', user);
   provide('changeHandler', changeHandler);
  };
};
// 子组件接收后，通过调用注入的方法来对响应式变量进行改变
const children = {
  setup() {
    const user = inject('user', {});
    const changeHandler = inject('changeHandler');
    return { user, changeHandler };
  };
};

emits方法

1、概述：当前组件的通过emit的事件列表
2、类型：Array|Object
3、作用：Vue3.0中使用emit发起事件时会要求当前组件记录emit事件（没有则控制台会抛出警告）。
3、用途：用于记录当前组件emit的事件，当为对象时，则可以验证传入的值是否有效。

setup(prop, { emit }) {
    const changeOne = val => {
        emit('on-changeOne', val);
    };
    const changeTwo  = val => {
        emit('on-changeTwo', val);
    };
}

数组用法

export default {
    emits:['on-changeOne', 'on-changeTwo'],
    setup() {...}
}

对象用法，当emits为对象时，可以验证事件中的参数是否有效

export default {
    emits:{
        click: null,
        'on-changeOne': payload => {
            if(...) {
                return true; // 验证通过
            }
            console.warn('验证失败！')
            return false; // 验证失败，控制台打印vue警告及“验证失败！”警告
        },
        'on-changeTwo': payload => {...}
    },
    setup() {...}
}
// 当验证函数中没有返回值return时，默认返回true

emits无论是数组或者对象用法最终都会将事件给传递出去，数组或对象的使用只是为了记录实例中的emit事件，或者是验证事件中的参数。

参考文献

vite2 + Vue3 中组件传值
https://blog.csdn.net/m0_51431448/article/details/122689619

在vue3中使用mitt,达到evenbus的效果
https://www.cnblogs.com/cn-oldboy/p/15791920.html

vite 安装及创建项目
https://www.jianshu.com/p/3178972c6815

（十四）Vue3.x核心之getCurrentInstance
https://www.jianshu.com/p/5558cadd10b9

Vue3.x中的emits选项
https://www.jianshu.com/p/2c9a08e9a8c1

vite+typescript从入门到实战(三）