Nuxt3 開發模板

Setup

// 安裝依賴
npm i

// 啟動本地端
npm run dev
// 啟動本地端(生產環境)
npm run dev:prod

// 打包
npm run build
// 打包(生產環境)
npm run build:dev

環境版本

Node => 18.15.0
Npm => 9.6.4

相關依賴

- Pinia
- UnoCSS
- FontAwesome
- Sweetalert2
- VueUse
- Gsap

API 使用方式

<script lang="ts" setup>
  const { FETCH_ROOM } = useApi();

  cosnt roomList = useState([]);
  async function getRoomList() {
    const query = {
      pageNo: 1,
      pageSize: 20
    }
    const { result } = await FETCH_ROOM(query)

    roomList.value = result.orders.data;
  }
  // 執行 Function
  await getRoomList();
  // 客戶端渲染
  onMounted(() => {
    nextTick(() => {
      getList();
    });
  });
</script>

Store 使用方式

import { AbortApi } from '~~/utils'
import { LoadingStore } from '~/stores'

export default defineNuxtRouteMiddleware(() => {
  LoadingStore().FN_REMOVE_ALL_LOADING

  AbortApi.cancelAllPending()
})

圖片懶加載使用方式

<img v-lazy="item.pictureUrl" :alt="item.title">