vue3项目搭建

一、创建项目前提安装好node、npm、vue-cli

二、使用命令vue create app 创建项目


vue3项目创建完成

三、使用vue-router
npm install vue-router@4

四、使用axios
安装npm install axios

<template>
  <div>
    首页
    <div style="width: 400px; margin: auto">
      <img class="imageUrl" :src="state.imageUrl" alt="">
    </div>
  </div>
</template>

<script>
// import axios from 'axios';
import {reactive, getCurrentInstance} from "vue";

export default {
  name: "home",
  setup() {
    const state = reactive({
      imageUrl: ''
    });
    // 方式一
/*    const getData = () => {
      axios.get('http://api.2xb.cn/zaob').then(res => {
        const data = res.data;
        state.imageUrl = data.imageUrl;
      })
    }*/
    // 方式二 全局变量使用 需要在main.js中将axios挂载到全局
    const {proxy} = getCurrentInstance()
    const getData = () => {
      proxy.$axios.get('http://api.2xb.cn/zaob').then(res => {
        const data = res.data;
        state.imageUrl = data.imageUrl;
      })
    }
    getData();
    return {
      state
    }
  }
}
</script>

<style scoped>

</style>

main.js

import {createApp} from 'vue'
import App from './App.vue'
import router from './router';
import axios from 'axios'


const app = createApp(App)
// 将axios挂载到全局
app.config.globalProperties.$axios = axios


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