[技術翻譯]使用Nuxt生成靜態網站

時間 2020-01-07

原文原文鏈接

本週再來翻譯一些技術文章，本次預計翻譯三篇文章以下：javascript

[04.[譯]使用Nuxt生成靜態網站]()(Generate Static Websites with Nuxt)
[05.[譯]Web網頁內容是如何影響電池功耗的]()(How Web Content Can Affect Power Usage)
[06.[譯]在現代JavaScript中編寫異步任務]()(https://web.dev/off-main-thread/)

我翻譯的技術文章都放在一個github倉庫中，若是以爲有用請點擊star收藏。我爲何要建立這個git倉庫？目的是經過翻譯國外的web相關的技術文章來學習和跟進web發展的新思想和新技術。git倉庫地址： https://github.com/yzsunlei/javascript-article-translate

靜態網站現在再次流行起來了。信息站和品牌宣傳站再也不須要使用WordPress之類的內容管理系統來動態更新。css

使用靜態網站生成器，您能夠從無源CMS，API等動態源以及Markdown文件等文件中獲取內容。html

Nuxt是基於Vue.js的出色的靜態網站生成器，可輕鬆用於構建靜態網站。使用Nuxt，從動態內容構建靜態網站所須要作的就是建立模板，以從API和Markdown文件等動態源動態顯示內容。而後，在Nuxt配置文件中，咱們靜態定義路由，以便它能夠經過相同的路由將內容生成爲靜態文件。vue

在本文中，咱們將使用Nuxt構建新聞網站，並將使用https://newsapi.org/的News API 做爲內容。您必須先了解Vue.js，而後才能使用Nuxt創建網站，由於Nuxt是基於Vue.js的框架。java

首先，咱們在News API網站上註冊API密鑰。若是咱們只想獲取頭條新聞，它是免費的。咱們開始來使用Nuxt CLI構建網站。咱們經過鍵入如下命令來運行：node

npx create-nuxt-app news-website

這將在news-website文件夾中建立初始項目文件。運行該向導時，咱們不爲服務器端框架選擇任何內容，不爲UI框架選擇任何內容，不爲測試框架選擇任何內容，不爲Nuxt模式選擇通用文件，最後根據您的狀況選擇是否包含Axios請求庫，使用lint進行代碼整理和prettify進行代碼美化。jquery

接下來，咱們須要安裝一些軟件包。咱們須要@nuxtjs/dotenv用於在本地讀取環境變量的程序包和country-list用於在咱們的網站上獲取國家列表的庫。要安裝它們，咱們運行：webpack

npm i @nuxtjs/dotenv country-list

如今咱們能夠開始創建咱們的網站了。在default.vue文件中，咱們將現有代碼替換爲：ios

<template>  
  <div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <nuxt-link class="navbar-brand" to="/">News Website</nuxt-link>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button> <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <nuxt-link class="nav-link" to="/">Home</nuxt-link>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdown"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >Headliny by Country</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <nuxt-link
                class="dropdown-item"
                :to="`/headlines/${c.code}`"
                v-for="(c, i) of countries"
                :key="i"
              >{{c.name}}</nuxt-link>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    <nuxt />
  </div>
</template>

<script>
import { requestsMixin } from "~/mixins/requestsMixin";
const { getData } = require("country-list");

export default {
  mixins: [requestsMixin],
  data() {
    return {
      countries: getData()
    };
  }
};
</script>

<style>
.bg-light {
  background-color: lightcoral !important;
}
</style>

這是用於定義咱們網站佈局的文件。咱們在此處添加了Bootstrap導航欄。該欄包含主頁連接和國家列表的下拉列表。這些nuxt-link組件都是指向頁面的連接，這些頁面用於在生成靜態文件時獲取國家/地區的標題。能夠經過調用函數從該部分的country-list包中獲取國家。在本節中，咱們經過覆蓋類的默認顏色來更改導航欄的背景顏色。本部分底部的組件將顯示咱們的內容。git

scriptgetDatastyle.bg-lightnuxttemplate

接下來，咱們建立一個mixins文件夾並建立一個名爲requestsMixin.jsfile的文件。在其中，咱們添加：

const APIURL = "https://newsapi.org/v2";  
const axios = require("axios");
export const requestsMixin = {  
  methods: {  
    getHeadlines(country) {  
      return axios.get(  
        `${APIURL}/top-headlines?country=${country}&apiKey=${process.env.VUE_APP_APIKEY}`  
      );  
    }, getEverything(keyword) {  
      return axios.get(  
        `${APIURL}/everything?q=${keyword}&apiKey=${process.env.VUE_APP_APIKEY}`  
      );  
    }  
  }  
};

該文件包含用於從News API獲取按國家/地區和關鍵字做爲標題的代碼。

而後，在pages文件夾中，咱們建立headlines文件夾，而後在文件headlines夾中，建立_countryCode.vue文件。在文件中，咱們添加：

<template>  
  <div class="container">  
    <h1 class="text-center">Headlines in {{getCountryName()}}</h1>  
    <div v-if="headlines.length > 0">  
      <div class="card" v-for="(h, i) of headlines" :key="i">  
        <div class="card-body">  
          <h5 class="card-title">{{h.title}}</h5>  
          <p class="card-text">{{h.content}}</p>  
          <button class="btn btn-primary" :href="h.url" target="_blank" variant="primary">Read</button>  
        </div>  
        <img :src="h.urlToImage" class="card-img-bottom" />  
      </div>  
    </div>  
    <div v-else>  
      <h2 class="text-center">No headlines found.</h2>  
    </div>  
  </div>  
</template>

<script>  
import { requestsMixin } from "~/mixins/requestsMixin";  
const { getData } = require("country-list");

export default {  
  mixins: [requestsMixin],  
  data() {  
    return {  
      headlines: [],  
      countries: getData()  
    };  
  },  
  beforeMount() {  
    this.getHeadlinesByCountry();  
  },  
  methods: {  
    async getHeadlinesByCountry() {  
      this.country = this.$route.params.countryCode;  
      const { data } = await this.getHeadlines(this.country);  
      this.headlines = data.articles;  
    }, 

    getCountryName() {  
      const country = this.countries.find(  
        c => c.code == this.$route.params.countryCode  
      );  
      return country ? country.name : "";  
    }  
  }  
};  
</script>

在該文件中，咱們接受route參數，countryCode而後從該位置調用咱們以前製做幷包含在此組件中的this.getHeadlines函數，requestsMixin以從News API獲取標題。而後結果將顯示在該template部分的Bootstrap卡中。在模板中，咱們經過從country-list數據中找到國家名稱來得到國家名稱。若是找不到標題，咱們會顯示一條消息。一般，若是要製做一個接受URL參數的頁面，則必須製做一個帶有下劃線做爲第一個字符以及所需URL參數的變量名的文件。所以，在此示例中，_countryCode.vue中咱們將countryCode使用該參數this.$route.params.countryCode。

接下來，index.vue在pages文件夾中，將現有代碼替換爲：

<template>  
  <div class="container">  
    <h1 class="text-center">Home</h1>  
    <div class="card" v-for="(h, i) of headlines" :key="i">  
      <div class="card-body">  
        <h5 class="card-title">{{h.title}}</h5>  
        <p class="card-text">{{h.content}}</p>  
        <button class="btn btn-primary" :href="h.url" target="_blank" variant="primary">Read</button>  
      </div>  
      <img :src="h.urlToImage" class="card-img-bottom" />  
    </div>  
  </div>  
</template>  
<script>  
import { requestsMixin } from "~/mixins/requestsMixin";  
const { getData } = require("country-list");

export default {  
  mixins: [requestsMixin],  
  data() {  
    return {  
      headlines: []  
    };  
  },  
  beforeMount() {  
    this.getHeadlinesByCountry();  
  },  
  methods: {  
    async getHeadlinesByCountry() {  
      const { data } = await this.getHeadlines("us");  
      this.headlines = data.articles;  
    }  
  }  
};  
</script>

<style>  
</style>

這使咱們能夠在主頁上顯示美國的標題。它的工做原理與_countryCode.vue頁面類似，不一樣之處在於，咱們僅得到美國的頭條新聞，而不接受URL參數來根據URL得到來自不一樣國家/地區的頭條新聞。

接下來，咱們create-env.js在項目的根文件夾中建立一個，並添加如下內容：

const fs = require('fs')  
fs.writeFileSync('./.env', `API_KEY=${process.env.API_KEY}`)

這使咱們能夠部署到Netlify，由於咱們須要.env根據輸入的環境變量動態建立文件。另外，咱們.env手動建立文件，而後將API_KEY鍵做爲鍵，將News API API鍵做爲值。

接下來的nuxt.config.js，咱們將現有代碼替換爲：

require("dotenv").config();  
const { getData } = require("country-list");

export default {  
  mode: "universal",  
  /*  
   ** Headers of the page  
   */  
  head: {  
    title: "News Website",  
    meta: [  
      { charset: "utf-8" },  
      { name: "viewport", content: "width=device-width, initial-scale=1" },  
      {  
        hid: "description",  
        name: "description",  
        content: process.env.npm_package_description || ""  
      }  
    ],  
    link: [  
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },  
      {  
        rel: "stylesheet",  
        href:  
         "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"  
      }  
    ],  
    script: [  
      { src: "https://code.jquery.com/jquery-3.3.1.slim.min.js" },  
      {  
        src:  
          "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"  
      },  
      {  
        src:  
          "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"  
      }  
    ]  
  },  
  /*  
   ** Customize the progress-bar color  
   */  
  loading: { color: "#fff" },  
  /*  
   ** Global CSS  
   */  
  css: [],  
  /*  
   ** Plugins to load before mounting the App  
   */  
  plugins: [],  
  /*  
   ** Nuxt.js dev-modules  
   */  
  buildModules: [],  
  /*  
   ** Nuxt.js modules  
   */  
  modules: [  
    // Doc: https://axios.nuxtjs.org/usage    
    "@nuxtjs/axios",  
    "@nuxtjs/dotenv"  
  ],  
  /*  
   ** Axios module configuration  
   ** See https://axios.nuxtjs.org/options
   */  
  axios: {},  
  /*  
   ** Build configuration  
   */  
  build: {  
    /*  
     ** You can extend webpack config here  
     */  
    extend(config, ctx) {}  
  },  
  env: {  
    apiKey: process.env.API_KEY || ""  
  },  
  router: {  
    routes: [  
      {  
        name: "index",  
        path: "/",  
        component: "pages/index.vue"  
      },  
      {  
        name: "headlines-id",  
        path: "/headlines/:countryCode?",  
        component: "pages/headlines/_countryCode.vue"  
      }  
    ]  
  },  
  generate: {  
    routes() {  
      return getData().map(d => `headlines/${d.code}`);  
    }  
  }  
};

