Vue 框架-11-介紹 src 檔案流程及根元件 app

這是上一篇對目錄簡單介紹：

關於編輯器，可以使用輕量級的 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>

 

更多文章：

• Vue 小例項：https://blog.csdn.net/qq_40147863/article/category/8317526