Vue에서 서버 렌더링 Nuxt를 구현하는 방법

이 글에서는 주로 Vue 서버 렌더링 Nuxt 연구 노트를 소개하고 참고할 수 있도록 하겠습니다.

인터넷에 SSR에 대한 글이 많아서 처음에는 헷갈렸어요. 그런 다음 Vue.js Server Rendering Guide와 nuxt 공식 웹사이트에 가서 살펴보았는데, 대부분의 기사가 공식 웹사이트의 내용을 기반으로 했으며 그 중 정말 명확하고 간결한 기사는 거의 없다는 것을 알았습니다. 그래서 모든 분들이 Vue SSR을 빨리 이해할 수 있도록 도움을 드리고자 SSR에 대해 알아보는 글을 쓰고 싶었습니다.

SSR이란 무엇인가요?

SSR, 즉 서버 렌더링이란 Vue 페이지를 서버 측에서 렌더링하여 html 파일을 생성하고, html 페이지를 브라우저에 전달하는 것을 의미합니다. 장점:

1. SEO 실제 콘텐츠 없이 하나의 HTML과 하나의 app.js만 있는 SPA의 HTML과 달리 SSR에서 생성된 HTML에는 콘텐츠가 있으므로 검색 엔진이 페이지 콘텐츠를 색인화할 수 있습니다.

2. 더 빠른 콘텐츠 도착 시간 기존 SPA 애플리케이션은 서버에서 Bundle.js를 가져온 다음 이를 구문 분석하고 클라이언트의 DOM에 마운트합니다. 반면 SSR은 HTML 문자열을 브라우저에 직접 전달합니다. 첫 화면 로딩 시간이 대폭 단축됩니다.

아래 두 사진을 보면 첫 번째 사진이 SSR로 생성한 HTML 페이지이고, 두 번째 사진이 기존 SPA로 생성한 HTML 페이지입니다.

SSR

SPA

Nuxt.js

공식 SSR 소개와 Nuxt.js 문서를 읽었습니다. 본질적으로 SSR은 노드 백엔드의 작동 동작입니다. 단지 프런트엔드 코드를 잘 작성하고 싶은 사람으로서 너무 귀찮게 하고 싶지는 않습니다. 그리고 Nuxt.js는 SSR의 기능을 완벽하게 통합합니다. 바로 사용해보세요~ 관계자들은 SSR 프로젝트 구축에 Nuxt.js를 사용하는 것도 추천합니다.

Benefits

Nuxt.js는 SSR을 직접 작성하는 것보다 몇 가지 장점이 있다고 생각합니다.

1. Webpack을 구성할 필요가 없습니다. 처음에 Webpack 구성을 찾고 있었는데 설명서를 읽은 후 nuxt가 이를 패키지로 제공한다는 것을 알았습니다. Webpack 구성을 수정해야 하는 경우 nuxt.config.js 파일을 수정하면 됩니다.

2. 노드 지식이 필요하지 않습니다. vue 프런트 엔드를 작성할 수 있는 한 SSR을 작성할 수 있습니다. SSR, 노드, 익스프레스의 구성 방법을 알 필요가 없습니다(그러나 대부분의 프런트엔드는 이제 노드 지식을 가지고 있습니다~).

3. 통합 vue 패밀리 버킷, 직접 사용 가능. vue-cli만큼 편리합니다. Nuxt 설치 - 구성요소 작성 - 서비스 컴파일 및 시작 - 효과 확인. 그렇게 간단합니다.

4. 간단한 구성과 친숙한 문서: Nuxt.js 문서를 주의 깊게 살펴보면 많은 내용을 다루지는 않지만 모든 기능을 갖추고 있어 시작하기에 매우 적합하다는 것을 알 수 있습니다.

설치

설치 방법은 여기입니다. 매우 간단합니다. 템플릿을 생성한 다음 npm으로 종속성을 설치하고 마지막으로 실행합니다.

간단한 단계를 따르세요.

// vue-cli 创建nuxt模板项目
$ vue init nuxt-community/starter-template <project-name>
// 安装依赖项
$ cd <project-name>
$ npm install
// 编译并启动服务
$ npm run dev
// 打开 http://localhost:3000

설치 중 발생하는 문제:

