Vue+Nuxt.js를 사용하여 서버 측 렌더링을 구현하는 방법
- php中世界最好的语言원래의
- 2018-05-26 16:30:453795검색
이번에는 Vue+Nuxt.js를 사용하여 서버 측 렌더링을 구현하는 방법과 Vue+Nuxt.js를 사용하여 서버 측 렌더링을 구현하는 notes에 대해 설명하겠습니다. 다음은 실제 사례입니다. 보세요.
Vue를 직접 사용하여 프런트엔드 단일 페이지 애플리케이션을 구축하세요. 페이지 소스 코드에는 몇 줄의 간단한 HTML만 포함되어 있어 웹사이트의 SEO에 도움이 되지 않습니다.
2016년 10월 25일, zeit.co 팀은 React 서버 측 렌더링 애플리케이션 프레임워크 Next.js를 출시했습니다.
몇 시간 후, Vue.js 기반의 서버 측 렌더링 애플리케이션 프레임워크가 탄생했습니다. Next.js와 비슷합니다
1. Quick template
vue-cli가 설치되어 있다는 전제하에 MyProject라는 이름으로 빠르게 nuxt 프로젝트 템플릿을 생성할 수 있습니다. npm install을 통해 커스터마이즈할 수 있는 프로젝트 폴더
(
yarn install을 더 원활하게 사용하는 것 같습니다) 종속성을 설치한 후 개발 환경프로젝트 시작에서 직접 npm run dev를 실행할 수 있습니다. 기본 시작 주소는 http://localhost:3000/ 이며
package.json에 추가할 수 있습니다. 다음 구성은 호스트 포트 번호를 수정하는 데 사용됩니다vue init nuxt-community/starter-template MyProject
개발이 완료되면 npm run build를 실행하여 패키징합니다. 코드를 작성하고 마지막으로 npm start 서비스를 시작합니다
두 번째, 중요한 디렉토리생성된 프로젝트 디렉토리는 다음과 같습니다
대부분의 파일 폴더 이름
가격 비교에 중요한 세 가지 디렉터리가 있습니다.
1. 구성 요소 구성 요소 디렉터리
는 일반적으로
구성 요소를 저장하는 데 사용됩니다. 이 디렉터리의 구성 요소는 일반 vue 구성 요소의 메서드와 특성을 가지며 nuxt.js
2로 확장되지 않습니다. 레이아웃 레이아웃 디렉터리이 디렉터리에서 default.vue를 수정하여 기본값을 수정할 수 있습니다. layout
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "7788"
}
},
여기서 추가로
추가특정 작성 방법은
는 페이지 수준 구성 요소를 저장하는 데 사용됩니다. 페이지 구조는 이 디렉토리의 내용에 따라 라우팅을 생성합니다
예를 들어 위 그림의 페이지 구조는 다음과 같은 라우팅 구성을 생성합니다:
<template> <p> <my-header></my-header> <nuxt/> <my-footer></my-footer> </p> </template>또한 이 디렉토리의 vue 구성 요소에는 몇 가지 특별한 기능이 있습니다. Nuxt.js에서 제공그 중
asyncData
메소드가 더 일반적으로 사용되며 비동기 데이터 처리를 지원합니다.이 메소드는페이지 컴포넌트를 로드할 때마다 호출된 다음 데이터를 가져와서 현재 컴포넌트
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'
}
]
}
]
}asyncData 메소드의 첫 번째 매개변수는 컨텍스트 객체 컨텍스트, 특정속성여기에서 확인할 수 있습니다
컴포넌트가 초기화되기 전에 asyncData 메소드가 호출되므로 인스턴스를 참조할 방법이 없습니다. 메소드3. 플러그인 사용프로젝트에서 여전히 필요한 경우 다른 타사 플러그인을 페이지에 직접 도입할 수 있습니다. 패키징 시 해당 플러그인이 페이지의 해당 js에 패키징되도록 그러나 동일한 플러그인이 다른 페이지에도 도입되면 반복적으로 패키징됩니다. 페이징 패키징이 필요하지 않다면 지금 플러그인을 구성할 수 있습니다
以 element-ui 为例，在安装了 element-ui 之后，在 plugins 目录下创建 elementUI.js
然后在根目录的 nuxt.config.js 中添加配置项 build.vendor 和 plugins
build: {
vendor: ['~/plugins/elementUI.js']
},
plugins: [
{src: '~/plugins/elementUI.js'},
]
这里的 plugins 属性用来配置 vue.js 插件，也就是 可以用 Vue.user() 方法 的插件
默认只需要 src 属性，另外还可以配置 ssr: false，让该文件只在客户端被打包引入
如果是像 axios 这种第三方 （不能 use） 插件，只需要在 plugins 目录下创建 axios.js
// axios.js
import Vue from 'vue'
import axios from 'axios'
const service = axios.create({
baseURL: '/api'
})
Vue.prototype.$ajax = axios
export default service
然后在 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('loadAboutMeInfo')
},
name: 'about',
data () {
return {}
}
}
</script>
成果演示：
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 Vue+Nuxt.js를 사용하여 서버 측 렌더링을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!