记一次服务端渲染的项目搭建（vue nuxt.js）

nuxt.js 简介

• nuxt.js是基于vue.js的服务端渲染框架(SSR),
• 众所周知，vue是开发单页应用(SPA)的，正常的流量网站主要是通过各种浏览器的搜索引擎来抓取的，而SPA应用不利于SEO，可以说几乎抓取不到SPA的页面，nuxt.js这个框架采用服务端渲染，可以直接将vue项目在服务端生成适合搜索引擎抓取的页面，然后再返回给客户端，实现了SPA项目（vue）可以更好的拥有SEO。
  • 搜索引擎抓取到的SPA页面的html是无实际内容，SSR生成的html有实际内容，自然有利于搜索引擎抓取页面内容
  • 节省首屏加载时间，服务端渲染好页面再交给浏览器的时间<客户端解析挂载到dom
• SSR 服务器渲染，可以将vue页面进行渲染生成静态的html直接反馈给浏览器

nuxt.js项目搭建

• 安装node
• 全局安装vue-cli

  npm install vue-cli -g
  

• 初始化Nuxt,js项目

  vue init nuxt/starter
  

  
• 查看项目目录下的package.json 如下
  
  • 有安装依赖所以需要执行install安装依赖包

    npm install
    

  • 启动项目

    npm run dev
    

    
  • 打开浏览器 输入http://localhost:3000/ 查看项目

nuxt.js项目目录整理及解析

• 项目目录如下
  
  最近公司有点忙，没时间整理。未完待续。。