XOOPS輕鬆架 - 線上書籍

:::

Vue.js 3.0 筆記
=============

1. 若是放在 nuxt.config.js 中，表示是全域的（可以自己在 meta 中加 property 屬性）： 
    ```javascript
      ssr: true,
      // Global page headers (https://go.nuxtjs.dev/config-head)
      head: {
        title: "我的 nuxt 測試專案",
        meta: [
          { charset: "utf-8" },
          { name: "viewport", content: "width=device-width, initial-scale=1" },
          { property: "op:url", content: "https://go.nuxtjs.dev/config-head" },
          { property: "op:image", content: "https://nuxtjs.org/logos/nuxt.svg" },
          { hid: "description", name: "description", content: "" }
        ],
        link: [
          { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
          { rel: "stylesheet", type: "text/css", href: "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta1/css/bootstrap.min.css" },
          { rel: "stylesheet", type: "text/css", href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" }
        ],
        script: [
          { src: 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta1/js/bootstrap.bundle.min.js' },
          { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' },
        ]
      },
    ```
2. 若是放在各個頁面，則可以做該頁面設定，例如： 
    ```javascript
    <script>
    export default {
      head: {
        title: '關於我們',
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' },
          { property: 'op:url', content: 'https://go.nuxtjs.dev/config-head' },
          { property: 'op:image', content: 'https://nuxtjs.org/logos/nuxt.svg' },
          { hid: 'description', name: 'description', content: '' }
        ],
        link: [
          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
      },
    };
    </script>
    ```
3. 也可以將 head 改為函式，如此可以接收 data 的內容來動態改變值，如： 
    ```javascript
    <script>
    import axios from "axios";
    export default {
      head() {
        return {
          title: this.news.title,
          link: [
            {
              rel: "stylesheet",
              type: "text/css",
              href:
                "https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css",
            },
          ],
          script: [
            {
              src:
                "https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js",
            },
          ],
        };
      },
      async asyncData(context) {
        const res = await axios.get(
          "http://blog.lces.tn.edu.tw/api.php?op=show&id=" + context.params.id
        );
        return { news: res.data };
      },
    </script>
    ```
 
### 關閉SSR變成SPA

1. 只要設定 ssr 為 false 即可 
    ```javascript
    export default {
      ssr: false,
      ...略...
    };
    
    ```

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1854

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器