在head對象中，咱們更改了title以便顯示所需的標題而不是默認標題。在link中，咱們添加了Bootstrap CSS，在script中，咱們添加了Bootstrap JavaScript文件和jQuery，它們是Bootstrap的依賴項。因爲咱們要構建靜態站點，所以不能使用BootstrapVue，由於它是動態的。咱們不但願在生成的輸出中使用任何動態JavaScript，所以咱們必須使用普通的Bootstrap。在modules中，咱們添加"@nuxtjs/dotenv"了從.env建立到Nuxt應用程序的文件中讀取環境變量的功能。咱們還進行了添加，require("dotenv").config();以便咱們能夠將process.env.API_KEY其添加到此配置文件中。咱們必須這樣作，因此咱們沒必要檢入.env文件。在裏面env部分，咱們有了apiKey: process.env.API_KEY || ""，這是經過使用讀取.env文件中的API KEY而得到的dotenv。

在router中，咱們定義了動態路由，以便當用戶單擊具備給定URL的連接或單擊具備此類URL的連接時能夠查看它們。Nuxt還使用這些路由來生成靜態文件。在generate中，咱們定義了Nuxt遍歷的路徑，以生成靜態網站的靜態文件。在這種狀況下，路由數組由咱們以前建立的標題頁面的路由組成。它將遍歷它們以獲取它們的數據，而後渲染它們並從渲染的結果生成文件。文件夾結構將與路線相對應。所以，因爲咱們path是/headlines/:countryCode，所以生成的工件將具備該headlines文件夾以及全部國家/地區代碼做爲子文件夾的名稱，而且在每一個文件夾內將有一個index.html 與呈現的內容。

如今，咱們準備將咱們的網站部署到Netlify。經過轉到https://www.netlify.com/建立一個Netlify賬戶。免費計劃將知足咱們的需求。而後將代碼提交到託管在GitHub，Gitlab或Bitbucket上的Git存儲庫。而後，當您登陸Netlify時，單擊Git中的New site。從那裏，您能夠添加託管在其中一項服務中的Git存儲庫。而後，當要求您輸入Build Command時，輸入node ./create-env.js && npm run generate，發佈目錄將爲dist。

以後，將.env文件中的API密鑰輸入到網站設置的「環境變量」部分，您能夠經過單擊「構建和部署」菜單上的「環境」連接來進入。輸入API_KEY做爲密鑰，而後輸入News API API密鑰做爲值。而後單擊保存按鈕。

一旦將全部內容提交併推送到由GitHub，Gitlab或Bitbucket託管的Git存儲庫中，Netlify將自動構建和部署。

原文連接：https://dev.to/aumayeung/generate-static-websites-with-nuxt-1ia1