頁面建立

撰寫規定

使用 <template> 包住，並給一個根節點。<template>裡面的東西都會出現在畫面上。

<template>
  <xxx>
  </xxx>
</template>

有時候頁面外層可能使用 grid 或 flex，這時候根節點就會很討厭，所以要注意一下。

加入 script

<template>
  <xxx>
  </xxx>
</template>

<!--
setup 的意思是使用 composition API 寫法
lang="ts" 意思是這裡使用 typescript 語言，也就是要注意 js 的 type
  -->
<script setup lang="ts">
</script>

option API 和 composition API 寫法差異為：

前者會是固定寫法，相同的資料會寫在一起，例如 data 類的寫在一起、function 功能類的寫在一起。

後者則注重在相同情境的寫在一起，例如購物車的data、function寫在一起，要改code就不用跳來跳去。

目前公司喜歡用後者，因為可以更自由的排列位置。

加入 CSS

<template>
  <xxx>
  </xxx>
</template>

<script setup lang="ts">
</script>

<!--
加了 scoped 意思是以下這些 css 只會影響這個頁面的樣式，不會影響其他頁面。
但也只是權重提高了，不代表真的不會影響。
-->
<style scoped>
p {
  text-wrap: balance;
}
</style>

完整範例

<!-- app/pages/index.vue -->
<template>
  <main class="page page--index">
    <div class="page-container">
      <!-- 把 pageTitle 拿來用於顯示，要加上 {{ }} -->
      <h2 class="visually-hidden">{{ pageTitle }}</h2>
      <akContainer />
       <!-- 把 pageTitle 拿來當判斷用 -->
      <p :class="pageTitle ? 'page-title-active' : 'page-title-non-active'">Home Page Content</p>
    </div>
  </main>
</template>

<script setup lang="ts">
// 使用多國語言翻譯檔，要搭配 @nuxtjs/i18n
const { t } = useI18n();

// 設定 pageTitle 變數，並且會根據多國語言變化
const pageTitle = computed(() => t('page.index.title'));

// 設定頁面 SEO 資訊，，要搭配 @nuxtjs/seo
useSeoMeta({
  title: pageTitle.value,
  ogTitle: pageTitle.value,
  twitterTitle: pageTitle.value,
});

// 設定動態社群分享圖
defineOgImageComponent("OgImageCustomTemplate", {
  title: pageTitle.value,
  description: pageDescription.value
});

</script>

<style>
p {
  text-wrap: balance;
}
</style>

參考來源

• https://ithelp.ithome.com.tw/m/articles/10294194

• https://vuejs.org/guide/introduction.html#api-styles