1.採用腳手架構建的項目基本目錄結構
可能會有些許差別，但是大致基本目錄都差不多
2.項目入口(index.html,main.js,App.vue)
一般情況下，我們都習慣性將 index.html 作爲默認訪問地址，這裏 index.html 也就是我們的入口頁面。這裏我們修改幾個文件
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>demo</title> </head> <body> <div id="test"></div><!--測試--> <div id="app"></div> </body> </html>
App.vue
<template> <div id="app-div"> <img src="./assets/logo.png"> <router-view /> </div> </template> <script> export default { name: 'App' }; </script> <style> #app-div { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
然後我們瀏覽器調試可以看到，比之前多了一個<div id="test">的標籤，這就證明我們訪問是 index.html，那麼爲什麼後面的 <div id="app">變成了<div id="app-test">呢
這裏就是main.js起到得作用了，main.js中有這樣一段代碼
el：可以理解爲將創建的Vue對象要掛載到哪個元素上
componets：組件資源
template：在 App.vue 中所有的html代碼都被包再 <template>標籤中，這裏可以理解爲掛在後最外層標籤得名字，如果我們將 vue 中 template 參數改爲 "<AppDiv>"就可以看到
綜上：所以我們開始可以簡單理解爲，由 main.js 負責創建一個 vue 對象(導入App.vue)，然後將 vue 對象掛載到 index.html 中的 <div id="app"></div> 容器中