Vue3问题记录

使用elementPlus消息提示

第一种方法

先在组件中引入ElMessage

import { ElMessage } from "element-plus";

然后使用

ElMessage.success('提交成功')

第二种方法

在组件上添加如下代码

const currentInstance = getCurrentInstance()
const { $message } = currentInstance.appContext.config.globalProperties

使用时这么写：

const handleLogin = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      $message.success('提交成功')
    } else {
      $message.error('提交失败')
      return false
    }
  })
}

第二种写法与之前vue2更类似，但多了一步引入的过程

全局挂载axios以及跨域

第一种方法

参考vue2的写法，前端引用时复杂一点

main.js中的写法

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@/styles/index.scss'
import SvgIcon from '@/icons'
import axios from 'axios'

const app = createApp(App)
axios.defaults.baseURL = 'http://127.0.0.1:3011/api/'
app.config.globalProperties.$axios = axios

SvgIcon(app)
app.use(store).use(router).use(ElementPlus).mount('#app')

这里跨域与vue2差不多，axios这里的不用改

组件上使用axios时变麻烦了，如下

先引入

const currentInstance = getCurrentInstance()
const { $axios, $message} = currentInstance.appContext.config.globalProperties

然后使用

const handleLogin = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      $axios.post('/user/login', form)
      .then(res => {
        // console.log(res.data)
        $message.success('提交成功')
        router.push('/')
      })
      // $message.success('提交成功')
    } else {
      $message.error('提交失败')
      return false
    }
  })

第二种写法（推荐）

使用VueAxios插件

main.js中引入

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from "vue-axios";

const app = createApp(App)
app.use(VueAxios, axios)

// app.config.globalProperties.$axios = axios

app.use(store).use(router).mount('#app')

核心代码

import VueAxios from "vue-axios";

app.use(VueAxios, axios)

前端页面可以直接用

如下：

getUser() {
      this.axios.post('http://127.0.0.1:3011/api/user/login', {
        username: 'admin',
        password: "123456",
      })
      .then(res => {
        console.log(res.data)
      })
    }

写法稍微有点不一样，没有使用$

第三种写法

2022-12-15日更新
在新写项目时，发现第二种方法不好用了，排查了半天没排查出来，现在进行第三种写法
main.js文件

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { naive, createDiscreteApi } from "naive-ui";
import { createPinia } from "pinia";
import router from "./router";
import axios from "axios";
// import VueAxios from "vue-axios";
const { message, notification, dialog } = createDiscreteApi([
  "message",
  "dialog",
  "notification",
]);
axios.defaults.baseURL = "http://127.0.0.1:3030/api";

const app = createApp(App);
// app.use(VueAxios, axios)
// 全局使用axios及naive-ui的提示组件
app.provide("axios", axios);
app.provide('message', message)
app.provide('notification', notification)
app.provide('dialog', dialog)

app.use(naive);
app.use(createPinia());
app.use(router);
app.mount("#app");

关键代码
app.provide("axios", axios);
vue组件上的写法

import { ref, reactive, inject } from 'vue'
const axios = inject('axios')
const login = async () => {
    let result = await axios.post('/admin/login', {
    })
   
}

组件上分三步使用

1. 从vue中导入inject；
2. 使用inject注入axios；
3. 需要调用接口时，直接使用axios

需要注意的是，在main.js中，app.provide("axios", axios);"axios"是axios的别名，这里写的啥，调用接口时就用啥，如果写成app.provide("http", axios);那么组件调用axios时就得写成http进行接口调用

路由配置

vue2中路由的配置很简单，在main.js中引入之后，vue组件上使用this.$router.push即可实现路由的跳转，但vue3相对来说更麻烦了，分三步

1. main.js文件中引入，这与vue2基本一致

import router from "./router";
import { createApp } from "vue";
const app = createApp(App);
app.use(router);
app.mount("#app");

2. vue组件上引入路由，并进行调用

import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

3、需要路由跳转时使用，如登录成功后，router.push('/dashboard')

未完待续~~~