vue项目 nuxt渲染_使用Nuxt.js构建服务器端渲染的Vue应用

vue项目 nuxt渲染

Usage of static websites are increasing in popularity recently. It’s not a surprise as static site generators seem to have been gaining more popular recently too. There are various static site generators which you can use to build websites. Some of these generators include Jekyll, Hugo, Gatsby, Nuxt.js to mention but a few. Gatsby and Nuxt.js are pretty new to the collection.

静态网站的使用近来越来越流行。 这并不奇怪，因为静态站点生成器最近似乎也越来越流行。 您可以使用各种静态站点生成器来构建网站。 其中一些生成器包括Jekyll ， Hugo ， Gatsby ， Nuxt.js ， 仅举几例。 Gatsby和Nuxt.js是该系列中的新增功能。

My portfolio website is typical example of static site generated with Nuxt.js.

我的投资组合网站是使用Nuxt.js生成的静态网站的典型示例。

In this tutorial, I will be showing how to build a static website with Nuxt.js. For the purpose of demonstration, we’ll be building a personal portfolio website.

在本教程中，我将展示如何使用Nuxt.js构建静态网站。 为了演示，我们将建立一个个人投资组合网站。

什么是静态站点 ( What is a Static Site )

A static site is the simplest kind of website you can build. Static sites are written in HTML, CSS and sometimes little JavaScript. A static site contains little or no user interactions. They are stored in the filesystem of a server and are delivered to the user exactly as stored. The same information is displayed for all users. Static sites are suitable for the contents that never or rarely need to be updated, though modern static site generators are changing this.

静态网站是您可以构建的最简单的网站。 静态网站是用HTML，CSS以及有时很少JavaScript编写的。 静态站点包含很少或没有用户交互。 它们存储在服务器的文件系统中，并完全按照存储方式交付给用户。 将为所有用户显示相同的信息。 静态站点适合从未或很少需要更新的内容，尽管现代的静态站点生成器正在对此进行更改。

为什么选择静态网站 ( Why Static Site )

You might ask yourself why static site? Well, there are lot of benefits with using static site. These benefits includes and are not limited to the following:

您可能会问自己为什么是静态网站？ 好吧，使用静态站点有很多好处。 这些好处包括但不限于以下方面：

Speed: This is the most obvious benefit of a static site as it is just HTML, CSS and JS files and some assets. There is no back and forth between the client and a server, hence it speed. Static sites can be served from a CDN.

速度：这是静态网站最明显的好处，因为它只是HTML，CSS和JS文件以及一些资产。 客户端和服务器之间没有来回的关系，因此速度很快。 可以从CDN提供静态站点。

Less Resources: Static sites uses less resources as things like servers and databases are not necessarily needed.

更少的资源：静态站点使用的资源更少，因为不一定需要服务器和数据库之类的东西。

Security: You don’t have to worry of your servers been hacked or database vulnerabilities.

安全性：您不必担心服务器被黑客入侵或数据库漏洞。

In addition to the above, there are various platforms that can help you with hosting your static site. These platforms includes: GitHub Pages, Netlify, Surge etc.

除上述内容外，还有各种平台可以帮助您托管静态站点。 这些平台包括： GitHub Pages ， Netlify ， Surge等。

什么是Nuxt.js ( What is Nuxt.js )

Nuxt.js is a framework for creating server-rendered Vue.js Applications. It was inspired by Next.js. Its main scope is UI rendering while abstracting away the client/server distribution. Nuxt.js comes with a lot of features to help you in your development between the client side and the server side such as asynchronous data, middleware, layouts, etc.

Nuxt.js是用于创建服务器渲染的Vue.js应用程序的框架。 它的灵感来自Next.js。 它的主要范围是UI呈现，同时抽象化了客户端/服务器分发。 Nuxt.js带有许多功能，例如异步数据，中间件，布局等，可帮助您在客户端和服务器端之间进行开发。

In addition to building server rendered applications, Nuxt.js can also be used to build static generated Vue.js applications (which will be our focus in this tutorial).

除了构建服务器渲染的应用程序之外，Nuxt.js还可以用于构建静态生成的Vue.js应用程序（这将是本教程中的重点）。

