Nuxt.js笔记

前置知识

SSR服务器渲染

Vue SSR（server side rendering）服务端渲染 和 Vue SPA（single page application）单页应用

Vue SSR->将本来要放在浏览器执行创建的组件，放到服务端先创建好，然后生成对应的html
将他们直接发送到浏览器，最后将这些静态标记激活为客户端完全可交互的应用程序

SSR针对SPA的好处：

1）更好的SEO，由于搜索引擎抓取工具可以直接查看完全渲染后的页面

2）更快的到达时间(time-to-content)，特别是对网络慢或者运行缓慢的设备

不好的地方：

1）开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数(lifecycle hook)中使用

2）涉及构建设置和部署的要求更多

3）更多的服务器端负载

Nuxt.js

Nuxt.js是使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架

它可以不需要自己搭建SSR程序，而是通过约定好的文件结构和API即可实现一个首屏渲染的Web应用

安装

1、先安装vue-cli（只需安装一次，安装过就不用装了）

2、使用vue安装nuxt

vue init nuxt/starter mynuxt(项目名)

然后cd mynuxt

3、使用npm install安装依赖包

npm install

4、最后启动服务

npm run dev

文件结构

assets：资源文件，放置需要经过 webpack 打包处理的资源文件，如 scss，图片，字体等

component 组件，这里存放在页面中，可以复用的组件

layouts 布局，所有页面都会加载在布局页面中的 <nuxt /> 标签中

middleware 中间件，可以在页面中调用： middleware: 'middlewareName'

pages 页面，用于生成对应路由，支持嵌套，支持动态路由

plugins 插件，SPA中用的各类第三方组件和一些node模块都可以在这引入

static 静态文件，放置不需要经过 webpack 打包的静态资源。如一些 js, css 库

store 状态管理，内置了vuex，可以直接返回数据模块或返回一个自建vuex根对象

nuxt.config.js，文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置

nuxt.config.js配置文件

对程序的扩展管理可大概分为以下类：

/*
build：主要对应 Webpack 中的各配置项，可以对默认的 Webpack 配置进行扩展，如这里代码
cache：主要对应内置的组件缓存模块lru-cache的配置对象，有默认值，可选关闭
css：对应我们在SPA随处引用样式文件的require语句
dev：用于自定义配置环境变量，对应之前webpack.config.js相关文件中的变量语句
env：同上息息相关
generate：对generate命令执行时的行为做一些定制
head：对应vue-meta插件的全局配置，vue-meta用于VUE/SSR程序的文档元信息的管理
loading：用于定制化Nuxt.js内置的进度条组件
performance：用于配置Node.js服务器性能上的配置
plugins：用于管理和应用对应plugins文件夹中的插件
rootdir：用于设置 Nuxt.js 应用的根目录（这俩api有很大合并的意义）
srcdir：用于设置 Nuxt.js 应用的源码目录（这俩api有很大合并的意义）
router：用于对vue-router的扩展和定制，其中还包括了中间件的配置，但并不完美
transition：用于定制Nuxt.js内置的页面切换过渡效果的默认属性值
watchers：用于定制Nuxt.js内置的文件监听模块chokidar和 Webpack 的相关配置项
*/

配置IP和端口

在package.json里面进行配置

   "config":{
        "nuxt":{
            "host":"127.0.0.1",
            "port":"2019"
        }
    }

配置好后，输入npm run dev重启下服务即可

路由

Nuxt.js 根据 pages 目录结构去生成 vue-router 配置，也就是说 pages 目录的结构直接影响路由结构

|-- pages
    |-- posts
        |-- index.vue
        |-- welcome.vue
    |-- about.vue
    |

会生成

routes: [
  {
    path: '/posts',
    component: '~pages/posts/index.vue'
  }, {
    path: '/posts/welcome',
    component: '~pages/posts/welcome.vue'
  }, {
    path: '/about',
    component: '~pages/about.vue'
  }, {
    path: '/',
    component: '~pages/index.vue'
  }
]

还可以在文件名前加 _

|-- pages
    |-- _about.vue
    |-- index.vue

会生成

routes: [
  {
    path: '/',
    component: '~pages/index.vue'
  }
]

动态路由

在pages/news下建立_id.vue

以下划线为前缀的Vue文件就是动态路由，然后在文件里边有 $route.params.id来接收参数

<template>
    <div>
        <h3>new-content</h3>
        <p>newsId:{{$route.params.id}}</p>
        <ul>
            <li>Home</li>
        </ul>
    </div>
</template>

pages/news/index.vue

进入了新闻详细页，并在详细页中取得了传递过来的新闻ID

<template>
    <div>
        <h3>news page</h3>
        <p>newsID:{{$route.params.newsId}}</p>
        <ul>
            <li><a href="/">HOME</a></li>
            <li><a href="/news/123">new-1</a></li>
            <li><a href="/news/p">new-2</a></li>
        </ul>
    </div>
</template>

下面是动态参数校验

export default {
    validate({params}){
        //params的id必须是一个数字
        return /^d+$/.test(params.id);
    }
}

使用了validate方法，并把params传递进去，然后用正则进行了校验，如果正则返回了true正常进入页面，如果返回false进入404页面

比如new-2传的id不是数字

<template>
    <div>
        <h3>news page</h3>
        <p>newsID:{{$route.params.newsId}}</p>
        <ul>
            <li><a href="/">HOME</a></li>
            <li><a href="/news/123">new-1</a></li>
            <li><a href="/news/p">new-2</a></li>
        </ul>
    </div>
</template>

当点击new-2的时候就会进入404页面

默认模板和默认布局

只要修改默认模板时候都需要npm run dev 重启下服务

默认布局主要针对于页面的统一布局使用。它在位置根目录下的layouts/default.vue。需要注意的是在默认布局里不要加入头部信息，只是关于<template>标签下的内容统一订制