Vue 框架-11-介紹src檔案流程及根元件app+HBuilder 配置
這是上一篇對目錄簡單介紹：
關於編輯器，可以使用輕量級的 Sublime Text 3，我使用的是 HBuilder，
但是使用 HBuilder 會有一個問題，就是 HBuilder 預設使用的自己的 web 伺服器，他的埠是 8020，然而我們搭建的 Vue 的 CLI 是 8080 埠，所以，在使用 HBuilder 的開啟 瀏覽器時，會啥也看不到，怎麼辦呢？
必須要開啟上一篇介紹的環境，並且在瀏覽器位址列使用 8080 埠，
搭建環境具體請檢視：
Vue 框架-10-搭建腳手架 CLI + 批處理快捷啟動
如果你是長期使用 Vue ，並且想要一直使用 HBuilder 做為開發工具的話，建議修改預設為伺服器：
（1）點選瀏覽器旁邊的下箭頭 >【設定 web 伺服器】>展開【外部web伺服器】>【新建】>內容格式：
名稱：Vue Dev
地址：http://127.0.0.1:8080
（2）回到伺服器設定，把 HTML 伺服器選擇成剛才的名稱就可以了：
介紹src檔案流程及根元件app
在 HBuilder 中開啟專案：
直接【檔案】>【開啟目錄】然後選擇專案目錄就可以了：
然後可以看到：
先介紹 main.js（請看註釋）：
根元件 App.vue（請看註釋）：
App.vue：
<!--擴充一個面試小知識點：瀏覽器頁面的有哪幾層構成，分別是什麼？
三層構成：結構層，表示層，行為層
分別是：HTML，CSS，JavaScript
-->
<!--根元件都包含了-->
<!--1.結構層：html 模板-->
<template>
<!--注意：最外層只能是一對根標籤，不能和其他標籤並列-->
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
<!--2.行為層：邏輯處理-->
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<!--3.表示層：css 樣式-->
<!--提示：這裡是 app 根元件的 css 樣式是全域性的yang，當我們自定義元件的時候，需要使用
<style scoped> 表示該 style 樣式只在該元件中有效
-->
<style>
#app {
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>