付費限定

[5] 寫一個 Vue 頁面

更新於 2024/10/05閱讀時間約 2 分鐘

定義路由

首先先來定義路由,先把上一篇寫的 home.vue 定義在根路由。
打開 src/router/index.ts,在 routes 內定義
{     path: '/',     name: 'home',     component:()=>import('@/components/home.vue') }
path 定義 urlcomponent 定義要指向哪個 vue 頁面,component:()=>import('@/components/home.vue') 裡面的 @ 指的是 src/ 路徑

導入 UI component library

以行動支持創作者!付費即可解鎖
本篇內容共 1142 字、0 則留言,僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
avatar-img
9會員
49內容數
比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
張哲嘉的沙龍 的其他內容
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
要完整的了解整個網頁的開發需要掌握相當多的知識,就算目標只是學習網頁開發中的其中一個部分,比方說只是想成為前端工程師,或是只是想成為後端工程師,最好還是對整個網頁專案整體有一定程度的了解,才不會和其他工程師合作的時候,各開發各的,然後兜不起來 這個系列的教學,希望就算你的目標不是成為全端工程師,也能
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
要完整的了解整個網頁的開發需要掌握相當多的知識,就算目標只是學習網頁開發中的其中一個部分,比方說只是想成為前端工程師,或是只是想成為後端工程師,最好還是對整個網頁專案整體有一定程度的了解,才不會和其他工程師合作的時候,各開發各的,然後兜不起來 這個系列的教學,希望就算你的目標不是成為全端工程師,也能
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
人生只有一次,別讓自己留下遺憾!勇敢嘗試,不論是旅居、追夢,還是任何你想做的事,都不要害怕踏出第一步!
Thumbnail
「作品的分類,個人認為是寫完作品之後才會清楚。」—古神小卷的碎念 本篇大綱: 一、只要開始寫作,偏好會自己出現。 二、小說的分類,是由出版社或書店上架時決定的。 三、各類風格與元素作品:以克蘇魯風格為例。 「如果說不知道要寫什麼,就寫言情吧,反正一定會寫歪。」—臨淵齋作者群
Thumbnail
本篇為 vocus 成長學院邀請 17.5 英文寫作教室撰稿。17.5 英文寫作教室創辦人 Alex 不只是講師,也是一位英文教學內容的創作者。他透過經營自媒體、分析市場需求,推出獨家數位商品。本篇內容即為 Alex 分享實戰歷程,以及銷售成果、學習經驗等,幫助你更容易開始打造數位商品,一起來閱讀!
Thumbnail
開心歡喜跨在你肩上 你堅定的愛給我力量 你是我永遠的仰望 是你 我勇敢飛翔
Thumbnail
最近家裡的老嬰正在學走路 非常愛走路🚶🏻🚶🏻🚶🏻 尤其愛走跟我反方向的路🤦🏻‍♀️ 然後也愛什麼都摸一下、拍一下 媽媽必須跟上跟下真的很累🫠 但我還是盡可能的不限制他 盡可能地找安全的地方給他走 當然也曾經幾度因為沒如他的願 他以大法師及鬼吼鬼叫來反抗 氣
Thumbnail
在看見了那麼多的生活樣貌之後,已經不覺得有任何一個生活是我所想要的—我一點都不想過著別人的人生,我熱愛的生命就是我自己的這個。
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
人生只有一次,別讓自己留下遺憾!勇敢嘗試,不論是旅居、追夢,還是任何你想做的事,都不要害怕踏出第一步!
Thumbnail
「作品的分類,個人認為是寫完作品之後才會清楚。」—古神小卷的碎念 本篇大綱: 一、只要開始寫作,偏好會自己出現。 二、小說的分類,是由出版社或書店上架時決定的。 三、各類風格與元素作品:以克蘇魯風格為例。 「如果說不知道要寫什麼,就寫言情吧,反正一定會寫歪。」—臨淵齋作者群
Thumbnail
本篇為 vocus 成長學院邀請 17.5 英文寫作教室撰稿。17.5 英文寫作教室創辦人 Alex 不只是講師,也是一位英文教學內容的創作者。他透過經營自媒體、分析市場需求,推出獨家數位商品。本篇內容即為 Alex 分享實戰歷程,以及銷售成果、學習經驗等,幫助你更容易開始打造數位商品,一起來閱讀!
Thumbnail
開心歡喜跨在你肩上 你堅定的愛給我力量 你是我永遠的仰望 是你 我勇敢飛翔
Thumbnail
最近家裡的老嬰正在學走路 非常愛走路🚶🏻🚶🏻🚶🏻 尤其愛走跟我反方向的路🤦🏻‍♀️ 然後也愛什麼都摸一下、拍一下 媽媽必須跟上跟下真的很累🫠 但我還是盡可能的不限制他 盡可能地找安全的地方給他走 當然也曾經幾度因為沒如他的願 他以大法師及鬼吼鬼叫來反抗 氣
Thumbnail
在看見了那麼多的生活樣貌之後,已經不覺得有任何一個生活是我所想要的—我一點都不想過著別人的人生,我熱愛的生命就是我自己的這個。