Vue 서버 렌 더 링 Nuxt 학습 노트
SSR 이란 무엇 입 니까?
SSR,즉 서버 렌 더 링 은 서버 에서 Vue 페이지 를 렌 더 링 하여 html 파일 을 생 성하 고 html 페이지 를 브 라 우 저 에 전송 하 는 것 입 니 다.장점:
SSR
SPA
Nuxt.js
나 는 공식 SSR 의 소 개 를 보고 Nuxt.js 의 문서 도 보 았 다.본질 적 으로 SSR 은 node 백 엔 드 의 조작 행위 로 전단 코드 만 잘 쓰 려 는 나 로 서 너무 괴 롭 히 고 싶 지 않다.그리고 Nuxt.js 는 SSR 의 기능 을 완벽 하 게 통합 시 켰 다.상 자 를 열 면 바로~공식 적 으로 도 Nuxt.js 를 사용 하여 SSR 프로젝트 를 만 드 는 것 을 추천 합 니 다.
좋 은 점
나 는 Nuxt.js 가 자신 이 SSR 을 쓰 는 것 보다 몇 가지 좋 은 점 이 있다 고 생각한다.
설치 방법 여기.간단 합 니 다.템 플 릿 을 만 든 다음 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 문법 을 사 용 했 기 때문에 낮은 버 전의 node 는 이 문법 을 지원 하지 않 기 때문에 node 를 7.0 버 전 으로 업그레이드 해 야 합 니 다~
그리고 cnpm 를 사용 하지 말 것 을 건의 합 니 다.저 는 cnpm 로 운행 오류 가 발생 하여 구덩이 가 있 는 것 같 습 니 다.
디 렉 터 리 구조
Nuxt.js 는 디 렉 터 리 구 조 를 설명 하 는 데 많은 시간 을 들 였 는데 사실은 디 렉 터 리 구 조 를 알 고 Nuxt.js 의 대략적인 내용 을 알 게 되 었 다.Nuxt.js 는 모든 것 을 설정 해 주 었 습 니 다.요구 에 따라 해당 디 렉 터 리 에 파일 쓰기 코드 를 만 들 면 됩 니 다.
좋 은 소식,VueStudyDemos 이 또 업데이트 되 었 습 니 다!어서 오 세 요.스타~본문 데모 이 Vue Study Demos 에 들 어 왔 습 니 다.
다음은 각 폴 더 가 언급 한 기능 을 간단하게 실현 합 니 다.
자원 로드
assets 폴 더 에 font-awesome 글꼴 라 이브 러 리 를 추가 하고 static 폴 더 에 Vue 로고 그림 을 넣 었 습 니 다.그리고 자원 을 호출 합 니 다.
<i class="fa fa-address-book" aria-hidden="true"></i>
<img src="~/static/logo.png" />
module.exports = {
...
css: [
'~/assets/font-awesome/css/font-awesome.min.css'
],
...
}
구성 요 소 는 components 폴 더 에 저 장 됩 니 다.이것 은 우리 가 디 렉 터 리 를 말 할 때 언급 한 것 입 니 다.구성 요소 의 용법 은 자주 사용 하 는 vue 구성 요소 의 용법 과 일치 합 니 다.구성 요소 Avatar 를 정의 하고 Page 페이지 에서 사용 합 니 다.
<template>
<avatar/>
</template>
<script>
import avatar from '~/components/Avatar'
export default {
...
components: {
avatar
}
};
</script>
layouts 디 렉 터 리 에서 default 는 기본 레이아웃 입 니 다.기본 레이아웃 을 수정 할 수도 있 고 새 레이아웃 으로 사용 할 수도 있 습 니 다.
레이아웃 파일 에서탭 은 서버 가 렌 더 링 할 영역 입 니 다.
다음은 우리 가 포석 을 만들어 서 놀 자.
// layouts/page.vue
<template>
<div>
<mt-header fixed title=" 2"></mt-header>
<nuxt/>
</div>
</template>
export default {
...
layout: 'page' // 'default'
};
미들웨어 란 두 페이지 를 뛰 어 넘 는 사이 에 실행 되 는 행위 다.예 를 들 어 중간 부품 add.js 를 정의 합 니 다.
export default function ({ store }) {
store.commit('increment')
}
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 목록 도 볼 수 있 습 니 다.
플러그 인
전단 항목 에 대해 플러그 인의 사용 은 당연히 없어 서 는 안 된다.홈 페이지 에 서 는 이 방면 에 대해 매우 분명하게 말한다.데모 의 용법 을 붙 여 보 겠 습 니 다.여 기 는 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'
]
}
<template>
<div>
<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="' ' + n" />
</mt-tab-container-item>
<mt-tab-container-item id="2">
<mt-cell v-for="n in 4" :key="n" :title="' ' + n" />
</mt-tab-container-item>
<mt-tab-container-item id="3">
<mt-cell v-for="n in 6" :key="n" :title="' ' + n" />
</mt-tab-container-item>
</mt-tab-container>
</div>
</template>
vuex 에 대해 용법 은 두 가지 가 있 는데 그것 이 바로 일반 방식 과 모듈 방식 이다.용법 은 우리 가 자주 사용 하 는 vuex 와 같다.내 demo 에 서 는 홈 페이지 의 코드 를 직접 복사 합 니 다.
주의해 야 할 것 은 vuex 의 데 이 터 는 context 대상 에 존재 합 니 다.저 희 는 context 대상 을 통 해 상태 데 이 터 를 얻 을 수 있 습 니 다.
발표 하 다.
발 표 는 두 가지 방식 으로 서버 응용 렌 더 링 배치 와 정적 배치 가 있 습 니 다.발표 방식 은 여 기 를 보십시오.
마지막.
Nuxt.js 의 API 를 보면 Nuxt.js 가 정말 고도 로 봉 인 된 것 을 발견 할 수 있 습 니 다.Nuxt.js 에서 생 성 된 템 플 릿 항목 에 대해 서 는 우리 가 완성 해 야 할 설정 만 있 습 니 다.Nuxt.js 는 매우 우호 적 이 고 강력 한 SSR 프레임 워 크 라 고 할 수 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
