2023年度鐵人_[Day 07] 深入介紹掛載底層機制_import為何有時用大括號有時不用?
在 Vue 專案的 src 文件下，有一個 main.js 文件，該文件稱為主配置文件，
舉凡是 Vue 應用相關的前置作業、配置，如導入路由組件、導入根組件並進行配置，都是在 main.js 文件中完成的。
main.js程式碼
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
import為何有時用大括號有時不用?
在新版 Vue 應用中，都是使用 createApp()函數創建一個新的 App 應用實體的，Vue CLI已經幫我們編寫好了一個開箱即用的函數。因此每個 App 應用其實都是一個 Vue Application Instance。
使用時，需要通過如下程式碼導入 createApp：
import { createApp } from 'vue'
這裡要注意，導入 createApp()函數時，要使用花括號{}括起來，createApp()函數只是 vue 的部分函數，不是整個模組整體，所以要使用大花括號 {}括起來。
使用 createApp()函數創建 Vue 應用實例時，需要掛載一個 App 應用，這裡將 App.vue 導入後，讓 createApp()函數掛載。
App.vue 是整體導入的，是 Vue 應用程式的根組件，也是呈現內容的地方，所以是整個導入的，無需使用{}。
import App from './App.vue'
在使用 createApp(App)創建了應用後，需要將App 應用掛載到某個 HTML 元素上。
使用 createApp(App).mount(HTML 元素物件) 來掛載應用。
createApp(App).mount('#app')
將 App.vue 根組件中的內容在 id="app"的 HTML 元素中顯示出來。
這個 id是"app"的 HTML 元素就存放在 index.html 文件中。
main.js 是加載到 index.html 文件中被執行的，現在的 Vue 新項目中，main.js 都是後台自動適配的
~\myvue1\public\index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
這裡可格外注意到此index.html並未有任何顯示引入js的部分，主要就是因為是透過vue cli建立的關係。
留言
張貼留言