这个怎么运作 ( How it Works )

In addition to using Vue.js, Nuxt.js uses the following libraries to create a rich web application development:

除了使用Vue.js，Nuxt.js还使用以下库来创建丰富的Web应用程序开发：

• Vue-Router
  Vue路由器
• Vuex (included only when using the store option)
  Vuex （仅在使用store选项时包含）
• Vue-Meta
  Vue-Meta

All configured for you, so you don’t have to spend time installing and setting up these libraries yourself. Under the hood it uses Webpack with vue-loader and babel-loader to bundle, code-split and minify your code.

为您进行了所有配置，因此您不必花费时间自行安装和设置这些库。 在后台 ，它使用Webpack和vue-loader和babel-loader来捆绑，代码拆分和最小化代码。

Nuxt.js tries to remain minimal as possible by keeping a total size of only 28kb min+gzip (31kb with vuex).

Nuxt.js试图通过将总大小保持为仅28kb min + gzip （使用vuex时为31kb）来保持最小。

The image below shows a broad overview of how Nuxt.js works:

下图显示了Nuxt.js的工作原理的广泛概述：

Let’s now build ourselves a static portfolio website with Nuxt.js.

现在让我们使用Nuxt.js构建一个静态的投资组合网站。

创建一个Nuxt.js项目 ( Create a Nuxt.js Project )

We’ll be using the starter template provided by the Nuxt.js team. We’ll install it using the Vue CLI, so you need to first install the Vue CLI in case you don’t have it installed already:

我们将使用Nuxt.js团队提供的入门模板。 我们将使用Vue CLI进行安装，因此如果您尚未安装Vue CLI，则需要先安装它：

npm install -g vue-cli

Once installed, you can move on to creating Nuxt.js project with it:

安装完成后，您可以继续使用它创建Nuxt.js项目：

vue init nuxt/starter portfolio

We can the project portfolio, you can name it whatever you like. Next, we need to install the dependencies:

我们可以提供项目portfolio ，您可以随意命名。 接下来，我们需要安装依赖项：

cd portfolio
npm install

With the dependencies installed, we can now lauch our project:

安装依赖项后，我们现在可以启动我们的项目了：

npm run dev

The application is now running on http://localhost:3000. If everything went well, you should see a screen as the image below:

该应用程序现在在http：// localhost：3000上运行 。 如果一切顺利，您应该看到如下图所示的屏幕：

Before we dive in to code, let’s take a moment to define what our portfolio website will entail. The portfolio website will contain four (4) pages:

在开始编写代码之前，让我们花一点时间来定义我们的投资组合网站将要包含的内容。 投资组合网站将包含四（4）个页面：

• Hompage
  网页
• About page
  关于页面
• Projects page
  项目页面
• Contact page
  联系页面

创建主版面 ( Creating Master Layout )

We’ll start by creating a master layout which all our pages will inherit. We’ll be using Bulma as our CSS framework. So we need to pull it into our project. To do so, open nuxt.config.js which is Nuxt.js config file and paste the code below within the link object that is inside the head object:

我们将从创建一个主布局开始，所有页面都将继承该主布局。 我们将使用Bulma作为我们CSS框架。 因此，我们需要将其纳入我们的项目。 为此，请打开nuxt.config.js配置文件nuxt.config.js并将下面的代码粘贴到head对象内部的link对象中：

// nuxt.config.js

