EP15 - ex1. Hello World

閱讀時間約 1 分鐘
https://vuejs.org/examples 開始練習看看Vue加深一點印象吧!
今天是要看 Hello World
還記得EP1的如何創建Vue專案嗎?
再來複習一下www
npm create vue@latest
raw-image

依照上次學習,建置專案之後,打入指令就可以看到內建的網站!
現在開始探索資料夾內容摟~

當你選擇所有選項為 "no" 時,代表你沒有選擇 TypeScript、Vue Router、Vuex、測試框架等,這會創建一個最基本的 Vue 3 應用程式

研究資料夾

作業系統下的資料夾

raw-image











開啟你的OS作業系統的檔案瀏覽器,
看到專案的資料夾內容有這些!

IDE底下的資料夾

全部按No的資料夾內容

全部按No的資料夾內容










打開src資料夾

打開src資料夾








資料夾下有什麼差異?

首先要了解,OS系統檔案總管底下看到的資料夾
跟IDE下面看的資料夾內容會有差異!
主要原因就是,OS預設隱藏.gitignore,而IDE預設隱藏.gitignore設定的內容
不太懂這個的請研讀一下版本控管git的忽略清單

資料夾底下有什麼毛?

node_modules 資料夾(OS預設隱藏)

  • 這個資料夾包含了所有應用程式所需的 Node.js 模組和其相依的庫。這個資料夾是由 npm install 自動生成的。

public 資料夾

  • 這個資料夾包含靜態資源,比如 index.html 文件。這些資源不會被 webpack 進行打包,而是直接被複製到最終的輸出目錄。
  • index.html:應用程式的主 HTML 文件,包含一個 <div id="app"></div>,Vue 應用程式會被掛載到這個元素中。

src 資料夾

  • 這是應用程式的主要程式碼所在的地方。
  • main.js:應用程式的入口文件。Vue 應用程式的初始化和設定大多數是在這裡完成的。
  • App.vue:根元件,定義了應用程式的基本結構和樣式。

.gitignore 文件

  • 這個文件告訴 Git 哪些檔案或資料夾應該被忽略,不應該被提交到版本控制系統中。

package.json 文件

  • 這個文件包含了應用程式的元數據,比如名稱、版本、相依的庫和腳本等。它是 npm 和 yarn 使用的主要配置文件。

package-lock.json 文件

  • 這個文件用來鎖定相依項的版本,確保每次安裝的相依項版本一致。當你或其他人運行 npm install 時,會根據這個文件安裝確切的版本。

哪裏開始寫程式?

介紹這麽多檔案跟資料夾了~知道在哪裡開始寫了嗎?
有好奇心的你一定每個檔案資料夾都開來看過了吧
一定有些看得懂有些看不懂~但最終要知道彼此的關係~

index.html ⮕ main.js ⮕ App.vue

terminal 下面輸入npm run dev之後可以看到網址

raw-image

在vscode下,按Shift + command + P,輸入 simple browser: show,把網址local網址輸入,就可以在vscode旁邊看到即時修改code的preview畫面,開發的時候比較方便,存檔就看得到變化

raw-image

範例1:Hello World

終於要開始練習了!先移除App.vue裡頭的內容

瀏覽器就會馬上出現錯誤

raw-image

App.vue

<script setup>
import { ref } from 'vue'
const message = ref('Hello World!')
</script>

<template>
<h1>{{ message }}</h1>
</template>
raw-image
  • <script setup>: 這是一個 Vue 3 特有的語法糖,用來簡化組件的定義。與傳統的 <script> 標籤不同,<script setup> 可以讓你直接在其內部撰寫組件的邏輯,而不需要明確地定義 setup 函數。
  • import { ref } from 'vue': 從 Vue 引入 ref 函數。ref 函數用來創建響應式的變數。
  • const message = ref('Hello World!'): 使用 ref 函數創建了一個響應式變數 message,初始值為 'Hello World!'。這意味著當 message 的值改變時,與之綁定的模板部分也會自動更新。
  • <template>: 定義了組件的模板(HTML 結構)。
  • <h1>{{ message }}</h1>: 使用雙大括號 {{ }} 綁定一個 Vue 的響應式變數 message。這個變數的值將顯示在 <h1> 標籤中。
