Nuxt

Nuxt 解决了什么问题?

• 前后端同构，为 vue 框架提供了 SSR
• 降低首屏时间

渲染模式

• | SSR | Server Side Render 服务端渲染，指服务端直出 Html |
• | CSR | Client Side Render 客户端渲染，指数据经过框架渲染出视图 |
• | SPA | Single-Page Application 单页 Web 应用，单个 HTML 页面维护，代码动态修改视图 |
• | PWA | Progressive Web Apps 渐进式 Web 应用，多指套壳跨平台 Web 应用 |
• | SSG | Static Side Generation 静态页面生成，生成后每次请求结果相同，数据变化需再次生成 |

···

nuxt 支持 SSR/SSG/SPA 三种渲染特性

SEO

权重可以通过以下方式增加：1，竞价排名 2，关键字索引 3， 内容 4， 外链 5，url 6，标签优化 7.更新频度

创建项目

    yarn create nuxt-app <project-name>
    ? Project name: test
    ? Programming language: JavaScript
    ? Package manager: Yarn
    ? UI framework: Vant
    ? Nuxt.js modules: Axios - Promise based HTTP client
    ? Linting tools: ESLint, Prettier, StyleLint, Commitlint
    ? Testing framework: None
    ? Rendering mode: Universal (SSR / SSG)
    ? Deployment target: Server (Node.js hosting)
    ? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
    ? Continuous integration: None
    ? Version control system: (Use arrow keys)
    > Git
    None

    Nuxt脚手架 create-nuxt-app
    npm i -g create-nuxt-app
    create-nuxt-app test

运行项目 -> 会运行了两个服务（client 端, server 端）

△ 很重要

项目里的东西，基本上都可以分成两个服务各有的东西。比如：

• store 状态管理器
• 组件
• 页面
• js 脚本
• 渲染
• more…

目录结构

    pages: 路由视图目录
    layout：布局目录
    middleware: 路由中间件
    store: vuex
    plugins：插件
    component：组件
    .nuxt：打包后的目录
    static：静态文件目录
    nuxt.config.js：配置文件

layout

nuxt 通过 layout 定义自定义布局

默认使用 layout 目录下的 default.vue

<template>
  <div>
    <Header></Header>
    <Nuxt />
    <Footer></Footer>
  </div>
</template>

使用新的 layout

1、layout 可新建多个

2、在页面中配置 layout: “layout 名字” 即可

路由

    pages/index.vue -> { name: '/', component: ~/pages/index.vue, path: '/' }
    pages/user/index.vue -> { name: 'user', component: ~/pages/user/index.vue, path: '/user' }

    动态路由
    pages/list/_id.vue  -> { name: 'list', component: ~/pages/list/_id.vue, path: '/list/:id' }
    取值：params.id

生命周期

  validate({ params }) { // 路由判断
    return params.id === 1
  },

  asyncData({ $api, params }) { // 接口请求，服务端渲染，不存在this
    const d = await $api()
    return { d }
  },

  fetch({ $api, params }) { // 接口请求，服务端渲染，存在this
    const d = await $api()
    this.d = d
  },

Vuex

    nuxt 使用vuex -> store目录 中 index.js 导出 vuex 实例

    import Vuex from 'vuex'
    const store = () => new Vuex.Store({})
    export default store

    分为服务端store，客户端store

plugins 使用

分为客户端与服务端的插件

• 导入一个 UI 组件库 ant design

  // 在插件中
  import Vue from 'vue'
  import { Button } from ’ant-design-vue'
  Vue.use(Button)

export default {
  plugins: [
    // 客户端和服务端都会注入
    { src: "~/plugins/ant-design-vue.js.js" },
    // 仅客户端注入
    { src: "~/plugins/ant-design-vue.js.js", mode: "client" },
    // 仅服务端注入
    { src: "~/plugins/ant-design-vue.js.js", mode: "server" },
  ],
};

nuxt.config.js

全局配置

export default {
  head: {
    title: "虫子",
    meta: [{ hid: "description", name: "description", content: "" }],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  },
  css: ["~/assets/css/var.css"],
  plugins: ["~/plugins/index", { src: "~/plugins/store", ssr: false }],
  components: ["@/components/", "@/components/common"],
};

调试

怎么调试服务端的接口？

项目打包上线

    // 安装`cross-env`包用于读取或设置环境变量
    "scripts": {
        "dev": "cross-env NODE_ENV=dev nuxt",
        "test": "cross-env NODE_ENV=test nuxt",
        "prod": "cross-env NODE_ENV=prod nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "build:prod": "cross-env NODE_ENV=prod nuxt build",
        "generate": "nuxt generate"
    },

yarn build -> 构建出.nuxt 目录

yarn start -> 打包后启动

复制如下文件进入服务器，使用 pm2 进程启动应用

// nuxt.config.js
// package.json
// .nuxt
// static

拓展

多语言

extendRoutes

  routes.map(item => {
    // 遍历路由配置，往里面加入其它语言路由
  })

  { name: '/', component: ~/pages/index.vue, path: '/' }
  { name: '/en', component: ~/pages/index.vue, path: '/en' }

  host/en -> 首页

Nuxt 部分专有特性

• 路由：Nuxt 路由系统默认为文件系统模式，可配置定制
• 独有生命周期：asyncData提供了在服务端能获取数据在渲染页面的能力；fetch提供了渲染页面之前同步 Vuex store 的空间
• 渲染特性：nuxt 支持 SSR/SSG/SPA 三种渲染特性
• 加载插件：Nuxt 使用特有配置plugins加载 vue.js 插件
• 页面 meta：Nuxt 提供 head()方法处理页面元素相关信息
• 自定义布局：nuxt 通过 layout 定义自定义布局