vue3项目搭建_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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

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')
1
2
3
4
5
6
7
8
9
10
11
12