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