vue3环境搭建及使用

1、安装最新稳定版node.js  

下载地址：https://nodejs.org/zh-cn/download  （注：如果项目使用腾讯云即时通讯IM需要装node版本  node：  12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0 ，sass-loader 版本 ≤ 10.1.1）

2、npm安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装脚手架
cnpm install -g @vue/cli

4、创建vue3项目
npm init vue@latest (按需求选择)

1、父组件调用子组件方法
父组件：

<template>
    <user-dialog ref="userDialog" @resetClick="queryBtn({ page: 1, size: 10 })"></user-dialog>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    const userDialog:any = ref(null)
    userDialog.value.openDialog();
    userDialog.value.gridTitle = "添加";
</script>

子组件：
 

<script lang="ts" setup>
import { ref } from 'vue'
const gridTitle = ref("")

const openDialog = () => {
    dialogTableVisible.value = true;
}
//子组件通过defineExpose暴露对象和方法 
defineExpose({
    openDialog,
    gridTitle
});
</script>

2、定义接口axios,
在main.ts引入封装的接口文件，然后使用provide挂载到vue实例，然后在需要的页面通过
main.ts:

import article from './request/article';
const app = createApp(App)
app.provide('$axios', article).mount('#app')

页面使用

<script lang="ts" setup>
import { inject } from 'vue'
const $axios: any = inject('$axios') 
//使用方法如下
$axios.userList(param)
        .then((res: any) => {
            const { code, msg, data } = res.data;
        })
        .catch((err: any) => {
            console.log(err);
            loading.value = false;
        });
</script>