Nuxt 知识点

脚手架工具 create-nuxt-app 创建项目：

$ npx create-nuxt-app <项目名>

启动项目：

  To get started:

        cd nuxt_demo

        npm run dev

  To build & start for production:

        cd nuxt_demo

        npm run build

        npm start

nuxt 命令介绍

命令列表

    "scripts": {

        // 只查看不符合规范的代码

        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",

        // 查看并修正不符合规范的代码

        "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",

        "precommit": "npm run lint",

        // --watch server: 监控server目录下的更改

        "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",

        // 利用webpack编译应用，压缩JS和CSS资源（发布用）

        "build": "nuxt build",

        // 以生产模式启动一个Web服务器 (nuxt build 会先被执行)

        "start": "cross-env NODE_ENV=production node server/index.js",

        // 编译应用，并依据路由配置生成对应的HTML文件 (用于静态站点的部署)

        "generate": "nuxt generate"

    },

在任何 Vue 组件的生命周期内，只有 beforeCreate 和 created 这两个方法会在客户端和服务端被调用。其他生命周期函数仅在客户端被调用。
使用第三方模块：axios

我们可以在应用中使用第三方模块，一个典型的例子是在客户端和服务端使用 axios 做 HTTP 请求。

首先我们需要安装 npm 包：

npm install --save axios

然后，在页面内这样使用：

<template>

  <h1>{{ title }}</h1>

</template>

<script>

import axios from 'axios'

export default {

  async asyncData ({ params }) {

    let { data } = await axios.get(`https://my-api/posts/${params.id}`)

    return { title: data.title }

  }

}

</script>

注入 $root 和 context

有时您希望在整个应用程序中使用某个函数或属性值，此时，你需要将它们注入到Vue实例（客户端），context（服务器端）甚至 store(Vuex)。按照惯例，新增的属性或方法名使用$作为前缀。
Window 或 Document 对象未定义？

这是因为一些只兼容客户端的脚本被打包进了服务端的执行脚本中去。对于只适合在客户端运行的脚本，需要通过使用 process.client 变量来判断导入。

举个例子，在你的 .vue 文件中：

if (process.client) {

  require('external_library')

}

同理，可以通过检测 process.server 这个变量来控制插件中的某些脚本库只在服务端使用。当值为 true 表示是当前执行环境为服务器中。

此外，可以通过检查 process.static 是否为true来判断应用是否通过 nuxt generator 生成。您也可以组合 process.server 和 process.static 这两个选项，确定当前状态为服务器端渲染且使用nuxt generate命令运行。

在使用 nuxt 的过程中，我们对一个界面的请求方式有两种。

从浏览器地址栏键入
通过类似 router-link 的 a 标签点击跳转

当我们从浏览器的地址栏中键入一条请求时，请求被交给了 nuxt 服务器（或者 nginx→nuxt）。

nuxt 服务器解析 vue 组件（中的 asyncData 方法），并将数据绑定到 html，然后再返回给浏览器。

当我们通过点击 router-link 跳转时整个应用依旧是无刷新的单页应用，且会在 window.history 中键入记录。

https://learnku.com/articles/7767/nuxt-server-side-rendering-options

巴特西

Nuxt 知识点

在使用 nuxt 的过程中，我们对一个界面的请求方式有两种。

最新文章

热门文章