Nuxt.js 기반 Vue의 서버사이드 렌더링에 대한 자세한 설명

Vue를 직접 사용하여 프런트엔드 단일 페이지 애플리케이션을 구축하세요. 페이지 소스 코드에는 몇 줄의 간단한 HTML만 포함되어 있어 웹사이트의 SEO에 도움이 되지 않습니다. 이 글은 주로 Nuxt.js 사이드엔드 렌더링(SSR)을 기반으로 한 Vue 서비스 구현에 대한 자세한 설명을 소개합니다. 관심 있는 친구는 이를 참고할 수 있습니다.

Vue를 직접 사용하여 프런트엔드 단일 페이지 애플리케이션을 구축하세요. . 페이지 소스 코드에는 몇 줄의 간단한 HTML만 포함되어 있어 웹 사이트의 SEO에 도움이 되지 않습니다. 이때 서버 측 렌더링이 필요합니다.

2016년 10월 25일, zeit.co 팀은 React 서버 측 렌더링 애플리케이션 프레임워크 Next.js

몇 시간 후, Vue.js 기반의 서버 측 렌더링 애플리케이션 프레임워크가 탄생했는데, 이는 Next.js

입니다. 1. 빠른 템플릿

vue-cli가 설치되어 있다는 전제 하에 nuxt 프로젝트 템플릿을 빠르게 생성할 수 있습니다

vue init nuxt-community/starter-template MyProject

여기서 MyProject는 프로젝트 폴더 이름으로 사용자 정의가 가능합니다

npm install을 통해(yarn install을 사용하면 더 원활한 것 같습니다.) 종속성을 설치한 후 개발 환경에서 직접 npm run dev를 실행하여 프로젝트를 시작할 수 있습니다

기본 시작 주소는 http://localhost입니다. :3000/. package.json에 다음 구성을 추가하여 호스트 포트 번호

 "config": {
  "nuxt": {
   "host": "0.0.0.0",
   "port": "7788"
  }
 },

를 수정한 후 npm run build를 실행하여 코드를 패키징하고 마지막으로 npm start를 시작합니다. service

2. 중요 디렉터리

생성된 프로젝트 디렉터리는 다음과 같습니다

대부분의 폴더 이름 은 기본적으로 nuxt에 예약되어 있으며 수정할 수 없습니다

그중 세 개가 있습니다 가격 비교에 더 중요한 디렉터리:

1. 구성 요소 구성 요소 디렉터리

는 일반적으로 머리글, 바닥글 및 기타 공개 구성 요소와 같은 페이지 수준이 아닌 구성 요소 를 저장하는 데 사용됩니다. 이 디렉터리는 일반 vue 구성 요소의 메서드와 특성을 가지고 있습니다. nuxt.js

2. 레이아웃 레이아웃 디렉터리

이 디렉터리의 default.vue를 수정하여 기본 레이아웃을 수정할 수 있습니다

<template>
 <p>
  <my-header></my-header>
  <nuxt/>
  <my-footer></my-footer>
 </p>
</template>

1b56973de32a614416db2899e59c3e12가 필수인 경우 페이지의 주요 내용이 여기에 표시됩니다(루트 노드의 99ae171a883fff6fa2f384572360bc0a와 유사)

추가로 다음을 수행할 수 있습니다. 또한 특정 작성 방법은 공식 문서

3를 참조하세요. 페이지 페이지 디렉토리

는 nuxt를 저장하는 데 사용됩니다. 이 디렉터리의 페이지 구조를 기반으로 경로를 생성합니다

예를 들어 위 그림의 페이지 구조는 다음과 같은 라우팅 구성을 생성합니다.

router: {
 routes: [
  {
   name: 'index',
   path: '/',
   component: 'pages/index.vue'
  },
  {
   name: 'about',
   path: '/about',
   component: 'pages/about.vue'
  },
  {
   name: 'classroom',
   path: '/classroom',
   component: 'pages/classroom.vue',
   children: [
    {
     path: 'student',
     component: 'pages/classroom/student.vue',
     name: 'student'
    },
    { //定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录
     path: ':id',
     component: 'pages/classroom/_id.vue',
     name: 'classroom-id'
    }
   ]
  }
 ]
}

또한 이 디렉터리의 vue 구성 요소에는 몇 가지 특별한 기능도 있습니다. Nuxt.js에서 제공