不用依賴線上的工具摟~本地端也可以看到結果!
是不是實作過一次都會比較有感覺呢?
看文件真的是很悶啊~實作過還是要再複習一下文件~
2會員
64內容數
分享生活趣事~
留言0
查看全部
發表第一個留言支持創作者!
卡關的人生 的其他內容
組件組成一棵樹狀結構,類似於嵌套的 HTML 元素,但 Vue 提供了自定義內容和邏輯的封裝。通常我們會在專用的 .vue 文件中定義組件,並使用 <script setup> 來輕鬆管理狀態和事件。組件可以重複使用,並透過 props 傳遞數據,使用插槽實現內容分發。
介紹如何使用 ref 屬性來獲取 DOM 元素或子組件的引用,並展示了在模板中使用 <template> 標籤來定義 HTML 結構。講解了在 Composition API 中透過 useTemplateRef 獲取引用。在 v-for 內使用 ref 生成引用陣列和綁定函數作為 ref 的方式。
在 Vue.js 中,watch 是用來監控數據變化並執行副作用的工具。副作用指的是函數對外部狀態的變更,例如更新 DOM、進行網絡請求或修改全局變量。watch 允許我們在數據變化時自動響應,這對於處理異步操作和更新狀態非常有用。它也支持深層監聽和清理功能,能夠應對複雜的副作用場景。
在這篇文章中,探討了 Vue 組件的生命周期鉤子以及它們在不同階段的應用。每個 Vue 組件在創建時,會經歷一系列初始化步驟,這些步驟中會執行特定的生命週期鉤子函數,例如 onMounted、onUpdated 和 onUnmounted 等。這些鉤子允許開發者在組件的特定階段插入自定義代碼。
使用 v-bind 可以將 HTML 屬性、樣式或類別綁定到 Vue 的數據,實現單向數據綁定。而 v-model 則是用於表單元素的雙向數據綁定,使輸入和數據同步更新。使用 v-bind 可以讓我們綁定非字符串值,例如布爾值或對象,從而在處理更複雜的應用場景時更為靈活。
Vue.js 的事件修飾符提供了一種簡化和直觀的方式來處理事件。與傳統 JavaScript 中需要手動檢查條件和處理事件相比,Vue 的修飾符(如 .prevent、.stop、.enter)使代碼更加清晰和易於管理。這些修飾符直接在模板中指定事件行為,減少了樣板代碼,提升了可讀性。
組件組成一棵樹狀結構,類似於嵌套的 HTML 元素,但 Vue 提供了自定義內容和邏輯的封裝。通常我們會在專用的 .vue 文件中定義組件,並使用 <script setup> 來輕鬆管理狀態和事件。組件可以重複使用,並透過 props 傳遞數據,使用插槽實現內容分發。
介紹如何使用 ref 屬性來獲取 DOM 元素或子組件的引用,並展示了在模板中使用 <template> 標籤來定義 HTML 結構。講解了在 Composition API 中透過 useTemplateRef 獲取引用。在 v-for 內使用 ref 生成引用陣列和綁定函數作為 ref 的方式。
在 Vue.js 中,watch 是用來監控數據變化並執行副作用的工具。副作用指的是函數對外部狀態的變更,例如更新 DOM、進行網絡請求或修改全局變量。watch 允許我們在數據變化時自動響應,這對於處理異步操作和更新狀態非常有用。它也支持深層監聽和清理功能,能夠應對複雜的副作用場景。
在這篇文章中,探討了 Vue 組件的生命周期鉤子以及它們在不同階段的應用。每個 Vue 組件在創建時,會經歷一系列初始化步驟,這些步驟中會執行特定的生命週期鉤子函數,例如 onMounted、onUpdated 和 onUnmounted 等。這些鉤子允許開發者在組件的特定階段插入自定義代碼。
使用 v-bind 可以將 HTML 屬性、樣式或類別綁定到 Vue 的數據,實現單向數據綁定。而 v-model 則是用於表單元素的雙向數據綁定,使輸入和數據同步更新。使用 v-bind 可以讓我們綁定非字符串值,例如布爾值或對象,從而在處理更複雜的應用場景時更為靈活。
Vue.js 的事件修飾符提供了一種簡化和直觀的方式來處理事件。與傳統 JavaScript 中需要手動檢查條件和處理事件相比,Vue 的修飾符(如 .prevent、.stop、.enter)使代碼更加清晰和易於管理。這些修飾符直接在模板中指定事件行為,減少了樣板代碼,提升了可讀性。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟,包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置,及如何創建類型聲明文件來正確識別 .vue 文件。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟,包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置,及如何創建類型聲明文件來正確識別 .vue 文件。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找