{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700' },

In addition to pulling in Bulma, we also pull in a Google font.

除了引入布尔玛之外，我们还引入Google字体。

Within the layouts folder, there is a default.vue file. Open it and replace it content with:

在layouts文件夹中，有一个default.vue文件。 打开它，并将其内容替换为：

<!-- layouts/default.vue -->

<template>
  <div>
    <nuxt/>
  </div>
</template>

<style>
  html {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  }
</style>

<nuxt/> will be replaced with the actual content of the page rendered.

<nuxt/>将替换为呈现的页面的实际内容。

创建导航栏组件 ( Creating Navbar Component )

Let’s create a navbar component, so we can add it to the master layout. Within the components folder, create a new Navbar.vue file and paste the code below into it:

让我们创建一个导航栏组件，以便将其添加到主布局中。 在components文件夹中，创建一个新的Navbar.vue文件，并将下面的代码粘贴到其中：

<!-- components/Navbar.vue -->

<template>
  <div class="container">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="/">Portfolio</a>
        <button class="button navbar-burger">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <nuxt-link class="navbar-item" to="/">Home</nuxt-link>
          <nuxt-link class="navbar-item" to="/about">About</nuxt-link>
          <nuxt-link class="navbar-item" to="/projects">Projects</nuxt-link>
          <nuxt-link class="navbar-item" to="/contact">Contact</nuxt-link>
        </div>
      </div>
    </nav>
  </div>
</template>

We can now add the navbar to the master layout. Open layouts/default.vue and update as below:

现在，我们可以将导航栏添加到主布局。 打开layouts/default.vue并进行如下更新：

<!-- layouts/default.vue -->

<template>
  <div>
    <navbar></navbar>
    <nuxt/>
  </div>
</template>

<script>
  import Navbar from '../components/Navbar'

  export default {
    components: {
      Navbar
    }
  }
</script>

<style>
  html {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  }
</style>

创建主页 ( Creating The Homepage )

Within the pages folder, you will see an index.vue file. This file is what rendered when we navigate to the home route of our application. What Nuxt.js does is, generate routes based on the files in the pages folder. For instance, if we have index.vue, about.vue and contact.vue files within the pages folder, Nuxt.js will form the routes for the application as /, /about and /contact respectively.

在pages文件夹中，您将看到一个index.vue文件。 该文件是当我们导航到应用程序的本地路线时呈现的内容。 Nuxt.js的作用是根据pages文件夹中的文件生成路由。 例如，如果我们在pages文件夹中有index.vue ， about.vue和contact.vue文件，则Nuxt.js将分别为/ ， /about和/contact形成应用程序的路由。

Having said that, open pages/index.vue it and replace it content with the code below:

话虽如此，打开pages/index.vue并将其内容替换为以下代码：

<!-- pages/index.vue -->

<template>
  <section class="section is-large">
    <div class="container has-text-centered">
      <h1 class="title">Hi, I'm Chimezie Enyinnaya</h1>
      <h2 class="subtitle">a Software Developer based in Lagos, Nigeria.</h2>
    </div>
  </section>
</template>

If we visit the home route again, we should see the new homepage in action:

如果我们再次访问本地路线，我们应该会看到新的主页正在运行：

创建关于页面 ( Creating The About Page )

Let’s now create the about page. Within the pages folder, create a new about.vue file and paste the code below into it:

现在让我们创建关于页面。 在pages文件夹中，创建一个新的about.vue文件，并将下面的代码粘贴到其中：

<!-- pages/about.vue -->

<template>
  <section class="section is-medium">
    <div class="container has-text-centered">
      <h1 class="title">About Me</h1>
      <p>
        My name is Chimezie Enyinnaya (AKA mezie), I’m a self taught software developer based in Lagos, Nigeria. I build modern applications for the web! I'm a technical writer, I write technical articles and tutorials for various platforms including <a href="https://scotch.io/@mezie">Scotch.io</a>.
      </p>
    </div>
  </section>
</template>

Navigate to http://localhost:3000/about to see the about page in action:

导航到http：// localhost：3000 / about，以查看正在使用的About页面：

创建项目页面 ( Creating The Projects Page )

In the same vein, let’s create the projects page. Within the pages folder, create a new projects.vue file and paste the code below into it:

同样，让我们​​创建项目页面。 在pages文件夹中，创建一个新的projects.vue文件，并将下面的代码粘贴到其中：

<!-- pages/projects.vue -->

<template>
  <section class="section is-medium">
    <div class="container has-text-centered">
      <h1 class="title">My Projects</h1>
      <p>
        Some of my projects can be found on <a href="https://github.com/ammezie" target="_blank">GitHub</a>.
      </p>
    </div>
  </section>
</template>

Navigate to http://localhost:3000/projects to see the projects page in action:

导航到http：// localhost：3000 / projects以查看正在使用的项目页面：

创建联系人页面 ( Creating The Contact Page )

Finally, we create the contact page. Within the pages folder, create a new contact.vue file and paste the code below into it:

最后，我们创建联系页面。 在pages文件夹中，创建一个新的contact.vue文件，并将以下代码粘贴到其中：

<!-- pages/contact.vue -->

<template>
  <section class="section is-medium">
    <div class="container has-text-centered">
      <h1 class="title">Contact Me</h1>
      <p>
        You can follow me on Twitter: <a href="https://twitter.com/ammezie" target="_blank">@ammezie</a>
      </p>
    </div>
  </section>
</template>

Navigate to http://localhost:3000/contact to see the contact page in action:

导航到http：// localhost：3000 / contact以查看正在使用的联系页面：

We now have a functional portfolio website.

我们现在有一个功能齐全的网站。

生成静态站点 ( Generating Static Site )

Now, we are going to generate a static site for the portfolio website which so far contains bunch of Vue files. To do this, we’ll make use of the nuxt generate command:

现在，我们将为投资组合网站生成一个静态网站，该网站到目前为止包含一堆Vue文件。 为此，我们将使用nuxt generate命令：

npm run generate

The command above will run nuxt generate which will in turn start building the application and generate the static files. Once the it done, you should now have a dist folder which contains the generated static files.

上面的命令将运行nuxt generate ，它将依次开始构建应用程序并生成静态文件。 完成后，您现在应该有了一个dist文件夹，其中包含生成的静态文件。

The nuxt generate command works by generating HTML files off the Vue files files within the pages folder for all the application’s routes.

nuxt generate命令通过在页面文件夹内的Vue文件文件中为所有应用程序的路由生成HTML文件来工作。

部署我们的静态站点 ( Deploying Our Static Site )

The final thing we’ll do is deploy the static site to a live server. For this we’ll be using Netlify, though you can use GitHub Pages or any other static site hosting. So head over to Netlify and sign up if you don’t have an account with them yet.

我们要做的最后一件事是将静态站点部署到实时服务器。 为此，我们将使用Netlify ，尽管您可以使用GitHub Pages或任何其他静态站点托管。 因此，如果您还没有帐户，请前往Netlify并注册 。

Once logged in, click the New site from Git button:

登录后，单击“ 从Git新建站点”按钮：

Then select your Git provider, I’ll be using GitHub. You will be directed to authorize with GitHub (in my case):

然后选择您的Git提供程序，我将使用GitHub。 您将被指示使用GitHub授权（在我的情况下）：

Once authorized, you will be redirected back and you will see a list of your GitHub projects which you can choose the one you want to deploy from:

获得授权后，您将被重定向回去，您将看到GitHub项目的列表，您可以从中选择要部署的项目：

Next, we need to specify a build command and a publish directory. For the build command we enter npm run generate which is the same command we used to build our files locally. Then we enter dist as the publish directory. Again, this is the same directory the generated files will be be.

接下来，我们需要指定一个构建命令和一个发布目录。 对于build命令，我们输入npm run generate ，这与我们在本地构建文件时使用的命令相同。 然后我们输入dist作为发布目录。 同样，这是生成文件所在的目录。

Finally, click the Deploy site button to start the deployment.

最后，单击“ 部署站点”按钮以开始部署。

Once the deployment is complete, Netlify will generate a random name with a URL for your application with which you can access the application. Mine is https://programmer-badger-66651.netlify.com

部署完成后，Netlify将为您的应用程序生成一个带有URL的随机名称，您可以使用该URL来访问该应用程序。 我的是https://programmer-badger-66651.netlify.com

结论 ( Conclusion )

So in this tutorial, we looked at an overview of Nuxt.js. We also looked at why we might want to create static sites. Finally, we built a static website with Nuxt.js. As pointed out, Nuxt.js does more than just static site generation. You might want to go take a look at the docs to explore it more.

因此，在本教程中，我们研究了Nuxt.js的概述。 我们还研究了为什么我们可能要创建静态站点。 最后，我们使用Nuxt.js构建了一个静态网站。 正如指出的那样，Nuxt.js不仅完成静态站点生成。 您可能想看一下文档以进行更多探索。

翻译自: https://scotch.io/tutorials/build-a-server-side-rendered-vue-app-with-nuxtjs

vue项目 nuxt渲染