未加星标

详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染

2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js

几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是Nuxt.js

一、快速模板

在已经安装了 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 启动服务

二、重要目录

生成的 项目目录 如下

详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

大部分文件夹名称 都是 nuxt 默认保留的,不可修改

其中比价比较关键的目录有三个:

1. components 组件目录

详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

一般用来存放 非页面级别 的组件,如 header、footer 等公共组件

该目录下的组件具有常规 vue 组件的方法和特性,不会被 nuxt.js 扩展特性

2. layouts 布局目录

详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

可以修改该目录下的 default.vue 来修改默认布局

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

其中 <nuxt/> 是必需的,页面的主体内容会显示在这里 (类似于根节点的 <router-view/>)

此外还可以在目录下新增 error.vue 作为错误页面,具体的写法可以参考官方文档

3. pages 页面目录

详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

用于存放页面级别的组件,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 方法的第一个参数为上下文对象 context,具体属性可以 查看这里

由于asyncData方法是在组件初始化前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象

三、使用插件

如果项目中还需要引入其他的第三方插件,可以直接在页面中引入,这样在打包的时候,会将插件打包到页面对应的 js 里面

但要是别的页面也引入了同样的插件,就会重复打包。如果没有需要分页打包的需求,这时候可以配置 plugins

以 element-ui 为例,在安装了 element-ui 之后,在 plugins 目录下创建 elementUI.js

详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

然后在根目录的 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">
<div>
<img src="~/assets/about.png" alt="">
</div>
<h1>{{$store.state.info}}</h1>
</section>
</template>
<script>
export default {
fetch({ store }) {
return store.dispatch('loadAboutMeInfo')
},
name: 'about',
data () {
return {}
}
}
</script>

成果演示:

详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


您可能感兴趣的文章:详解Nuxt.js Vue服务端渲染摸索详解基于 Nuxt 的 Vue.js 服务端渲染实践

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: ReactSEO数据需求数据处理
tags: gt,lt,js,vue,Vue,plugins,axios,nuxt,页面,about,目录,name,组件,插件,store
分页:12
转载请注明
本文标题:详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
本站链接:https://www.codesec.net/view/574877.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(62)