nuxt

anch發表於2024-07-02
UX

  • [ 安裝 ]

    • 安裝卡死的話，把npm源切換會npm
      npx nuxi@latest init demo

  • [ 常用目錄 ]

    • pages 頁面目錄，有該目錄的情況下，app.vue裡面必須配置<NuxtPage />標籤才可以，如果要訪問首頁，pages目錄中必須存在index.vue檔案，即便該檔案沒有內容
    • assets 資源目錄，比如js，css，等內容
    • components 元件目錄
    • layouts 佈局模板檔案

  • [ 約定路由 ]

    • pages 目錄結構就是預設路由結構
    • 簡單的傳參可以透過路由引數的形式，將引數名稱用中括號包裹起來放在檔名或者目錄名即中即可，獲取引數方法如下
      <template>
    {{ $route.params.id }} // 這裡的 id 就是引數
    {{ name }} // 也可以在 script 中獲取到引數
    // 這裡用到了 2 個引數，需要透過目錄巢狀一層，目錄名和檔名分別配置一個引數
  </template>
  <script setup>
    import {ref} from 'vue'
    const route = useRoute()
    const name = route.params.name
  </script>

  • [ 巢狀頁面 ]

    • 在 pages 目錄中，建立同名的 檔案 和 目錄，既可實現頁面巢狀，將子頁面寫入目錄中，然後在父頁面檔案中寫入 NuxtPage 標籤，即可，路由透過目錄名和子頁面檔名即可訪問到對應的父子頁面

  • [ 佈局模板 ]

    • 佈局模板檔案要放在 layouts 目錄下面
    • 佈局模板檔案建立整體佈局，提供插槽來自定義各自頁面對應內容
      // default.vue
  <template>
    <head />
    <slot name="nav" />
    <slot name="main" />
    <foot />
  </template>
    • 頁面中使用佈局模板
      <template>
    <NuxtLayout name="default">
      <template #nav>
        //... nav content
      </template>
      <template #main>
        // main content
      </template>
    </NuxtLayout>
  </template>

  • [ 元件 ]

    • 元件在引入時，可以用單詞首字母大寫，也可以用-連線小寫單詞的方式，建議使用前者，以區分自定義元件和系統元件
    • 多層級元件：當layouts 目錄中，元件被目錄巢狀時，引入元件的時候要在元件前面加上首字母大寫的目錄名稱
    • 懶載入元件：頁面內容很多，可以晚一點在顯示的元件，或者可以顯示可以不顯示的元件，可以使用懶載入，在元件名稱前面加上Lazy即可實現元件的懶載入

  • [ composables ]

    • 在根目錄下建立該目錄，該目錄中檔案中定義的函式方法，可以直接在頁面中呼叫而不需要引入操作
    • 該目錄中的檔案，不要用目錄巢狀，否則會出問題，如果要用目錄包裹，目錄中只有index.vue檔案會被自動識別。

  • [ 獲取服務端資料 ]

  • [ useAsyncData ]

  • [ useFetch ]

  • [ useLazyFetch ]

  • [ useLazyAsyncData ]

  • [ 路由中介軟體 ]

    • 根目錄建立 middleware 目錄
    • global.ts 結尾的中介軟體是全域性中介軟體
      export default defineNuxtRouteMiddleware((to, from) => {
    console.log(to)
    console.log(from)
    if(to.path === '/index') {
      abortNavigation() // 阻止頁面跳轉
      return navigateTo('/login') 跳轉到登陸頁面
    }
  })
    • 單頁面中介軟體
      <script setup>
    definePageMeta({
      middleware: [
        "default" // 這裡是中介軟體檔名
      ]
    })
  </script>

  • [ node ]

    • // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      'postcss-px-to-viewport': {
        unitToConvert: 'px',
        viewportWidth: 750,
        unitPrecision: 5,
        propList: ['*'],
        viewportUnit: 'vw',
        fontViewportUnit: 'vw',
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: false,
        replace: true,
        exclude: [],
        landscape: false,
        landscapeUnit: 'vw',
        landscapeWidth: 568
      }
    }
  }
})


    <style lang="postcss">
#app {
  @media (max-width: 768px) {
    width: 200px;
    height: 200px;
    background-color: red;
  }
}
#app {
  @media (...) and (...) {}
}
</style>

    相關文章