【Go + Nuxt.js 搭建一个 BBS 系统】6. 使用Nuxt.js搭建前端页面

大喵喵酱

发布于 2019-12-05 18:43

点击下面链接购买后可获取本课程完整源码，同时提供高大上的在线IDE开发环境，边看教程边动手。

购买地址：https://www.shiyanlou.com/courses/1436
购买九折优惠邀请码： ZHwfIjb1

作者简介

大猫猫，互联网公司老码农、不折腾不舒服斯基，多年千万日活服务端研发和架构经验。关注公众号查看更多技术干货：

码农俱乐部

实验介绍

实验内容

认识Nuxt.js，了解它的适用场景和优缺点；学会如何搭建一个基于Nuxt.js的项目，并了解它的基本用法。

知识点

认识 Nuxt.js 是做什么的，了解为什么要用它
如何创建 Nuxt.js 项目
Nuxt.js 的项目结构
Nuxt.js 基础路由

预备知识

npm
vue.js

Nuxt.js简介

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

Nuxt.js 官网： https://nuxtjs.org/

为什么要是用 Nuxt.js

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

一. 前后端分离

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

二. Nuxt.js 开发效率高

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

创建 Nuxt.js 项目

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

开始之前请先确认我们的环境，Nuxt.js 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

环境确认无误之后，我们开始创建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端口，所以我们要想看到演示效果需要将端口号修改为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，访问该路径就能看到效果，效果如下：

文章转载请注明出处，原文链接：https://mlog.club/topic/648

交流 #Go语言 #分享

浏览(1230)