집 > 기사 > 웹 프론트엔드 > Nuxt.js Vue 서버 측 렌더링 탐색

Nuxt.js Vue 서버 측 렌더링 탐색

亚连원래의: 2018-06-06 17:58:492163검색

이 글은 주로 Nuxt.js Vue 서버사이드 렌더링에 대한 자세한 설명을 소개하고 있으니 참고하시기 바랍니다.

이 기사는 서버 측 렌더링을 위해 nuxt를 사용합니다 https://zh.nuxtjs.org/

Nuxt.js는 매우 간단하고 사용하기 쉽습니다. 간단한 프로젝트에서는 nuxt를 종속 구성 요소로 추가하기만 하면 됩니다.

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 및 생성된 두 후크만 브라우저 측에서 호출되고 다른 후크는 서버 측에서만 호출됩니다. 브라우저 쪽.

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即可

레이아웃 레이아웃

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

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

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Nuxt.js Vue 서버 측 렌더링 탐색

관련 기사