從零開始建立一個nuxt.js專案

最近終於要從後台系統脫離，前台網站因為是不用登入就可以看到，所以 SEO 是少不了的，這樣以 SPA 方式去開發一定會GG，因為所有內容都由 JS 產生，非原本的 HTML，這時候就需要 SSR 技術，預先 rendern 好 HTML 給搜尋引擎去找，而 nuxt.js 就是在 vue 的架構上去實踐 SSR。

$ cd playground // 到你自己指定的資料夾
$ yarn create nuxt-app <專案名稱>
$ cd <專案名稱>
$ yarn dev --open

在專案中使用 sass

先安裝套件node-sass、sass-loader

$ yarn add node-sass sass-loader

全局載入樣式到專案內，修改nuxt.config.js

css: ["@/assets/scss/index.scss"]

---

在全局.vue檔案中可以使用variables.scss變數檔：

可以將variables.scss跟mixins.scss引入，但不建議引入帶有class名稱的scss檔案。

$ yarn add @nuxtjs/style-resources

modules: [
  // 全域 sass 變數設定
  "@nuxtjs/style-resources"
],
styleResources: {
  scss: ["@/assets/scss/variables.scss"]
}

---

新增header跟footer

在component資料夾中新增Header/index.vue、Footer/index.vue

<template>
  <div>
    <Header />
    <nuxt />
    <Footer />
  </div>
</template>
<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
export default {
   name: "layout",
   components: {
     Footer,
     Header
   }
};
</script>

---

在plugin中加入axios

參考官網文章

{
   modules: [
      '@nuxtjs/axios',
   ],
   plugins: [
      '~/plugins/axios'
   ]
}

export default function ({ $axios, redirect }) {
   $axios.interceptors.request.use(config => {
      console.log('Making request to ' + config)
   })
}

頁面中使用 :

async asyncData({ $axios }) {
   const ip = await $axios.$get('http://icanhazip.com')
   return { ip }
}

---

在plugin中加入filter

{
   plugins: ["~/plugins/axios", "~/plugins/filter.js"]
}

import Vue from "vue";
// 千分位補逗點
Vue.filter("commaFormat", val => {
   // ..bla bla bla
   return info;
});

---

安裝fontawesome

$ yarn add nuxt-fontawesome
$ yarn add @fortawesome/free-solid-svg-icons

modules: [
  // fontawesome
  [
     "nuxt-fontawesome",
     {
        component: "fa",
        imports: [
          //import whole set
          {
            set: "@fortawesome/free-solid-svg-icons",
            icons: ["fas"]
          }
        ]
     }
  ]
],