入門
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入門搞明白的流程基本上就是這些。要具體使用，還有很多事情要整，但起了第一步。