Nuxt.js는 async...await 구문을 사용하고, 하위 버전의 노드에서는 이 구문을 지원하지 않으므로 노드를 버전 7.0 이상으로 업그레이드해야 합니다~

그러면 cnpm을 사용하지 않는 것이 좋습니다. cnpm을 설치하고 실행할 때 항상 오류가 발생하는데 이는 함정처럼 느껴집니다.

디렉토리 구조

Nuxt.js는 디렉토리 구조에 대해 이야기하는데 많은 시간을 소비합니다. 사실, 디렉토리 구조를 이해하면 Nuxt.js의 일반적인 개요를 이해할 수 있습니다. Nuxt.js는 우리를 위해 모든 것을 구성했습니다. 요구 사항에 따라 해당 디렉터리에 파일을 생성하고 코드를 작성하기만 하면 됩니다.

1. JavaScript, SASS, LESS 등과 같이 컴파일해야 하는 리소스 파일을 자산으로 설정합니다.

2. static 이미지 리소스와 같이 컴파일할 필요가 없는 정적 리소스 파일입니다.

3. 컴포넌트 이름에서 알 수 있듯이 *.vue 컴포넌트가 저장되는 곳입니다. 기존의 Vue 컴포넌트 작성 방법.

4. layouts 레이아웃 디렉토리. 여기서 태그는 우리가 작성하는 페이지 콘텐츠입니다. 탐색 표시줄 및 하단 표시줄과 같은 섹션을 추가하는 데 사용할 수 있습니다.

5. middleware 미들웨어 디렉터리, 이른바 미들웨어는 페이지와 페이지 점프에서 실행되는 함수 방식입니다. 페이지 이동 시 사용자 정보를 확인하는 등.

6. 페이지 페이지 디렉토리. 여기가 포인트입니다~ 디스플레이 페이지를 저장하는 곳입니다. 이 디렉터리의 파일은 브라우저 액세스를 위한 해당 라우팅 경로로 변환됩니다. 또한 이 디렉터리의 *.vue 페이지 파일에 있는 Nuxt.js는 서버 렌더링에서 이벤트를 처리하기 위한 몇 가지 특별한 방법을 제공합니다. 라우팅 및 특수 방법에 대한 자세한 내용은 다음과 같습니다.

1. pages Routing

2. 페이지 구성 요소에 대한 간략한 소개입니다. 특수 구성 항목의 구체적인 사용법은 API를 참조하세요.

7. plugins 플러그인 디렉토리, mint-ui와 같은 타사 플러그인이 여기에 배치됩니다~ 구체적인 사용법은 여기를 참조하세요.

8. store vuex 상태 관리자 디렉터리, 디렉터리가 비어 있으면 Nuxt.js는 vuex를 활성화하지 않습니다. 이 폴더에 index.js 파일을 만들 때 vuex 상태 관리자를 사용할 수 있습니다. 사용 방법은 다음과 같습니다!

9. nuxt.config.js 该文件是 Nuxt.js 的唯一配置项，之前提过 Nuxt.js 将 Webpack 等一众配置都封装好了，所以如果需要特殊配置，只需要修改该文件来覆盖默认配置即可。具体配置参数请查阅API。

10. package.json 不解释……

Demo演示

好消息，VueStudyDemos又更新啦！欢迎Star~本文Demo已收入到VueStudyDemos中。

下面我们来简单实现下各文件夹所提到的功能。

资源加载

我在 assets 文件夹下添加了 font-awesome 字体库，在 static 文件夹中放了张 Vue 的 logo 图片。然后对资源进行调用。

<i class="fa fa-address-book" aria-hidden="true"></i>
<img  src="/static/imghwm/default1.png"  data-src="~/static/logo.png"  class="lazy"   / alt="Vue에서 서버 렌더링 Nuxt를 구현하는 방법" >

这里需要将 font-awesome 的 css 变为全局 css，避免每个用到的页面中都 import 字体库的css。所以我们在 nuxt.config.js 中添加如下配置。

module.exports = {
 ...
 css: [
  '~/assets/font-awesome/css/font-awesome.min.css'
 ],
 ...
}

组件定义

