Implementation of vue3.0+vant3.0 rapid project construction

vue --version or vue -V 

npm update -g @vue/cli

npm install -g @vue/cli

vue create hello-world (this is your own project name)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import http from './utils/http'; //Here is my own encapsulated axios
import { Button } from 'vant';

const app = createApp
//vue3.0 can no longer mount public method properties on the prototype object of vue as before //Here you can write the public method properties in the second parameter, which is an object //Component registration is called through the .use chain app(App, { http }).use(Button).use(store).use(router).mount('#app')

<template>
  <div class="home">
    {{ num }}----{{activeNum}}----{{refData}}
    <!-- vant component usage-->
    <van-button size="large" type="primary" @click="changeNum">changeNum</van-button>

    <van-button type="success" @click="routerPush">Route jump</van-button>
  </div>
</template>

<script>
//Which modules need to be introduced on demand import { toRefs, reactive, onMounted, getCurrentInstance,watch ,computed,ref} from "vue";
export default {
  name: "Home",
  // Same as vue2.0, accepts values ​​passed by parent components and values ​​passed in main.js props: ["http"],
  // Must be written in setup setup(props, context) {
    //The ctx here is similar to this in vue2
    const { ctx } = getCurrentInstance();
    //Routing this.$router
    const router = ctx.$router;
    //The encapsulated axios passed in by main.js
    const http = ctx.http;
     // I still don't recommend writing like this because it's troublesome to wrap a new responsive data with ref every time const refData = ref('1212') // ref wraps into a responsive object // I think it's more comfortable to write like this, similar to data in vue2
    const state = reactive({//The function receives a normal object and returns a responsive data object num: 0,
    });
    //I like to write calculated properties in objects because it is clearer to prevent the calculated property methods from being mixed together and difficult to distinguish. const computedData = {
      // Don't forget to import computed when writing calculated properties
      activeNum : computed(()=>state.num*2)
    }
    //I like to write methods in objects because they are clearer and prevent calculation of property methods from being mixed together and difficult to distinguish. const methods = {
      changeNum: () => {
        state.num++;
        // The data wrapped by ref must be obtained using .value refData.value++
      },
      routerPush() {
        //Route jump router.push({
          name: "test",
        });
      },
      //Network request async getUserInfo() {
        try {
          let { data } = await http.get("http://localhost:3000/xiaochengxu/");
          console.log(data);
        } catch (error) {
          console.log(error);
        }
      },
    };
    // Same as mounted in vue2. vue 3 removes the two lifecycles boforcreate and created. setup is the new lifecycle between these two lifecycles. onMounted(() => {
      methods.getUserInfo();
    });
    //Use of watchwatch(()=>state.num,value=>{
      console.log('num changed',value)
    })
    //Must return to the template to use return {
      ...toRefs(state), // Convert responsive objects to normal objects. You don't need state.num when using them. You can use num directly...methods, // Deconstruction assignment...computedData,
      refData
    };
  },
};
</script>