nuxt.js笔记
介绍
- 基于 Vue.js 的通用应用框架。
- SSR 服务端渲染。在服务端生成html发送至客户端
- 特性：异步数据加载、中间件支持、布局支持等。
- 优点：有利于SEO，加载速度快，自动配置路由
- 依赖 node 和 npm npx（npx在NPM版本5.2.0默认安装）
实现原理
初始化项目
- $ npx create-nuxt-app <项目名> （Nuxt.js团队创建了脚手架工具 create-nuxt-app）
- $ npm run dev （http://localhost:3000）
配置ip地址端口号
若端口号冲突，或想运行在本机ip，在package.json中添加config配置
{
"config":{
"nuxt":{
"host":"127.0.0.1",
"port":"1818"
}
}
}
重启项目即可
路由
-
根据目录结构自动生层router.js
-
标签跳转
<nuxt-link to="/">跳转首页</nuxt-link>
<nuxt-link :to="{name: 'news',query:{id:'1'}}">跳转新闻页</nuxt-link>
- params 传值(id会显示地址栏，其他参数不会显示在地址栏)
this.$router.push({
name: 'log-id',
params:{
id:12,
key:value
})
//接受
async asyncData ({ params }) {
// params.id 就是我们传进来的值
}
// 或者
created () {
this.$route.params.xxx
}
- query传值(所有的参数都会显示在地址栏)
this.$router.push({
name: 'log-id',
query:{
id:12,
key:value
})
//接收
async asyncData ({app,query }) {
// pquery.id 就是我们传进来的值
}
// 或者
created () {
this.$route.query.xxx
}
动态路由
- 动态路由是不同的商品详情对应不同的路由地址，便于搜索引擎收录更多，被搜到的几率更大
- 文件需以 _ 开头
//目录结构：goods文件夹下面动态路由_id文件
--| goods/
-----| _id.vue
-----| index.vue
//index.vue传参
<nuxt-link :to="{name: 'goods-id', params:{id: 1}}">苹果详情</nuxt-link>
<nuxt-link :to=" '/goods/2' ">橘子详情</nuxt-link>
//_id.vue接受参数，并校验参数，若参数不合格，将会跳转到404页面
<script>
export default {
validate({params}){ //params相当于url中的pathname , 而query是路由携带的参数?type=1
return \^\d+$\.test(params.id)
}
}
</script>
嵌套路由
//路由结构：如下users.vue是父路由，其子路由需要放在与他同名的文件夹下users/
pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue
父组件(.vue文件) 内增加 用于显示子视图内容
路由切换添加过渡动画
全局动画
- 在assets文件下新建全局样式文件
- 在 nuxt.config.js 中配置全局common.css
module.exports = {
css: [ '@assets/common.css' ]
}
//common.css
.page-enter-active, .page-leave-active {
transition: opacity .5s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
单个页面动画
- 在全局样式里定义单独的过渡样式，然后在所需组件内transition 属性的值设置为 news
//common.css
.news-enter-active, .news-leave-active {
transition: all .5s;
color:red;
}
.news-enter, .news-leave-active {
opacity: 0;
color:blue;
}
//news.vue
export default {
transition: 'news'
}
默认模板和默认布局（优选）
默认模板
- 在根目录下新建一个app.html 文件
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }} //nuxt.config.js中配置的head
</head>
<body {{ BODY_ATTRS }}>
//可以在这写一段固定的代码，这样机会在每个页面都显示，例如：
<h1>欢迎光临</h1>
{{ APP }} //pages中的页面
</body>
</html>
默认布局
- 可通过添加根目录下 layouts/default.vue 文件来扩展应用的默认布局
<template>
//在默认布局中可以定义pc网站的头部和底部，这样就会在每个页面中显示
<nuxt/>
</template>
自定义布局
- 在根目录的layouts文件夹下可以定义特殊的布局，例如某个页面需要特殊的头部
// layouts/blog.vue
<template>
<div>
<div>我的博客导航栏在这里</div>
<nuxt/>
</div>
</template>
- 在所需要的页面中引入自定义的布局
<template>
<!-- Your template -->
</template>
<script>
export default {
layout: 'blog'
// page component definitions
}
</script>
自定义错误页面
- 在layouts文件夹爱下创建 error.vue 文件 layouts/error.vue ，当404 或 500 的时候跳转
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">页面不存在</h1>
<h1 v-else>应用发生错误异常</h1>
<nuxt-link to="/">首 页</nuxt-link>
</div>
</template>
<script>
export default {
props: ['error'], //nuxt自己传递的error对象（包含statusCode）
layout: 'blog' // 你可以为错误页面指定自定义的布局
}
</script>
基本页面
- asyncData
- 在渲染组件之前异步获取数据，即在服务端获取数据并生成页面
- 如果在mounted中掉接口，则是在组件渲染之后获取到数据，然后通过js渲染在客户端
- 返回一个数据对象给当前组件，可以直接使用，无需再data中定义
- 由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象
- 同步调用 async/await
- axios返回的是promise对象，是异步调用
- async/await是同步调用，在数据返回成功之后，才会执行后边的操作
<template>
<h1 class="red">Hello {{ name }}!</h1>
</template>
<script>
export default {
data(){
return {
title:this.$route.params.title
}
},
props:['name'],
async asyncData (context) {
// 每次组件加载之前调用，可以在这里调接口,设置组件的数据
const { data } = await axios.get('')
return { initdata:data } //initdata可以像data重数据一样直接使用
},
async fetch ({ store, params }) {
// 在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。
let { data } = await axios.get('http://my-api/stars')
store.commit('setStars', data)
}
head () {
// 每个页面单独设置meta，title和content
title:this.title,
meta:{
content:'描述',
name:'',
hid:'' //唯一标识，跟原来的一样可以覆盖原来的meta
}
},
// and more functionality to discover
...
}
</script>
<style>
.red {
color: red;
}
</style>