1. 程式人生 > >Vue 框架-11-介紹src檔案流程及根元件app+HBuilder 配置

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

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>

更多文章: