vue --version 或 vue -V

npm update -g @vue/cli

npm install -g @vue/cli

vue create hello-world(這是你自己的項(xiàng)目名稱(chēng))

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import http from './utils/http';//這里是我自己封裝的axios
import { Button } from 'vant';

const app = createApp
//vue3.0不再可以像之前一樣可以將公共方法屬性等掛載到vue的原型對(duì)象上
//這里可以將公共方法屬性寫(xiě)在第二個(gè)參數(shù)中，參數(shù)是一個(gè)對(duì)象
//組件的注冊(cè)通過(guò).use鏈?zhǔn)秸{(diào)用
app(App, { http }).use(Button).use(store).use(router).mount('#app')

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

    <van-button type="success" @click="routerPush">路由跳轉(zhuǎn)</van-button>
  </div>
</template>

<script>
//需要哪些模塊按需引入
import { toRefs, reactive, onMounted, getCurrentInstance,watch ,computed,ref} from "vue";
export default {
  name: "Home",
  // 同vue2.0 接受父組件傳值  及main.js 中傳的值
  props: ["http"],
  // 必須寫(xiě)入setup里
  setup(props, context) {
    //這里的ctx  類(lèi)似于vue2的this
    const { ctx } = getCurrentInstance();
    //路由 this.$router
    const router = ctx.$router;
    //main.js傳入的封裝axios
    const http = ctx.http;
     // 個(gè)人還是不推薦這樣寫(xiě)  因?yàn)槊看涡陆ㄒ粋€(gè)響應(yīng)式數(shù)據(jù)就要ref包裹一下很麻煩
    const refData = ref('1212')//ref包裹 變?yōu)轫憫?yīng)式對(duì)象
    // 個(gè)人覺(jué)著還是這樣寫(xiě)舒服一點(diǎn) 類(lèi)似于vue2中的data
    const state = reactive({//函數(shù)接收一個(gè)普通對(duì)象，返回一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象 
      num: 0,
    });
    //計(jì)算屬性 個(gè)人喜歡寫(xiě)在對(duì)象中 因?yàn)榭吹酶逦幌?防止計(jì)算屬性方法等混在一起不好區(qū)分
    const computedData = {
      // 計(jì)算屬性寫(xiě)法 別忘記引入 computed
      activeNum : computed(()=>state.num*2)
    }
    //方法 個(gè)人喜歡寫(xiě)在對(duì)象中 因?yàn)榭吹酶逦幌?防止計(jì)算屬性方法等混在一起不好區(qū)分
    const methods = {
      changeNum: () => {
        state.num++;
        // ref包裹的數(shù)據(jù) 必須用.value獲取
        refData.value++
      },
      routerPush() {
        //路由跳轉(zhuǎn)
        router.push({
          name: "test",
        });
      },
      //網(wǎng)絡(luò)請(qǐng)求
      async getUserInfo() {
        try {
          let { data } = await http.get("http://localhost:3000/xiaochengxu/");
          console.log(data);
        } catch (error) {
          console.log(error);
        }
      },
    };
    // 同vue2 的 mounted vue 3 移除了 boforcreate和created兩個(gè)生命周期  setup即為這兩個(gè)生命周期之間的新生命周期
    onMounted(() => {
      methods.getUserInfo();
    });
    // watch的使用
    watch(()=>state.num,value=>{
      console.log('num改變',value)
    })
    //必須返回 模板中才能使用
    return {
      ...toRefs(state),// 將響應(yīng)式的對(duì)象變?yōu)槠胀▽?duì)象 使用時(shí)不需要state.num 直接num即可使用
      ...methods,// 解構(gòu)賦值
      ...computedData,
      refData
    };
  },
};
</script>