Nuxt.js 一些好用的設定

/

2019.12.27:新增「引用外部資源」段落。

Nuxt.js 用起來蠻順手的

前陣子看了一下 Nuxt.js 的文件後,實際拿了一個沒這麼急的案子來寫,覺得真的有順手。

這篇是筆記在看文件時,覺得未來會用到的,或是在開發過程中遇到的問題,然後研究一陣後找到的解法,作一個整理。


新增 Nuxt 專案

開啟終端機,到想增加專案的資料夾中,輸入以下 command:

npx create-nuxt-app 專案名稱

head 的 lang 修改

Nuxt 專案生成的頁面,head lang 會是 en,如果想改變的話,在 nuxt-config.js 中的 head 寫入以下:

head: {
  htmlAttrs: {
    lang: 'zh-TW'
  },
  // ……
}

修改整頁使用的模版

在根目錄中,新增 app.html,Nuxt.js 會去抓這個檔成為預設的模版。

例如,如果想把整頁加上 IE hack 的 code,可以在 app.html 寫這樣:

<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body data {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

用不同的 layout

如果想要有多個模版,而不是像從頭到尾就一個模版到底,就先在 layouts 的資料夾建立一個新的 layout 檔,比方我們新增一個 blog.vue,然後在想用這個新模版的 *.vue 中,寫入以下:

<template>
    <!-- Your template -->
</template>

<script>
    export default {
      layout: 'blog'
    }
</script>

引用外部資源

在上一篇「Nuxt.js 引用 Firebase SDK」有人剛好詢問怎麼引用 CDN,這邊也覺得有機會用到,就補充一下。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

如果想要在頁面中引用外部資源,就在 nuxt.configh.js 的 head 中新增就行,像這樣:

head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' }
    ]
  }

使用 Sass、Pug

話說,如果是用 Webpack 打包檔案,為了能編譯 Sass、Pug,還得花時間寫一些 loader,久了沒用又會忘。

看到 Nuxt.js 只要用 npm 安裝後,就自動更新了 config 檔,不用在手寫loader就能立馬用,是很吸引 Augustus 用 Nuxt.js 的一點。

首先先安裝 Sass、Pug 的 loader:

npm install --save-dev pug@2.0.3 pug-plain-loader node-sass sass-loader

然後…沒有然後了,就可以直接使用 XD~

比方我們想在 index.vue 中使用:

<template lang="pug">
  .container
    p hello world
</template>

<style lang="sass">
  .container
    background: green
</style>

npm run generate 到相對路徑

因為 Augustus 目前實際用的案子,是要直接產生靜態檔案,用 FTP 傳到主機上的,而且不是傳到根目錄中,是眾多資料夾的其中一個。

比方,我們最後要使用的網址為:

https://letswrite.tw/demo/blog/

那在 nuxt.config.js 的 build 中,就要改成以下:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

router: {
    base: '/demo/blog/'
},
build: {
    extend (config, { isDev, isClient }) {
        if (!isDev) {
            config.output.publicPath = './_nuxt/'
        }
        return config;
    }
}
Summary
Nuxt.js 一些好用的設定
Article Name
Nuxt.js 一些好用的設定
Description
本篇大綱:Nuxt.js 用起來蠻順手的。新增 Nuxt 專案。head 的 lang 修改。修改整頁使用的模版。用不同的 layout。使用 Sass、Pug。npm run generate 到相對路徑。這篇是筆記在看文件時,覺得開發過程中遇到的問題,研究後找到的解法。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

WordPress

WordPress 基本介紹

Bot LINE

LINE Notify:用 Google Apps Script 建立簡易網站監測機器人

WordPress

WordPress:埋 Google AdSense 廣告

Google Sheets

Google Sheets 略過空白格重整資料

API

GitHub API:建立 Issue、Comment – API、Personal access tokens

Vue

Vue.js 3 Composition API 基本學習筆記-1:Ref、Props、watch、生命週期

Firebase Google

Firebase Performance 使用筆記

Front-End

像 Medium 的漸近式圖片加載

Front-End

IntersectionObserver:上篇 – 基本介紹及使用

Analytics Google

用 GA Spreadsheet Add-on 製作網站訪客人數功能

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言