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 ",
  "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

路由传参：pages/index.vue

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

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

路由跳转动画效果

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'