静态网站如今再次流行起来了。信息站和品牌宣传站不再需要使用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将自动构建和部署。
原文链接:https://dev.to/aumayeung/generate-static-websites-with-nuxt-1ia1
一款基于Vue.js的SSR框架——Nuxt.js。是vue进行SSR的一个优选开源项目,可免去繁琐的Webpack、nodejs后台服务配置等操作,方便的搭建一个支持SSR的vue项目。
在 Nuxt.js应用中使用Google统计分析服务,或者百度统计分析服务,推荐在 plugins 目录下创建 plugins/ga.js 文件。
在组件和布局中需要使用到相同的数据,改数据需要在nuxt初始化时候获取,而且仅从服务器端获取一次即可。那么该如何实现nux全局初始化功能呢?可以通过vuex来管理全局的一个状态的数据,Nuxt.js 的渲染流程,最先调用的即是 nuxtServerInit 方法。
Nuxt.js基于名为Next的热门React库的SSR实现。 为Vue设计了一个名为Nuxt的类似实现。 熟悉React + Next组合的人会在应用程序的设计和布局中发现一些相似之处。 但是,Nuxt提供Vue特有的功能来为Vue创建强大且灵活的SSR解决方案。
最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢?这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编译的,所以我们首先需要在启动命令后加上 --exec babel-node
Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。静态应用部署就不说了,主要说说服务端渲染应用部署。每次在服务器上执行nuxt build,总是有如下报错,并且jenkins会随之挂掉。
uxt打包的静态文件可以直接放在GitHub上面,然后 TravisCI跟GitHub又很亲切,就选择了TravisCI部署。Travis CI 部署到GitHub项目gh-pages分支上,打开页面发现引用资源404?
现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular、React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的时候是在网页中爬取数据
Nuxt.js 内置引用了 vuex 模块,所以不需要额外安装。Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录存在,它将做以下的事情:Nuxt.js 支持两种使用 store 的方式:普通方式: store/index.js 返回一个 Vuex.Store 实例
最近另一个网站的谷歌联盟申请下来了,记录一下Nuxt.js如何引用谷歌广告的JS代码,当初找了好久。只配置nuxt.config.js文件就可以,下面贴出来。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!