NuxtJS入门指南：从基础到实战部署-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39963436/article/details/113763927

本文介绍了NuxtJS，一个基于Vue.js的SSR框架，包括其运作方式、主要特性、基本使用、路由管理、视图结构、异步数据处理和部署策略。内容涵盖Nuxt.js的初始化、路由导航、动态路由、嵌套路由、模板和布局，以及使用PM2进行服务端部署和自动化CI/CD实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

NuxtJS介绍

Nuxt.js是什么

一个基于Vue.js生态的第三方开源服务端渲染应用框架
它可以帮我们轻松的使用Vue.js技术栈构建同构应用
Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置
官网：https://zh.nuxtjs.org/
GitHub 仓库：https://github.com/nuxt/nuxt.js

Nuxt.js 框架是如何运作的

Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：

Vue.js
Vue Router
Vuex
Vue Server Renderer
压缩并 gzip 后，总代码大小为：57kb （如果使用了 Vuex 特性的话为 60kb）。
另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作（如打包、
代码分层、压缩等等）。

特性

基于 Vue.js
Vue、Vue Router、Vuex、Vue SSR
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES2015+ 语法支持
打包和压缩 JS 和 CSS
HTML 头部标签管理
本地开发支持热加载
集成 ESLint
支持各种样式预处理器： SASS、LESS、 Stylus 等等
支持 HTTP/2 推送

NuxtJS基本使用

Nuxt.js使用方式

初始项目
已有的Node.js服务端项目
- 直接把Nuxt当做一个中间件集成到Node Web Server中
现有的Vue.js项目
- 非常熟悉Nuxt.js
- 至少百分之10的代码改动

初始化Nuxt.js应用的方式

官方文档：https://zh.nuxtjs.org/docs/2.x/get-started/installation/

方式一：使用create-nuxt-app
方式二：手动创建

Nuxt 路由

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'
	 }
	]
}

路由导航

一般有三种方式：

a 标签
它会刷新整个页面，走服务端渲染，不要使用。
```
<a href="/">首页</a>
```
nuxt-link组件
https://router.vuejs.org/zh/api/#router-link-props
```
<nuxt-link to="/">首页</nuxt-link>
```

编程式导航
https://router.vuejs.org/zh/guide/essentials/navigation.html

<button @click="onClick">首页</button>
onClick() {
   console.log('HELLO')
   this.$router.push('/')
}

动态路由

Vue Router动态路由匹配
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html
Nuxt.js动态路由
https://zh.nuxtjs.org/docs/2.x/get-started/routing

嵌套路由

Vue Router嵌套路由
https://router.vuejs.org/zh/guide/essentials/nested-routes.html
Nuxt.js嵌套路由
https://zh.nuxtjs.org/docs/2.x/get-started/routing
创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
Warning: 别忘了在父组件( .vue 文件) 内增加用于显示子视图内容。
假设文件结构如：

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

Nuxt.js 自动生成的路由配置如下：

router: {
 routes: [
 {
   path: '/users',
   component: 'pages/users.vue',
   children: [
   {
     path: '',
     component: 'pages/users/index.vue',
     name: 'users'
   },
   {
     path: ':id',
     component: 'pages/users/_id.vue',
     name: 'users-id'
   }
  ]
 }
]
}

路由配置

https://zh.nuxtjs.org/api/configuration-router

视图

https://zh.nuxtjs.org/docs/2.x/concepts/views
在这里插入图片描述

模板

<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html {{ HTML_ATTRS }}>
<!--<![endif]-->

<head {{ HEAD_ATTRS }}>
    {{ HEAD }}
</head>

<body {{ BODY_ATTRS }}>
    <!-- 渲染的内容最终会注入到这里 -->
    <h1>app.html</h1>
    {{ APP }}
</body>

</html>

布局

（1）默认布局
在这里插入图片描述
（2）自定义布局

（3）错误页面

异步数据

服务端渲染动态数据。
https://zh.nuxtjs.org/docs/2.x/features/data-fetching/#async-data

asyncData 方法

Nuxt.js 扩展了 Vue.js，增加了一个叫* asyncData *的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。

基本用法

它会将asyncData 返回的数据融合组件data方法返回数据一并给组件
调用时机：服务端渲染期间和客户端路由更新之前

<template>
  <div>
    <h1>{{title}}</h1>
  </div>
</template>

<script>
import axios from 'axios'
// Nuxt.js 会监听  pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。
export default {
  name: 'Home',
  data() {
    return {
      foo: 'bar'
    }
  },
  async asyncData() {
    const res = await axios({
      method: 'GET',
      url: 'http://localhost:3000/data.json'
    })
    return res.data
  }
}
</script>

<style>
</style>

注意事项

只能在页面组件中使用
没有this，因为它是在组件初始化之前被调用的

使用：

当你想要动态页面内容有利于SEO或者是提升首屏渲染速度的时候，就在asyncData中发请求拿数据。
如果是非异步数据或者普通数据，则正常的初始化到data中即可

上下文对象

async asyncData(context) {
    const {data} = await axios({
      method: 'GET',
      url: 'http://localhost:3000/data.json'
    })
    const id = Number.parseInt(context.params.id)
    return {
    	article: data.posts.find(item => item.id === id)
    }
  }

发布部署

Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。
在这里插入图片描述
你可以将这些命令添加至 package.json ：

"scripts": {
	"dev": "nuxt",
	"build": "nuxt build",
	"start": "nuxt start",
	"generate": "nuxt generate"
}

最简单的部署方式

配置Host+Port
压缩发布包
把发布包传到服务端
解压
安装依赖
启动服务

使用PM2启动Node服务

PM2是一个专门用来管理Node.js进程的一个应用，通过它可以将Node.js相关的应用运行在后台，保持运行状态。

Github仓库地址：https://github.com/Unitech/pm2
官方文档：https://pm2.io/
安装：npm install --global pm2
安装成功后提示（注意框出来的部分）:
执行以下代码，-s后的第一个路径是红线框中的路径:
```
ln -s /usr/local/node-v12.16.1-linux-x64/bin/pm2 /usr/local/bin/pm2
```
在执行pm2试试吧
启动：pm2 start 脚本路径
或者执行命令： pm2 start npm – start
关闭：pm2 stop id/name
pm2常用命令

现代化的部署方式（CI/CD）- 自动化部署

在这里插入图片描述

CI/CD服务：

Jenkins
Gitlab CI
Github Actions
Travis CI
Circle CI
…

Nuxt.js发布部署

使用Github Actions 实现自动部署

环境准备

Linux服务器
把代码提交到Github远程仓库

配置Github Access Token

生成：https://github.com/settings/tokens
配置到项目的Secrets中：https://github.com/violet-fortend/realworld-nuxtjs/settings/secrets

配置Github Actions执行脚本

在项目根目录创建.github/workflows目录
下载main.yml到workflows目录中
https://gist.github.com/lipengzhou/b92f80142afa37aea397da47366bd872
修改配置
配置PM2配置文件
提交更新
查看自动部署状态
访问网站
提交更新…