vue.js项目使用nuxt.js框架实现服务端渲染

nuxt.js为基于vue.js的ssr框架。

1.使用vue-cl3搭建的vue.js项目目录结构 和 nuxt.js改造是vue项目目录结构

               

通过npm run dev运行server/index.js，启动一个web服务器，nuxt.js从nuxt.config.js这个文件中加载全局依赖的中间件，调用asyncData方法异步获取数据，并将fetch回来的数据，在服务端渲染到页面。

2.将vue.js中的内容迁移到nuxt.js中

  （1） 页面：src/views ---->  pages

  （2）组件：src/components ----> components，不需要像在pages下的页面组件那样有 asyncData 方法的特性的组件，我们可 以将他们放到components目录下，因为asyncData只能用在pages下面。

  （3）main.js中引入的第三方插件 ----> nuxt.config.js中的plugins

plugins: [
    { 
      src: '~/plugins/vue-inject',