從零開始建立一個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-sasssass-loader

$ yarn add node-sass sass-loader

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

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

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

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

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

新增header跟footer

在component資料夾中新增Header/index.vueFooter/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"]
          }
        ]
     }
  ]
],

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。