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

2,684 阅读2分钟

为什么使用服务端渲染

  • 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

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

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

    不用等待所有js下载完毕并执行,才开始服务器渲染。因此会获得更好的用户体验

使用技术栈

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

如果感觉是很多不熟悉的名词,不要感到很困难,可以通过引入一个基本的小项目上手练习。慢慢就都吸收了。后文提供项目地址,以及分析。

如果熟悉自行跳过。看项目初始

技术栈相关文档推荐

必看文档。读一遍后,查找即可。


了解文章。读一遍

初始项目引入

直接使用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特有的语法即可。

注意事项

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