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应用

安装

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

二、使用vue安装nuxt

vue init nuxt/starter mynuxt(项目名)

而后cd mynuxt

三、使用npm install安装依赖包

npm install

四、最后启动服务

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>标签下的内容统一订制