一、Nuxt.js 简介

Nuxt.js 是一个基于 Vue.js 的通用应用框架。Vue.js 是一个很流行的框架,他能方便、灵活地开发出一个前端应用。但是 Vue.js 有个缺点,它所有的页面构建渲染全部由浏览器端通过 js 操作 dom 元素完成,所以使用它构建的前端应用对 SEO 极其不友好。而 Nuxt.js 能够完美地解决 SEO 的问题,Nuxt.js 是一个基于 Vue.js 的服务端渲染(SSR)框架,它是将网页在服务端完成渲染然后返回给浏览器端的。

Go 语言有自己的模版引擎能够完成前端页面的构建工作,为什么我们还要用 Nuxt.js 呢?主要是考虑到以下几点:

1. 前后端分离

前后端分离是未来的趋势。前后端分离便于项目解耦,Go 语言专注于提供数据接口,Nuxt.js 专注于渲染界面,项目结构清晰明了;数据接口服务和页面渲染服务可以单独部署方便维护。

2. Nuxt.js 开发效率高

Vue.js 专注于构建前端应用,在数据渲染和功能组件化上有明显的优势,而 Nuxt.js 是基于 Vue.js 的,所以相对于 Go 语言的模版引擎 Nuxt.js 的开发效率要高很多。

二、创建 Nuxt.js 项目

Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。为了快速入门,Nuxt.js 团队创建了脚手架工具 create-nuxt-app

环境确认无误之后,我们开始创建 nuxt 项目!

第一步:首先执行一下命令安装npx

npm install -g npx

第二步:创建一个 Nuxt.js 项目只需要以下命令即可:

npx create-nuxt-app <项目名>

假设我们的项目名称为site,那么创建项目命令如下:

npx create-nuxt-app site

创建过程中该工具会引导填写项目名称、描述、作者、选择包管理方式、UI 框架等等等… 我们的选择如下图所示:

└── site
    ├── README.md
    ├── assets
    │   └── README.md
    ├── components
    │   ├── Logo.vue
    │   └── README.md
    ├── jsconfig.json
    ├── layouts
    │   ├── README.md
    │   └── default.vue
    ├── middleware
    │   └── README.md
    ├── nuxt.config.js
    ├── package-lock.json
    ├── package.json
    ├── pages
    │   ├── README.md
    │   ├── index.vue
    │   └── test.vue
    ├── plugins
    │   └── README.md
    ├── static
    │   ├── README.md
    │   └── favicon.ico
    └── store
        └── README.md

三、修改 Nuxt.js 端口

Nuxt.js 的默认端口为3000,如果我们想要将端口号修改为8080,打开nuxt.config.js添加如下配置:

server: {
  port: 8080, // default: 3000
  host: '0.0.0.0' // default: localhost
}

四、启动服务

上一步我们将Nuxt.js的端口修改成了8080,那么接下来我们在site目录中执行以下命令来启动服务:

npm run dev

启动服务之后点击右侧的Web服务链接查看效果,如下图:

五、Nuxt.js 页面路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

假设 pages 的目录结构如下:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么,Nuxt.js 自动生成的路由配置如下:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

六、创建第一个页面

打开项目,在pages目录中创建test.vue文件,文件内容如下:

<template>
  <section>
    <nav class="navbar is-light" role="navigation" aria-label="main navigation">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item" href="https://mlog.club">
            <img src="https://i.loli.net/2019/10/11/aAiXVBCNknJeYGD.png" />
          </a>
        </div>

        <div id="navbarBasicExample" class="navbar-menu">
          <div class="navbar-start">
            <a class="navbar-item">Home</a>
            <a class="navbar-item">Documentation</a>
          </div>

          <div class="navbar-end">
            <div class="navbar-item">
              <div class="buttons">
                <a class="button is-primary"><strong>Sign up</strong></a>
                <a class="button is-light">Log in</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="notification">正文内容</div>
    </div>
    <footer class="footer">
      <div class="content has-text-centered">
        <p>
          Powered by <a href="https://mlog.club"><strong>bbs-go</strong></a>
        </p>
      </div>
    </footer>
  </section>
</template>

<script>
  export default {
    components: {},
  };
</script>

<style>
  .container {
    min-height: 300px;
  }
</style>

该页面的访问路径为:/test,访问该路径就能看到效果,效果如下: