入門
Vue3的教程很少，官方網站例項不好整，另外由於Python的Django也掌握了，學習這個有些讓人眼亂。Vue專案建立後，在public目錄下面自動生成了一個index.htm，裡面有個div id="app"，這就是簡單例項中需要mount的入口，整了半天才發現。
Vue程式的入口，是main.js檔案，裡面要完成以下工作。
匯入createApp
import createApp from "vue"
注意這個vue，我的理解應該是js/vue.js這個檔案。
匯入待填充index.html中app標籤的Vue檔案
import App from "./views/Home.vue"
注意這個Home.vue就寫全了，它在src/views目錄下存放。
宣告App並填充例項
createApp(App).mount("#app")
上面的命令很強大，一是宣告用Home.vue檔案中name:"App"的export default生成一個網頁模組，並把它的內容填充到id="app"的div中，生成網頁供使用者使用。
例項：Vue模組巢狀
普通的Vue使用就不用說了，我們講一個實際應用中採用模組化開發應用十分常見的方法：Vue檔案巢狀使用。
場景
在主頁上定製一個Button，點選後自動隱藏或顯示一個區別內容，該區域可以是許可權宣告，也可以是其它資訊。
定製Modal.vue
位置：src/views/Modal.vue
程式碼：
<template> <div class="modal"> <slot></slot> </div> </template>
注意事項：這裡有個slot命令，是Vue中用以繼承父模組待顯示的內容，即這個modal的Div下面，需要顯示的內容，我的理解，父級引用時，宣告一個moda，然後加一個標籤項，該項內容將會在Modal模組中繼承和顯示。
主介面的template
檔案: src/views/Home.vue
<template> <button @click="onModalClick">{{modalFlag?"Close modal":"Open Modal"}}</button> <modal v-if="modalFlag"> <p>Modals would be appeared here when modalFlag is true.</p> </modal> </template>
注意：這裡的moda，是Ｍｏｄａｌ。vue這個子元件中定義的，在主檔案中使用時，並不需要再定義和引用。
主介面中的script宣告
需要宣告和引用以下部分內容：
import Modal from "./Modal.vue" import { ref } from "vue";
注意由於Modal.vue和Home.vue都是在一個views目錄下，因此這個路徑是當前目錄，注意別路徑錯誤提示找不到module了呢。
預設引數匯出
//exports default export default { name:"Home", components:{ Modal }, setup(){ const modalFlag=ref(false); const onModalClick=()=>{ modalFlag.value=!modalFlag.value; } return { modalFlag, onModalClick } } }
上面一段程式碼中需要注意的是：
預設匯出
export default宣告，default是否能夠修改，如何改，尚未獲得相關資訊。
name
name的值一定要有，這個是import 的物件，可以自定義，也可以與函式名稱不一致，建議保持一致吧。
components宣告
當使用巢狀時，必須將匯入的元件作為子元件予以宣告，這裡有多少個可以匯入多少個，比如常見的footer、nav、logo、copyright等。
setup()
一定不要太英語化思維，不是setups，注意這裡面儲存所有的頁面資料元素，可以是簡單資料ref，也可以是複雜的reactive，資料要交給template,必須return相應資料，只有return出的資料template才能正常使用。
箭頭函式
這個是JS的坑，適應吧，可用於引數賦值，也可以無參函式宣告。
總結
Vue3入門搞明白的流程基本上就是這些。要具體使用，還有很多事情要整，但起了第一步。