그 중

asyncData

메소드가 더 많이 사용되고 비동기 데이터 처리를 지원합니다이 메소드는

페이지 컴포넌트에서 사용됩니다

각 로드 전에 호출되어 데이터를 가져와서 반환합니다.

asyncData ({ params, error }) {
  return axios.get(`api/posts/${params.id}`)
  .then((res) => {
   return { name: res.data.name}
  })
  .catch((e) => {
   error({ statusCode: 404, message: 'not found' })
  })
 }

asyncData 메소드의 첫 번째 매개변수는 컨텍스트 객체 컨텍스트입니다. 구체적인 속성은 여기에서 볼 수 있습니다.

구성 요소가 초기화되기 전에 asyncData 메소드가 호출되므로

메소드에서 이를 통해 구성요소의 인스턴스 객체를 참조하는 방법은 없습니다. 3. 플러그인 사용 프로젝트에 다른 타사 플러그인을 도입해야 하는 경우 이를 도입할 수 있습니다. 패키징을 하면 해당 페이지에 해당하는 js에 플러그인이 패키징됩니다

그러나 다른 페이지에서도 동일한 플러그인이 소개되면 반복적으로 패키징됩니다. 페이징 패키징이 필요 없다면 이때 플러그인을 구성하면 됩니다

element-ui를 예로 들어, element-ui를 설치한 후 플러그인 디렉토리

에 elementUI.js를 생성한 다음 nuxt를 생성합니다. 루트 디렉토리. config.js

 build: {
  vendor: ['~/plugins/elementUI.js']
 },
 plugins: [
  {src: '~/plugins/elementUI.js'},
 ]

에 구성 항목 build.vendor 및 플러그인을 추가하세요. 여기의 플러그인 속성은 vue.js 플러그인을 구성하는 데 사용됩니다. 즉, Vue.user() 메서드를 사용할 수 있습니다.

플러그인의 경우

기본적으로 src 속성만 설정하면 ssr: false를 구성하여 파일이 axios와 같은 타사(사용할 수 없는) 플러그인인 경우에만 클라이언트에서 가져오도록 할 수 있습니다. 플러그인 디렉토리

// axios.js

import Vue from 'vue'
import axios from 'axios'

const service = axios.create({
 baseURL: '/api'
})

Vue.prototype.$ajax = axios
export default service

에 axios.js를 생성하기만 하면 됩니다.

然后在 build.vendor  中添加配置 （不需要配置 plugins）

build: {
 vendor: ['~/plugins/axios.js']
}

这样在打包的时候，就会把 axios 打包到 vendor.js 中

四、Vuex 状态树

如果在 store 目录下创建了 index.js，nuxt.js 会根据该目录下的文件创建 Vuex 状态树

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import Axios from '~/plugins/axios.js';

Vue.use(Vuex)

const store = () => new Vuex.Store({
 state: {
  author: 'WiseWrong',
  info: ''
 },
 mutations: {
  setInfo (state, val) {
   state.info = val
  }
 },
 actions: {
  loadAboutMeInfo ({commit, state}) {
   return Axios.get(`/about`)
    .then(res => {
     console.log('ajax is success')
     console.log(res.data.info)
     commit('setInfo', res.data.info)
    })
    .catch(err => {
     console.log('error')
    })
  }
 }
})

export default store

Nuxt.js 内置引用了 vuex 模块，不需要额外安装

上面的代码中，我在 actions 中写了一个 loadAboutMeInfo() 方法，用来请求 /api/about 接口

然后在 about.vue 页面中调用

// about.vue 

<template>
 <section class="container">
  <p>
   <img src="~/assets/about.png" alt="">
  </p>
  <h1>{{$store.state.info}}</h1>
 </section>
</template>

<script>
export default {
 fetch({ store }) {
  return store.dispatch(&#39;loadAboutMeInfo&#39;)
 },
 name: &#39;about&#39;,
 data () {
  return {}
 }
}
</script>

成果演示：

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

相关文章：

ajax请求之返回数据的顺序问题分析

Ajax异步提交数据返回值的换行问题实例分析

防止重复发送Ajax请求的解决方案

위 내용은 Nuxt.js 기반 Vue의 서버사이드 렌더링에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!