组件存放在 components 文件夹下，这个我们讲目录的时候提到过。组件的用法和常用 vue 组件用法一致。 定义组件 Avatar，然后在 Page 页面中使用。

<template>
 <avatar/>
</template>
<script>
import avatar from &#39;~/components/Avatar&#39;
export default {
  ...
  components: {
    avatar
  }
};
</script>

布局

在 layouts 目录中，default 是默认布局。我们可以修改默认布局也可以新建布局来使用。

在布局文件中 标签是我们要服务器渲染的区域。

下面我们来创建个布局玩玩。

// layouts/page.vue
<template>
<p>
  <mt-header fixed title="标题2"></mt-header>
  <nuxt/>
</p>
</template>

然后我们来使用布局，在 pages 页面中配置 layout 选项（如果不配置默认就是 default）。

export default {
  ...
  layout: 'page' // 默认是 'default'
};

中间件

所谓中间件，就是在两个页面跳转之间执行的行为。比如我定义一个中间件 add.js

export default function ({ store }) {
  store.commit('increment')
}

然后在 nuxt.config.js 中进行配置：

module.exports = {
 ...
 router: {
  middleware: 'add'
 },
 ...
}

这样，在每次页面跳转的时候都会执行一次中间件方法了。当然，也可以单独定义某个页面的中间件，具体看官网啦~

页面

页面，就是在pages目录下的 *.vue 文件，Nuxt.js 将目录结构配置为 vue-router 路由系统，所以我们可以直接通过文件名来访问到相应页面（先不提特殊路由）。

比如 pages/app.vue 文件就可以通过 http://localhost:3000/app 来进行访问。

注意：页面组件写法与常用 Vue 组件写法相同，但 Nuxt.js 还提供了一些特殊配置项来配置服务器渲染过程中的行为。具体有啥配置请看 页面文档。

路由

路由就是使 pages 目录能够直接访问的原因。Nuxt.js 非常巧妙地使用目录结构和文件名称将 vue-router 的各种用法都涵盖进去了。如动态路由、嵌套路由等。具体可参考文档。也可以看看demo的 pages 目录。

插件

对于前端项目，插件的使用当然是必不可少的。官网上对这方面讲的很清楚。我贴一下 demo 中的用法。这里用的是 mint-ui 库。

// plugins/mint-ui.js
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

// nuxt.config.js
module.exports = {
 build: {
  vendor: ['mint-ui']
 },
 plugins: [
  '~plugins/mint-ui'
 ]
}

这样就可以使用第三方库 mint-ui 啦！

<template>
 <p>
  <mt-navbar v-model="selected">
    <mt-tab-item id="1">选项一</mt-tab-item>
    <mt-tab-item id="2">选项二</mt-tab-item>
    <mt-tab-item id="3">选项三</mt-tab-item>
  </mt-navbar>

  <!-- tab-container -->
  <mt-tab-container v-model="selected">
    <mt-tab-container-item id="1">
      <mt-cell v-for="n in 10" :key="n" :title="&#39;内容 &#39; + n" />
    </mt-tab-container-item>
    <mt-tab-container-item id="2">
      <mt-cell v-for="n in 4" :key="n" :title="&#39;测试 &#39; + n" />
    </mt-tab-container-item>
    <mt-tab-container-item id="3">
      <mt-cell v-for="n in 6" :key="n" :title="&#39;选项 &#39; + n" />
    </mt-tab-container-item>
  </mt-tab-container>
 </p>
</template>

vuex

对于 vuex，用法有两种：普通方式和模块方式，用法和我们常用的 vuex 一样。我的demo中是直接复制官网的代码。

需要注意的是，vuex 的数据会存在context对象中，我们可以通过context对象获取状态数据。

发布

发布有两种方式服务器应用渲染部署和静态部署，发布方式看这里

最后

去看 Nuxt.js 的 API，会发现 Nuxt.js 真的是高度封装。对于 Nuxt.js 生成的模板项目，只有一些必要配置是需要我们去完成的。Nuxt.js 可以说是一个非常友好而强大的 SSR 框架了。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue.js中实现分页中单击页码更换页面内容

webpack 4.0.0-beta.0版本新特性（详细教程）

在vue2.0组件中如何实现传值、通信

위 내용은 Vue에서 서버 렌더링 Nuxt를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!