집 > 기사 > 웹 프론트엔드 > Nuxt.js Vue 서버 측 렌더링에 대한 자세한 설명

Nuxt.js Vue 서버 측 렌더링에 대한 자세한 설명

小云云원래의: 2018-02-09 10:11:341802검색

Nuxt.js는 매우 간단하고 사용하기 쉽습니다. 간단한 프로젝트에서는 nuxt를 종속 구성 요소로 추가하기만 하면 됩니다. 이 글은 주로 Nuxt.js Vue 서버 측 렌더링을 소개하고 참고 자료를 제공합니다.

Vue는 간단하고 이해하기 쉬운 API, 효율적인 데이터 바인딩 및 유연한 구성 요소 시스템으로 인해 많은 프런트 엔드 개발자가 선호합니다. 국내 많은 기업들이 프로젝트 개발에 Vue를 사용하고 있습니다. 우리가 사용하고 있는 Jianshu는 Vue를 기반으로 구축되었습니다.

우리는 SPA 프런트엔드 렌더링에 두 가지 주요 문제점이 있다는 것을 알고 있습니다: (1) SEO. 검색 엔진 크롤러가 클라이언트가 렌더링한 페이지 메타 정보 및 기타 SEO 관련 정보를 크롤링하기 어렵기 때문에 사용자가 검색 엔진에서 웹사이트를 검색할 수 없습니다. (2) 사용자 경험. 대규모 webApp을 패키징한 후의 js는 매우 크기 때문에 require.js와 같은 모듈별 로딩, 비동기 요청이 있습니다. webpack이 대중화되면 코드 분할이 됩니다. 그럼에도 불구하고, 사용자의 기기에 따라 페이지의 초기 렌더링이 여전히 매우 느릴 수 있고, 흰색 화면을 기다리는 시간이 너무 길어 점점 까다로워지는 사용자 그룹에게는 허용되지 않습니다.

따라서 공식 홈페이지 등 홍보 페이지를 표시하는 경우에는 서버사이드 렌더링(SSR)을 수행해야 합니다. nuxt.js

$ vue init nuxt-community/starter-template <你项目的名字>
// 后面 安装依赖你懂的

// 安装koa版本
$ vue init nuxt/koa <你的项目名字>

Run

npm run dev

애플리케이션이 이제 http://localhost:3000

에서 실행 중입니다. 참고: Nuxt.js는 페이지의 파일 변경 사항을 수신합니다. 새 페이지를 추가할 때 응용 프로그램을 수동으로 다시 시작할 필요가 없습니다.

Routing

nuxt는 페이지 디렉터리 구조를 기반으로 라우팅 구성을 생성합니다

비동기 데이터 asyncData

asyncData를 호출하려면 페이지 구성 요소가 있어야 합니다(즉, 구성 요소 아래에서 호출할 수 없으며 반드시 라우팅 페이지가 됩니다)

비동기 데이터 beforeCreate, 생성됨

참고: 모든 vue 구성 요소의 수명 주기에서는 beforeCreate 및 Created 두 후크만 브라우저 측과 서버 측 모두에서 호출됩니다. 브라우저 측에서 호출됩니다.

mint-ui 플러그인을 사용하세요

먼저 플러그인 폴더에 mint-ui.js 플러그인 파일을 추가해야 합니다

import Vue from "vue";
import Mint from "mint-ui";

Vue.use(Mint);

nuxt.config.js

에서 플러그인 필드를 구성하세요

/**
  * 配置第三方插件
  */
 plugins: [{ src: "~plugins/mint-ui", ssr: true }],

//同时nuxt还支持区分只在浏览器中运行和只在服务端运行的插件

//只在浏览器运行：配置nuxt.config.js中plugins字段，将引入的插件属性设置为ssr： false
//只在服务端运行：直接在webpack打包server.bundle.js文件中，将process.SERVER_BUILD设置为true即可

layoutlayout

1.nuxt.js는 레이아웃 레이아웃을 통해 페이지의 여러 레이아웃을 편리하게 전환할 수 있는 새로운 개념의 레이아웃을 구현합니다. 이 프로젝트에서는 일반적으로 사용되는 세 가지 레이아웃이 구현되었습니다. 즉: 1) 고정된 왼쪽 열과 오른쪽 열의 동적 너비가 있는 2열 레이아웃 2. 중간에 프롬프트 상자가 있는 레이아웃 구성인 오류 페이지 프롬프트; 3. 순수한 흰색 페이지 레이아웃.

특별히 개발된 페이지에서 기본 레이아웃을 사용하면 페이지의 레이아웃을 지정할 필요가 없습니다. nuxt 프레임워크는 지정된 레이아웃이 없는 페이지를 기본 레이아웃과 자동으로 연결합니다. 레이아웃을 지정해야 하는 경우 레이아웃 필드에서 레이아웃을 지정합니다. 그림에 표시된 것처럼 전체 레이아웃은 로그인 페이지에서 지정됩니다.

Nuxt.js Vue 서버 측 렌더링에 대한 자세한 설명

관련 기사