vue.js項目使用nuxt.js實現服務端渲染

1.使用vue-cl3搭建的vue.js項目目錄結構 和 nuxt.js改造是vue項目目錄結構

               

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', 
      ssr: false
    },
    {
      src: '~/plugins/vue-components',
      ssr: false
    },
    {
      src: '~/utils/wxShare',
      ssr: false
    }
  ],

  （4）axios的封裝和接口調用都在nuxt.js項目的service中

  （5）沒有路由文件，域名後的目錄名在nuxt.config.js中的router中配置。pages 文件夾名稱自動生成 vue-router 模塊的路由配            置，一般在pages頁面下面都有個默認路由頁面index.vue。

3.nuxt.config.js配置

   這個文件主要是對nuxt.js的應用配置，其中主要配置爲：

  （1）head中的項目標題title，meta以及link、style和script

  （2）全局css樣式

  （3）plugins第三方插件

  （4）router項目地址的目錄