專案建好了，那先來講 Vue 的專案架構
詳細內容很多，所以我挑重點講
public
index.html
public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .

學習

職場產業

音樂藝文

index.html

public

components

router

state management

App.vue

main.ts

package management

vue.config.js

<div class="draft-block draft--p left">專案建好了，那先來講 Vue 的專案架構</div>
<div class="draft--imgNormal draft-block"><div><div style="height:268px" class="image-block-prerender" data-src="https://images.vocus.cc/fd34129a-f999-4f5e-9a5d-103ed5da9fde.png" data-width="268" data-height="771" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">詳細內容很多，所以我挑重點講</div>
<h2 class="draft-block draft--h2" name="header-1kv0t">public</h2>
<h3 class="draft-block draft--h3" name="header-efqub">index.html</h3>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">public/index.html</span> 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 <span style="font-weight: bold; ">public/index.html</span>，再套用 <span style="font-weight: bold; ">App.vue</span>，最後才是進入你寫的 <span style="font-weight: bold; ">.vue</span> 畫面。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1462px" class="image-block-prerender" data-src="https://images.vocus.cc/69dfcc9c-6ce6-4494-807b-b80d8fa44d77.png" data-width="1462" data-height="856" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">在這邊寫的東西會套用到所有的網頁頁面，比方說在這邊改 title，瀏覽器上網頁的 title 就會改變，在這裡設定背景是黑色，那所有的頁面背景預設都是黑色。</div>
<h2 class="draft-block draft--h2" name="header-1vp6u">components</h2>
<div class="draft-block draft--p left">習慣是會把要寫的 Vue 頁面寫在 <span style="font-weight: bold; ">src/components</span> 底下，像是專案建好後的範例首頁就是寫在這的 <span style="font-weight: bold; ">HelloWorld.vue</span></div>
<div class="draft--imgNormal draft-block"><div><div style="height:1752px" class="image-block-prerender" data-src="https://images.vocus.cc/df474a88-a38b-4ce0-ada1-db6f48801e74.png" data-width="1752" data-height="855" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<h2 class="draft-block draft--h2" name="header-7r98i">router</h2>

在寫頁面之前，先來介紹 Vue 頁面結構。
首先先在 src/components 底下建立一個 home.vue
跟寫一個 html 頁面很像，一樣是分成 寫網頁內容、script、style，三個部分，只是 html 標籤換成了 template。
template
就是相當於原生 html 檔

[4] Vue 頁面結構

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

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

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

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

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

前言
Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。
javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一

付費限定文章
[3] Vue 專案架構

public

index.html

components

router

以行動支持創作者！付費即可解鎖

付費限定文章[3] Vue 專案架構

public

index.html

components

router

以行動支持創作者！付費即可解鎖

付費限定文章
[3] Vue 專案架構