• 脚手架工具 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
    "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 的过程中,我们对一个界面的请求方式有两种。

  1. 从浏览器地址栏键入
  2. 通过类似 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 知识点的更多相关文章

  1. 服务端预渲染之Nuxt (使用篇)

    服务端预渲染之Nuxt - 使用 现在大多数开发都是基于Vue或者React开发的,能够达到快速开发的效果,也有一些不足的地方,Nuxt能够在服务端做出渲染,然后让搜索引擎在爬取数据的时候能够读到当前 ...

  2. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二七║ Nuxt 基础:框架初探

    缘起 哈喽大家好,又是周四了,俗话说周四来了,周末还远么哈哈,老张我也想下周请假,来个16天的大长假哟,不知道大家是怎么请假的,近来发现文章下边已经没有人评论了,赶脚比较凄凉了,大家看到的麻烦点个赞呀 ...

  3. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二八║ Nuxt 基础:面向源码研究Nuxt.js

    前言 哈喽大家周五好,又是一个开开心心的周五了,接下来就是三天小团圆啦,这里先祝大家节日快乐咯,希望都没有加班哈哈,今天公司发了月饼,嗯~时间来不及了,上周应该搞个活动抽中几个粉丝发月饼的,下次吧,这 ...

  4. 从壹开始前后端分离 [ vue + .netcore 补程 ] 三十一║ Nuxt终篇:基于Vuex的权限验证探究

    缘起 哈喽大家好,今天周四啦,楼主明天要正式放假了,这里先祝大家节日快乐咯,希望在家里能继续研究点儿东西吧,今天呢是 nuxt 的最后一篇,主要是对权限登录进行研究,这一块咱们之前在说第一个项目的时候 ...

  5. Nuxt.js打造旅游网站第3篇_登录页面的编写

    主要知识点: 1.使用vuex/store管理数据 2.登录注册逻辑 3.Nuxt的本地存储 1.登录页面 1.1登录页面布局 替换pages/user/login.vue的代码如下 <temp ...

  6. ASP.NET Core 中的那些认证中间件及一些重要知识点

    前言 在读这篇文章之间,建议先看一下我的 ASP.NET Core 之 Identity 入门系列(一,二,三)奠定一下基础. 有关于 Authentication 的知识太广,所以本篇介绍几个在 A ...

  7. ASP.NET MVC开发:Web项目开发必备知识点

    最近加班加点完成一个Web项目,使用Asp.net MVC开发.很久以前接触的Asp.net开发还是Aspx形式,什么Razor引擎,什么MVC还是这次开发才明白,可以算是新手. 对新手而言,那进行A ...

  8. UWP开发必备以及常用知识点总结

    一直在学UWP,一直在写Code,自己到达了什么水平?还有多少东西需要学习才能独挡一面?我想对刚接触UWP的开发者都有这种困惑,偶尔停下来总结分析一下还是很有收获的! 以下内容是自己开发中经常遇到的一 ...

  9. C#高级知识点&(ABP框架理论学习高级篇)——白金版

    前言摘要 很早以前就有要写ABP高级系列教程的计划了,但是迟迟到现在这个高级理论系列才和大家见面.其实这篇博客很早就着手写了,只是楼主一直写写停停.看看下图,就知道这篇博客的生产日期了,谁知它的出厂日 ...

随机推荐

  1. shell三剑客之sed

    背景 sed(Stream Editor 流编辑器),作为三剑客的一份子,主要的功能有增删改查.为什么称之为"流"编辑器呢?大家知道:在Linux文件系统中,一切都可以作为文件来处 ...

  2. losetup命令使用

    1.losetup命令 Linux系统losetup命令用来设置循坏设备,循坏设备可以把文件虚拟成块设备,借此来模拟整个文件系统,让用户得以将其视为硬盘驱动器,光驱等设备,并挂入当作目录来使用. (1 ...

  3. build gradle dependencies闭包的详解

    转 :https://blog.csdn.net/guanguanboy/article/details/91043641 dependencies闭包的整体功能是指定当前项目所有依赖关系:本地依赖. ...

  4. Python内网渗透扫描器Ladon

    Ladon Scanner For Python PyLadon 目前python版功能较少,无论在Windows还是Linux系统性能以及速度均也比不上Ladon.exe 唯一的优点是跨平台,后续会 ...

  5. 034 通过域名访问服务器或本地的图片资源---switchhost+nginx

    1.修改host解析 2.使用Nginx代理,实现域名访问 进入Nginx的安装路径E:\toolsoftware\nginx-1.14.0\nginx-1.14.0\conf,修改 添加如下内容: ...

  6. 【洛谷】P1022 计算器的改良-全AC题解

    #include <iostream> #include <cstring> #include <iomanip> using namespace std; int ...

  7. MarkDown的常规用法

    MarkDown的常规用法 标题 # 一级标题 ## 二级标题 ... ###### 六级标题 列表 第二级 - 和 空格 + 和 空额 * 和 空格 第三级 代码块 多行代码块 3个` 回车 单行代 ...

  8. Luogu5611 Ynoi2013 D2T2/牛客挑战赛32F 最大子段和 分块、分治

    传送门 之前一直咕着的,因为一些特殊的原因把这道题更掉算了-- 有一个对值域莫队+线段树的做法,复杂度\(O(n\sqrt{n} \log n)\)然而牛客机子实在太慢了没有希望(Luogu上精细实现 ...

  9. 『Blocks 区间dp』

    Blocks Description Some of you may have played a game called 'Blocks'. There are n blocks in a row, ...

  10. Java学习:JDBC各类详解

    JDBC各个类详解 代码实现: //1.导入驱动jar包 //2.注册驱动 Class.forName("com.mysql.jdbc.Driver"); //3.获取数据库连对象 ...