付費限定

[3] Vue 專案架構

張哲嘉-avatar-img
張哲嘉
發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你
更新於 發佈於 閱讀時間約 1 分鐘

專案建好了，那先來講 Vue 的專案架構

raw-image

詳細內容很多，所以我挑重點講

public

index.html

public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .vue 畫面。

raw-image

在這邊寫的東西會套用到所有的網頁頁面，比方說在這邊改 title，瀏覽器上網頁的 title 就會改變，在這裡設定背景是黑色，那所有的頁面背景預設都是黑色。

components

習慣是會把要寫的 Vue 頁面寫在 src/components 底下，像是專案建好後的範例首頁就是寫在這的 HelloWorld.vue

raw-image

router

以行動支持創作者！付費即可解鎖
本篇內容共 866 字、0 則留言，僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容，可能因為尚未登入，或沒有該房間的查看權限。
張哲嘉的沙龍Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你
留言
avatar-img
留言分享你的想法！
avatar-img
張哲嘉的沙龍
9會員
49內容數
比起詳細教學單一技能，網路上或者市面上整合多項技能的教學相對少很多，但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味，因此我想以自身的經驗為例，以全端開發各項技能中最常用到的部分進行講解，讓讀者能夠快速上手掌握全端技能。
張哲嘉的沙龍的其他內容
2022/10/10
[30] TLS/SSL for MongoDB
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定，然後再做個連結到 nginx/sites-enabled，設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
[30] TLS/SSL for MongoDB
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定，然後再做個連結到 nginx/sites-enabled，設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
[29] 讓網站更安全，不准直接連我的網站 IP
Block direct access by ip 一旦將網站對外，就要開始面對這個險惡的世界每天遭受一堆攻擊，雖然大部分都無關痛癢，幾乎都是機器人在 scan ip 然後在發一些無意義的請求，或者亂試 api，看能不能試出來...，最好是哪麼好試啦，而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
[29] 讓網站更安全，不准直接連我的網站 IP
Block direct access by ip 一旦將網站對外，就要開始面對這個險惡的世界每天遭受一堆攻擊，雖然大部分都無關痛癢，幾乎都是機器人在 scan ip 然後在發一些無意義的請求，或者亂試 api，看能不能試出來...，最好是哪麼好試啦，而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
[28] 用 Nginx 部署 production back-end server
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內，包含了 SECRET_KEY 等機密資訊，通常專案都會做版本控制上 git，但把這些機密資訊也上 git 是很不好的一件事，畢竟 github 也是曾經被駭過的，所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
2022/10/10
[28] 用 Nginx 部署 production back-end server
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內，包含了 SECRET_KEY 等機密資訊，通常專案都會做版本控制上 git，但把這些機密資訊也上 git 是很不好的一件事，畢竟 github 也是曾經被駭過的，所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
阿千看世界
2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！
每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界 所得稅線上申報
#2025所得稅#綜合所得稅#繳稅有回饋
Thumbnail
avatar-avatar
阿千看世界
2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！
每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界 所得稅線上申報
#2025所得稅#綜合所得稅#繳稅有回饋
Thumbnail
avatar-avatar
科技巨頭解碼
NVDA 25Q1 財報 - 扣除中國因素，輝達的前方仍然沒有烏雲 | #276
全球科技產業的焦點，AKA 全村的希望 NVIDIA，於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1，實際日曆期間為今年二到四月)，交出了打敗了市場預期的成績單。然而，在銷售持續高速成長的同時，川普政府加大對於中國的晶片管制......
#NVDA#NVIDIA#輝達
Thumbnail
avatar-avatar
科技巨頭解碼
NVDA 25Q1 財報 - 扣除中國因素，輝達的前方仍然沒有烏雲 | #276
全球科技產業的焦點，AKA 全村的希望 NVIDIA，於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1，實際日曆期間為今年二到四月)，交出了打敗了市場預期的成績單。然而，在銷售持續高速成長的同時，川普政府加大對於中國的晶片管制......
#NVDA#NVIDIA#輝達
Thumbnail
avatar-avatar
美股 Insight
6月Fed會議：略為鷹派收斂2026、2027年降息預期，繼續維持高利率更長時間的觀望態度
重點摘要： 6 月繼續維持基準利率不變，強調維持高利率主因為關稅 點陣圖表現略為鷹派，收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變，強調需要維持高利率是因為關稅： 聯準會 (Fed) 召開 6 月利率會議
#Fed#聯準會#美股
Thumbnail
avatar-avatar
美股 Insight
6月Fed會議：略為鷹派收斂2026、2027年降息預期，繼續維持高利率更長時間的觀望態度
重點摘要： 6 月繼續維持基準利率不變，強調維持高利率主因為關稅 點陣圖表現略為鷹派，收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變，強調需要維持高利率是因為關稅： 聯準會 (Fed) 召開 6 月利率會議
#Fed#聯準會#美股
Thumbnail
avatar-avatar
Jeremy Ho的沙龍
Vue3 筆記 | Vue router 篇
Vue3 學習筆記，vue-router 篇。
#WebDev#Vue#vueRouter
Thumbnail
avatar-avatar
Jeremy Ho的沙龍
Vue3 筆記 | Vue router 篇
Vue3 學習筆記，vue-router 篇。
#WebDev#Vue#vueRouter
Thumbnail
avatar-avatar
Jeremy Ho的沙龍
Vue3 筆記 | 專案建立與響應式
Vue3 學習筆記，專案建立與基礎響應式篇
#WebDev#Vue
Thumbnail
avatar-avatar
Jeremy Ho的沙龍
Vue3 筆記 | 專案建立與響應式
Vue3 學習筆記，專案建立與基礎響應式篇
#WebDev#Vue
Thumbnail
avatar-avatar
Vic Lin的沙龍
Nuxt.js 入門
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西，按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
#Nuxt
Thumbnail
avatar-avatar
Vic Lin的沙龍
Nuxt.js 入門
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西，按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
#Nuxt
Thumbnail
avatar-avatar
張哲嘉的沙龍
[8] Vue Router
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由，name 如果你沒有要用路由傳參，不寫也沒關係，component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像，用法是像
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[8] Vue Router
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由，name 如果你沒有要用路由傳參，不寫也沒關係，component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像，用法是像
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[5] 寫一個 Vue 頁面
定義路由 首先先來定義路由，先把上一篇寫的 home.vue 定義在根路由。 打開 src/router/index.ts，在 routes 內定義 path 定義 url，component 定義要指向哪個 vue 頁面，component:()=>import('@/components/hom
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[5] 寫一個 Vue 頁面
定義路由 首先先來定義路由，先把上一篇寫的 home.vue 定義在根路由。 打開 src/router/index.ts，在 routes 內定義 path 定義 url，component 定義要指向哪個 vue 頁面，component:()=>import('@/components/hom
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[4] Vue 頁面結構
在寫頁面之前，先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像，一樣是分成 寫網頁內容、script、style，三個部分，只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[4] Vue 頁面結構
在寫頁面之前，先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像，一樣是分成 寫網頁內容、script、style，三個部分，只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[3] Vue 專案架構
專案建好了，那先來講 Vue 的專案架構 詳細內容很多，所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[3] Vue 專案架構
專案建好了，那先來講 Vue 的專案架構 詳細內容很多，所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[2] Vue: getting started
前言 Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[2] Vue: getting started
前言 Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
從 0 到有 vue3 前端工程師養成 — part 2: create a Vue project
Create project 裝好 vue CLI 之後，只要在終端輸入 vue create 想取的專案名稱 就可以開始創建 vue 專案囉 1. Pick a preset 2. Select the features 3. Choose the version of vue 選擇 vue3
#vue#frontend#前端
Thumbnail
avatar-avatar
張哲嘉的沙龍
從 0 到有 vue3 前端工程師養成 — part 2: create a Vue project
Create project 裝好 vue CLI 之後，只要在終端輸入 vue create 想取的專案名稱 就可以開始創建 vue 專案囉 1. Pick a preset 2. Select the features 3. Choose the version of vue 選擇 vue3
#vue#frontend#前端
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News