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>