本文采用 nuxt 进行服务端渲染 https://zh.nuxtjs.org/
Nuxt.js 十分简单易用一个简单的项目只需将 nuxt 添加为依赖组件即可
vue 因其简单易懂的 API 高效的数据绑定和灵活的组件系统, 受到很多前端开发人员的青睐国内很多公司都在使用 vue 进行项目开发, 我们正在使用的简书, 便是基于 Vue 来构建的
我们知道, SPA 前端渲染存在两大痛点:(1)SEO 搜索引擎爬虫难以抓取客户端渲染的页面 meta 信息和其他 SEO 相关信息, 使网站无法在搜索引擎中被用户搜索到 (2) 用户体验大型 webApp 打包之后的 js 会很庞大, 于是就有了按模块加载, 像 require.js 一样, 异步请求 webpack 盛行, 就变成了代码分割即便如此, 受制于用户设备, 页面初次渲染还是有可能很慢, 白屏等待时间太长, 对日益挑剔的用户群体来说, 无法接受
因此, 对于那些展示宣传型页面, 如官网, 必须进行服务端渲染 (SSR) 安装 nuxt.js
$ vue init nuxt-community/starter-template <你项目的名字>
- // 后面 安装依赖你懂的
- // 安装 koa 版本
$ vue init nuxt / koa < 你的项目名字 >
运行
npm run dev
应用现在运行在 http://localhost:3000
注意: Nuxt.js 会监听 pages 目录中的文件变更并自动重启, 当添加新页面时没有必要手工重启应用
路由
nuxt 是根据 pages 目录结构生成路由配置
异步数据 asyncData
注意必须要页面组件才能调用 asyncData(就是 components 下是不能调用, 必须路由的页面才行)
异步数据 beforeCreate,created
注意: 在任何 vue 组件的生命周期内, 只有 beforeCreate 和 created 这两个钩子会在浏览器端和服务端均被调用; 其他的钩子都只会在浏览器端调用
使用插件 mint-ui
首先我们需要在 plugins 文件夹中添加插件文件 mint-ui.js
- import Vue from "vue";
- import Mint from "mint-ui";
- Vue.use(Mint);
在 nuxt.config.js 中配置 plugins 字段
- /**
- * 配置第三方插件
- */
- plugins: [{ src: "~plugins/mint-ui", ssr: true }],
- // 同时 nuxt 还支持区分只在浏览器中运行和只在服务端运行的插件
- // 只在浏览器运行: 配置 nuxt.config.js 中 plugins 字段, 将引入的插件属性设置为 ssr: false
- // 只在服务端运行: 直接在 webpack 打包 server.bundle.js 文件中, 将 process.SERVER_BUILD 设置为 true 即可
layout 布局
1.nuxt.js 实现了一个新的概念, layout 布局, 我们可以通过 layout 布 局方便的实现页面的多个布局之间方便的切换本项目中实现了三种常用的布局, 即: 1)两栏布局, 左栏固定, 右栏动态宽度; 2 错误页提示, 页面中间一个提示框的布局方案; 3 纯白页面布局
具体开发的页面中, 如果使用默认布局, 则不需指定页面的布局, nuxt 框架会自动对没有指定布局的页面和 default 布局进行关联如果需要指定布局, 则在 layout 字段中对布局进行指定如图在 login 页面中对 full 布局进行了指定
来源: http://www.jb51.net/article/134703.htm