Vue SSR

nuxt.js 通用 vue.js SSR
SSR : 服务器端 vue渲染 html 返回浏览器
SEO ： VUE SPA（单页） 新闻 博客 等网站
APA ： 快递

环境：
vue init nuxt-community/starter-template testDemo

PS D:\NuxtProject> vue init nuxt-community/starter-template testDemo

  Command vue init requires a global addon to be installed.
  Please run npm install -g @vue/cli-init and try again.

npm install -g @vue/cli-init
当前用的Vue@cli3 创建nuxt项目用的是Vue-cli2的命令所以要下载一个包兼容
根据提示创建项目
npm install
npm run dev
如果需要配置特定的IP地址、或者3000端口被占用
在package.js配置文件中添加

  "config": {
    "host":"47.101.198.221",
    "port":"1818"
  },

具体位置请参考：

{
  "name": "nuxt_01",
  "version": "1.0.0",
  "description": "huangfu is project",
  "author": "xzh.hf <xzh.hf@hangshutech.com>",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "config": {
    "host":"47.101.198.221",
    "port":"1818"
  },
  "dependencies": {
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^4.19.1",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-vue": "^4.0.0"
  }
}

保存修改的配置文件 重新npm run dev启动项目；

项目中引入全局css样式（每个页面都需要引入的css文件）
在nuxt.config.js进行添加

css:['~assets/css/index.css'],

具体位置参考:

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'nuxt_01',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'huangfu is project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  css:['~assets/css/index.css'],
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

项目目录：

image.png

路由：

nuxt 会根据目录结构自动生成路由文件.nuxt/router.js
about/index.vue

<template>
    <div>
        <h2>about index page</h2>
        <ul>
            <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
        </ul>
    </div>
</template>

路由传参：pages/index.vue

<template>
  <div>
    <ul>
      <li> <nuxt-link :to="{name:'index'}">HOME</nuxt-link></li>
      <li> <nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li>
      <li> <nuxt-link :to="{name:'news',params:{newsId:71}}">NEWS</nuxt-link></li>
    </ul>
  </div>
</template>

动态路由 news/_id.vue固定命名格式：下划线+动态路由名称

<template>
    <div>
        <h2>News-content</h2>
        <p>newsId: {{$route.params.id}}</p>
        <li> <nuxt-link :to="{name:'news'}">news</nuxt-link></li>
    </div>
</template>

<script>
export default {
    validate({params}) {
        return /^\d+$/.test(params.id)
    }
}

</script>

动态路由传参 /news/index.vue
对路由名称不清楚可以到router.js 中查看

<template>
    <div>
        <h2>news index page</h2>
        <p>NewsID:{{$route.params.newsId}}</p>
        <ul>
            <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
            <li><nuxt-link :to="{name:'news-id',params:{id:123}}">123</nuxt-link></li>
            <!-- <li><a href="/news/123">123</a></li> -->
            <li><a href="/news/456">456</a></li>
            <!-- <li><a href="/news/huafn">huafn</a></li> -->
            <!-- <li><a href="/news/huiyan">huiyan</a></li> -->
        </ul>
    </div>
</template>

路由跳转动画效果

assets/css/index.css index.css文件的引入上面有介绍

html {
    color: purple;
}
/* 项目所有页面的效果 */
.page-enter-active, .page-leave-active {
    transition: opacity 0.5s;
}

.page-enter , .page-leave-active {
    opacity: 0;
}

/* 某个页面单独定义的动画效果 */
.test-enter-active, .test-leave-active {
    transition: all 0.5s;
    font-size: 12px;
}

.test-enter , .test-leave-active {
    opacity: 0;
    font-size: 40px;
}

添加：transition: 'test'

<template>
    <div>
        <h2>about index page</h2>
        <ul>
            <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
        </ul>
    </div>
</template>

<script>
export default {
    transition: 'test', //与css中定义的名字保持一致
    data () {
        return {
        };
    },
}

三、添加默认模板

项目根目录添加 app.html

<!DOCTYPE html>
<html lang="en">
<head>
    {{ HEAD }}
</head>
<body>
    <p>huangfushengkun@163.com</p> //所有页面都显示的固定内容
    {{ APP }}
</body>
</html>

注意：添加完成后，重启服务模板生效

四、默认布局

layouts/default.vue

<template>
  <div>
    <p>sunhuiyan.163.com</p>  //所有页面添加的默认布局
    <nuxt/>
  </div>
</template>

区别： 1.可以热更新2.只能定义template标签中的内容