24.5.15：

創建Vue3工程

1.確定自己電腦有沒有nodejs環境，在cmd中輸入node，如果出現Node.js的版本號說明已經有這個環境了，否則搜索Node.js安裝

2.先在D盤創建一個文件夾Vue3_Study，然后在這個空文件夾中右鍵選擇終端打開。

3.輸入npm create vue@latest

4.輸入項目名稱 hello_vue3,然后下面的選項除了第一個選擇是，其余的選擇否

5.在VSCode中打開hello_vue3

編寫App組件

1.index.html是項目的入口文件

2.加載index.html文件之后，解析<script type="module" src="/src/main.ts"></script>跳轉到src="/src/main.ts"

3.Vue3通過createApp函數創建一個應用實例

4.

編寫Person.vue

1.在src文件夾中新建一個components文件夾用來存放自己實現的效果

2.在components文件夾中新建一個Person.vue文件

3.仿照App.vue寫Person.vue

<template><div class="person"><h2>姓名：{{ name }}</h2><h2>年齡: {{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年齡</button><button @click="showTel">查看聯系方式</button></div>
</template><script lang="ts">
export default{name:'Person',//組件名data(){return {name:'張三',age:18,tel:'17999999999'}},methods:{showTel(){alert(this.tel)},changeName(){this.name='羅xx'},changeAge(){this.age+=1},}
}
</script><style scoped>
.person{background-color: aqua;box-shadow: 0 0 10px;padding: 20px;
}
button {/*修改按鈕之間的間隔 */margin: 0 5px;
}
</style>

4.在App.vue中引入這個Person效果

5.最后效果：

5.下載vue插件便于在網頁中檢查

5.1網頁搜索極簡插件

5.2搜索vue

5.3選擇推薦下載

5.4下載完之后將壓縮包解壓到某個位置

5.5打開常用瀏覽器，點擊右上角的三個點，選擇擴展-管理擴展，然后將開發者模式打開

5.6將壓縮之后的文件夾拖入到瀏覽器頁面選擇安裝

5.7之后在使用檢查就可以看到VUE插件（沒有的話看一下那個更多工具）