Vue 服务端渲染 入门学习和注意事项（内含推荐文档）

为何使用服务端渲染

• 更好的 SEO，因为搜索引擎爬虫抓取工具能够直接查看彻底渲染的页面。

  组件化开发、先后端分离思想贯穿在现今前端开发中。使用vue(SPA)确实极大的优化咱们的开发体验和产品性能。可是对于网站这种须要搜索引擎爬取（seo），增长浏览量、增长权重的项目。SPA是不利于爬虫抓取项目（由于在爬虫抓完以后，js才加载，dom才渲染）。

• 更快的内容到达时间(time-to-content)，特别是对于缓慢的网络状况或运行缓慢的设备。

  不用等待全部js下载完毕并执行，才开始服务器渲染。所以会得到更好的用户体验。

使用技术栈

• vue
• nuxt（官网提供框架。 后文会针对提供一些区分和注意点）
• express
• axios(vue-resorce中止更新，官网推荐数据交互中间件)

若是感受是不少不熟悉的名词，不要感到很困难，能够经过引入一个基本的小项目上手练习。慢慢就都吸取了。后文提供项目地址，以及分析。

若是熟悉自行跳过。看项目初始

技术栈相关文档推荐

必看文档。读一遍后，查找便可。

• vue 官方2.0中文文档：cn.vuejs.org/v2/guide/
• nuxt 中文api文档 ：zh.nuxtjs.org/api
• express 中文api文档： expressjs.jser.us/3x_zh-cn/ap…

---

了解文章。读一遍

• 前端seo知识：
  • imweb.io/topic/56829… (前端写页面注意)
  • www.rapospectre.com/blog/38 （详细分析）

初始项目引入

直接使用vue init引入

vue init nuxt-community/express-template <project-name>
cd <project-name> # 移动到项目目录
npm install # or yarn install复制代码

项目运行

$ npm install # Or yarn install

# 服务热加载在 localhost:3000
$ npm run dev # server下的index能够改变端口

# 正式构建
$ npm start复制代码

项目结构分析

建议同时与nuxt文档一块儿，使用更佳。

项目结构

nuxt分析(重点)

• 例如： assets、components、eslintrc.js、package.json、yarn.lock和咱们正常使用vue是相同的。
• 咱们只须要针对的学习一些nuxt特有的语法便可。
  • layouts(布局文件)
    • 为页面指定使用哪个布局文件
  • pages（页面文件、路由根据文件生成）zh.nuxtjs.org/api/compone…
  • asyncData 方法使得你可以在渲染组件以前异步获取数据。zh.nuxtjs.org/api/
  • head 设置当前页面的头部标签。zh.nuxtjs.org/api/pages-h…

注意事项

• pages目录结构和命名方式：
  • 动态数据：例如点击不一样列表内容进入详情页，须要在命名上进行区分。例如图中_id.vue。
  • 子路由： 例如theme.vue 须要同名文件夹theme 其中在进行子路由便可。
  • 若是想看具体的结构，能够运行 npm run build在生成的文件夹.nuxt 查看生成router文件的具体状况，进行调整
• 使用axios 能够去看下es6的Promise Generator async。 www.ruanyifeng.com/blog/2015/0…
• 最后，欢迎打开新世界的大门。