详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是Nuxt.js 一、快速模板在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板 其中 MyProject 是项目文件夹名称,可自定义 通过 npm install (似乎用 yarn install更顺利) 安装依赖之后,可以直接 npm run dev 在开发环境启动项目默认启动的地址为 http://localhost:3000/,可以在 package.json中添加以下配置来修改主机端口号开发完成后执行 npm run build 打包代码,最后 npm start 启动服务 二、重要目录生成的 项目目录 如下 大部分文件夹名称 都是 nuxt 默认保留的,不可修改其中比价比较关键的目录有三个: 1. components 组件目录一般用来存放 非页面级别的组件,如 header、footer 等公共组件该目录下的组件具有常规 vue 组件的方法和特性,不会被 nuxt.js 扩展特性 2. layouts 布局目录可以修改该目录下的 default.vue 来修改默认布局 其中 此外还可以在目录下新增 error.vue 作为错误页面,具体的写法可以参考官方文档 3. pages 页面目录用于存放页面级别的组件,nuxt 会根据该目录下的页面结构生成路由 比如上图中的页面结构,会生成这样的路由配置: 此外,该目录下的 vue 组件还具备一些Nuxt.js 提供的特殊功能特性 其中 asyncData方法比较常用,支持异步数据处理这个方法会在 页面组件每次加载之前被调用,然后获取数据并返回给当前组件 {
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 然后在根目录的 nuxt.config.js 中添加配置项 build.vendor 和 plugins 这里的 plugins 属性用来配置 vue.js 插件,也就是 可以用 Vue.user() 方法的插件默认只需要 src 属性,另外还可以配置 ssr: false,让该文件只在客户端被打包引入 如果是像 axios 这种第三方 (不能 use) 插件,只需要在 plugins 目录下创建 axios.js import Vue from 'vue'
import axios from 'axios' const service = axios.create({ Vue.prototype.$ajax = axios 然后在 build.vendor 中添加配置 (不需要配置plugins) 这样在打包的时候,就会把 axios 打包到 vendor.js 中 四、Vuex 状态树如果在 store 目录下创建了 index.js,nuxt.js 会根据该目录下的文件创建 Vuex 状态树 import Vue from 'vue'
import Vuex from 'vuex' import Axios from '~/plugins/axios.js'; Vue.use(Vuex) const store = () => new Vuex.Store({ export default store Nuxt.js 内置引用了 vuex 模块,不需要额外安装 上面的代码中,我在 actions 中写了一个 loadAboutMeInfo() 方法,用来请求 /api/about 接口 然后在 about.vue 页面中调用 {{$store.state.info}}成果演示:
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |