付費限定

[5] 寫一個 Vue 頁面

閱讀時間約 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 從網頁全端開發到架站一次教給你你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
9會員
49內容數
比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。
留言0
查看全部
發表第一個留言支持創作者!
張哲嘉的沙龍 的其他內容
在寫頁面之前,先來介紹 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
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
人生只有一次,別讓自己留下遺憾!勇敢嘗試,不論是旅居、追夢,還是任何你想做的事,都不要害怕踏出第一步!
Thumbnail
「作品的分類,個人認為是寫完作品之後才會清楚。」—古神小卷的碎念 本篇大綱: 一、只要開始寫作,偏好會自己出現。 二、小說的分類,是由出版社或書店上架時決定的。 三、各類風格與元素作品:以克蘇魯風格為例。 「如果說不知道要寫什麼,就寫言情吧,反正一定會寫歪。」—臨淵齋作者群
Thumbnail
本篇為 vocus 成長學院邀請 17.5 英文寫作教室撰稿。17.5 英文寫作教室創辦人 Alex 不只是講師,也是一位英文教學內容的創作者。他透過經營自媒體、分析市場需求,推出獨家數位商品。本篇內容即為 Alex 分享實戰歷程,以及銷售成果、學習經驗等,幫助你更容易開始打造數位商品,一起來閱讀!
Thumbnail
開心歡喜跨在你肩上 你堅定的愛給我力量 你是我永遠的仰望 是你 我勇敢飛翔
Thumbnail
最近家裡的老嬰正在學走路 非常愛走路🚶🏻🚶🏻🚶🏻 尤其愛走跟我反方向的路🤦🏻‍♀️ 然後也愛什麼都摸一下、拍一下 媽媽必須跟上跟下真的很累🫠 但我還是盡可能的不限制他 盡可能地找安全的地方給他走 當然也曾經幾度因為沒如他的願 他以大法師及鬼吼鬼叫來反抗 氣
Thumbnail
在看見了那麼多的生活樣貌之後,已經不覺得有任何一個生活是我所想要的—我一點都不想過著別人的人生,我熱愛的生命就是我自己的這個。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
人生只有一次,別讓自己留下遺憾!勇敢嘗試,不論是旅居、追夢,還是任何你想做的事,都不要害怕踏出第一步!
Thumbnail
「作品的分類,個人認為是寫完作品之後才會清楚。」—古神小卷的碎念 本篇大綱: 一、只要開始寫作,偏好會自己出現。 二、小說的分類,是由出版社或書店上架時決定的。 三、各類風格與元素作品:以克蘇魯風格為例。 「如果說不知道要寫什麼,就寫言情吧,反正一定會寫歪。」—臨淵齋作者群
Thumbnail
本篇為 vocus 成長學院邀請 17.5 英文寫作教室撰稿。17.5 英文寫作教室創辦人 Alex 不只是講師,也是一位英文教學內容的創作者。他透過經營自媒體、分析市場需求,推出獨家數位商品。本篇內容即為 Alex 分享實戰歷程,以及銷售成果、學習經驗等,幫助你更容易開始打造數位商品,一起來閱讀!
Thumbnail
開心歡喜跨在你肩上 你堅定的愛給我力量 你是我永遠的仰望 是你 我勇敢飛翔
Thumbnail
最近家裡的老嬰正在學走路 非常愛走路🚶🏻🚶🏻🚶🏻 尤其愛走跟我反方向的路🤦🏻‍♀️ 然後也愛什麼都摸一下、拍一下 媽媽必須跟上跟下真的很累🫠 但我還是盡可能的不限制他 盡可能地找安全的地方給他走 當然也曾經幾度因為沒如他的願 他以大法師及鬼吼鬼叫來反抗 氣
Thumbnail
在看見了那麼多的生活樣貌之後,已經不覺得有任何一個生活是我所想要的—我一點都不想過著別人的人生,我熱愛的生命就是我自己的這個。