《家庭财务宝典》

如何使用Nuxt生成静态网站?

16次阅读

共计 7917 个字符,预计需要花费 20 分钟才能阅读完成。

如何使用Nuxt生成静态网站?插图

静态网站如今再次流行起来了。信息站和品牌宣传站不再需要使用 WordPress 之类的内容管理系统来动态更新。

使用静态网站生成器,您可以从无源 CMS,API 等动态源以及 Markdown 文件等文件中获取内容。

Nuxt 是基于 Vue.js 的出色的静态网站生成器,可轻松用于构建静态网站。使用 Nuxt,从动态内容构建静态网站所需要做的就是创建模板,以从 API 和 Markdown 文件等动态源动态显示内容。然后,在 Nuxt 配置文件中,我们静态定义路由,以便它可以通过相同的路由将内容生成为静态文件。

在本文中,我们将使用 Nuxt 构建新闻网站,并将使用 https://newsapi.org/ 的 News API 作为内容。您必须先了解 Vue.js,然后才能使用 Nuxt 建立网站,因为 Nuxt 是基于 Vue.js 的框架。

首先,我们在 News API 网站上注册 API 密钥。如果我们只想获取头条新闻,它是免费的。我们开始来使用 Nuxt CLI 构建网站。我们通过键入以下命令来运行:

npx create-nuxt-app news-website

这将在 news-website 文件夹中创建初始项目文件。运行该向导时,我们不为服务器端框架选择任何内容,不为 UI 框架选择任何内容,不为测试框架选择任何内容,不为 Nuxt 模式选择通用文件,最后根据您的情况选择是否包含 Axios 请求库,使用 lint 进行代码整理和 prettify 进行代码美化。

接下来,我们需要安装一些软件包。我们需要 @nuxtjs/dotenv 用于在本地读取环境变量的程序包和 country-list 用于在我们的网站上获取国家列表的库。要安装它们,我们运行:

npm i @nuxtjs/dotenv country-list

现在我们可以开始建立我们的网站了。在 default.vue 文件中,我们将现有代码替换为:

<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 包中获取国家。在本节中,我们通过覆盖类的默认颜色来更改导航栏的背景颜色。本部分底部的组件将显示我们的内容。

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 将自动构建和部署。

你的工作,由 AI 赋能!🔥

还在为文案、脚本卡壳、做视频、写代码、设计图片灵感枯竭而烦恼吗?🤯

板板 AI,你的工作好帮手!

一键生成    各种文案、脚本、图片、视频、代码、报告,轻松应对各种工作 / 营销需求!

现在注册体验,即可获得:

  • 🎁 30 积分基础模型余额
  • 🎁 3 积分高级模型余额
  • 🎁 3 积分绘画余额

还不快来试试?

点击链接,开启你的 AI 创作之旅!>>>https://www.banbanai.cn

板板 AI,让你的工作效果发挥无限可能! 🚀

正文完
关注板板AI免费获得移动AI助手
post-qrcode
 
天天
版权声明:本站原创文章,由 天天 2024-11-14发表,共计7917字。
转载说明:

本文由 天天资讯网 整理发布,转载请注明出处.
版权声明:部分文章内容或图片来源于网络,我们尊重作者的知识产权。如有侵犯,请联系我们在第一时间删除。

文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月
文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月
文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月
文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月
文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月

温馨提示:请在上面搜索| 查找更多免费资源,如需广告位请联系站长QQ 48704478

《家庭财务宝典》