SSR项目Nuxt使用

什么是服务端器端渲染（SSR）？

Vue.js是构建服务器端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。

使用服务器端渲染（SSR）优势

更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
更快的内容到达时间，特别是对于缓慢的网络情况或运行缓慢的设备。
基本用法

安装
切换至存放项目的路径，如E盘：

cd E:

使用官网提供的脚手架工具
create-nuxt-app

npx create-nuxt-app 项目名称

下载完成后可以看到下面的提示框，输入项目名称：




接下来的提示中统一回车选择默认即可。
启动

$ cd 项目名称
$ npm run dev

注意：
运行项目可能会遇到以下错误提示HTMLElement is not define nuxt.js,原因是在Nuxtjs的服务器环境加载Element-ui遇到兼容问题抛出的错误，解决方法：
下载指定版本的element-ui
npm install --save [email protected]

文件结构

• xianyun 项目根目录
  - assets 资源目录
  - components 组件目录
  - layouts 布局组件目录
  - middleware 中间件目录
  - pages 页面目录
  - plugins 插件目录
  - static 静态文件目录
  - Store Vuex 状态树 文件
  - nuxt.config.js Nuxt.js 应用的个性化配置
  - package.json 依赖关系和对外暴露的脚本接口

基本配置
1、修改/删除默认文件
Nuxtjs初始化项目时给我们提供两个演示文件，对我们接下来的项目开发没有任何作用，分别是pages/index.vue和components/logo.vue
修改如下：
首先是pages/index.vue

<template>
    <div>
        首页
    div>
template>
<script>
export default {

}
script>
<style>
style>

删除component/logo.vue文件
2、创建页面目录

• … // 其他文件
• pages
  - index.vue // 已存在的首页文件
  - post // 存放旅游攻略模块的文件夹
  - - index.vue // 旅游攻略模块首页文件
  - air // 存放机票模块的文件夹
  - - index.vue // 机票模块首页文件
  - hotel // 存放酒店模块的文件夹
  - - index.vue // 机票模块首页文件
  - user // 存放用户模块的文件夹
  - - login.vue // 用户登录注册页面

3、创建组件目录
在components文件夹中新建文件夹：

• … // 其他文件
• components // 存放公共组件的文件夹
  - post // 存放旅游攻略模块组件的文件夹
  - air // 存放机票模块组件的文件夹
  - hotel // 存放酒店模块组件的文件夹
  - user // 存放用户模块组件的文件夹
• … // 其他文件

4、修改配置
（1）、页面过渡效果样式
在assets/目录下创建这个文件assets/main.css，添加以下样式：

/* 页面切换时候过渡样式 */
.page-enter-active, .page-leave-active {
    transition: opacity .5s;
}

/* 打开时候过渡样式 */
.page-enter, .page-leave-active {
    opacity: 0;
}

/* 页面顶部页面加载进度条 */
.nuxt-progress{
    background:#409eff;
    height: 1px;
}

只是新建了样式文件还不能产生效果，需要在nuxt.config.js配置文件中加载该文件才能生效。
参考文档：
https://zh.nuxtjs.org/guide/routing#过渡动效

5、修改配置文件
配置文件nuxt.config.js对项目进行了全局配置，对每个页面都生效。
复制下面配置替换项目的nuxt.config.js文件，如果想手动修改的话可以查看中文注释行(#10 #18 #32 #56)

import pkg from './package'

export default {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: "闲云旅游网", // 修改title
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', type: 'text/css', href: '//at.alicdn.com/t/font_1168872_ehvuah8v57g.css'} // 新增全局字体样式
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css',
    'assets/main.css' // 新增自定义的页面过渡样式（文件来自3.4.1）
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/element-ui'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // https://axios.nuxtjs.org/setup
    '@nuxtjs/axios'
  ],

  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    // baseURL: "http://157.122.54.189:9095" // 新增备用地址
    baseURL: "http://127.0.0.1:1337" // 新增axios默认请求路径 		  
  },

  /*
  ** Build configuration
  */
  build: {
    transpile: [/^element-ui/],

    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  },
}

6、添加less
预编译样式选择less，相关配置nuxtjs已经配置好了，不需要改动webpack的配置文件，只需要安装依赖包即可

npm install --save less less-loader

Nuxt和普通的Vue

1. Nuxt是同构程序，这里的同构指的是一套代码，可以在浏览器运行，也可以在服务器（Nodejs）运行，也就是说可以同时使用浏览器的API和Nodejs的API。
2. 普通的Vue的页面只能使用浏览器的API，即使在Nodejs环境下开发也只是使用webpack来编译打包。
3. Nuxt是前后端框架的集合，前端采用Vue，后端可选框架有Express、hapi等，所有可以理解为Vue是一个页面模板的存在，类似于art-template。
4. Nuxt支持单页和多页应用。