Nuxt.js的学习与总结

一、Nuxt项目的安装和使用

Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。
作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

• Nuxt项目的安装和使用
  npx create-nuxt-app demo demo为项目名，然后会继续选择项目的一些设置
  详情请看图片，图片转载自Nuxt项目的安装和使用
  
  最后npm run dev 启动项目
  然后在浏览器中运行http://localhost:3000/ 下方页面表示项目创建成功！
  

二、Nuxt项目目录了解

项目目录介绍：

目录	功能
assets	组织未编译的静态资源如 LESS、SASS 或 JavaScript,如果你的静态资源文件需要 Webpack 做构建编译处理，可以放到 assets 目录
components	组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
layouts	组织应用的布局组件
middleware	存放应用的中间件
node_modules	node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。
pages	页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
plugins	插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
static	静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
store	store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。
nuxt.config.js	nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。若无额外配置，该文件不能被重命名。
package.json	package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。

三、Nuxt常用配置

1、配置启动项目IP地址以及端口号 package.json

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

2、全局应用某个css样式：
首先在assets文件下创建css目录，然后再目录下编辑css文件

🌰举个栗子：我们设置html页面的字体都为红色

接下来关键的一步是要在nuxt.config.js 中进行css文件的全局配置

四、路由

nuxt路由方式

使用<nuxt-link> 标签
<nuxt-link :to="{name:'index'}">HOME</nuxt-link>

1、路由是自动装配的,配置好的路由是在 .nuxt 文件夹下的router.js中

路由传参

路由传参的两种方式：

• params: params传值 id 会显示地址栏，其他参数不会显示在地址栏

<nuxt-link :to="{name:'news',params:{id:2,newId:3306,newName:'hhh'}}">News</nuxt-link>

• query: 传值会显示在地址栏中
  <nuxt-link :to="{name: 'about',query:{need_type:'INVEST', district:'item'}}">About</nuxt-link>
  
  

五、动态路由以及参数校验

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

动态路由传参：

<li><nuxt-link :to="{name:'news-id',params:{id:123}}">news-1</nuxt-link></li>
<li><nuxt-link :to="{name:'news-id',params:{id:456}}">news-2</nuxt-link></li>
<li><nuxt-link :to="{name:'index'}">返回</nuxt-link></li>

对传递的参数进行校验：
如果校验方法返回的值不为 true或Promise中 resolve 解析为false或抛出 Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。

六、默认布局&默认模板

默认布局： 在layouts 文件夹下可以设置在default.vue里设置，会自动编译到浏览器。

默认模板：

在根目录下创建 html 文件，然后nuxt 会自动将其识别为默认模板。

• 需要注意 在 中引用标签需要大写

• 然后注意在创建完默认模板以后需要重新启动一下项目

七、错误页面 以及个性meta标签设置

错误页面： 在layouts 文件夹下创建 error.vue 文件,
error.statusCode 是nuxt 自动设置好的。

<template>
	<div>
        <h2 v-if="error.statusCode==404">404,很抱歉你需要的页面无法找到......</h2>
        <h2 v-else>505，服务器出错了...</h2>
    </div>
</template>
<script>
    export default {
        props:['error']  //传值
    }
</script>

meta标签设置：
nuxt 既支持统一设置meta标签 也支持单个拿出来设置

• 统一的meta 标签设置在 nuxt.config.js 中查看:
  
• 单个设置：
  title 通过路由传参可以直接修改标题栏里的内容
  
  

八、异步请求数据的方法

Nuxt.js 中增加了一个asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。

asyncData 方法:在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。

注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

使用方法

1、使用Promise：

<script>
export default {
    data(){
        return{
            name:"Hello world!"
        }
    },
    asyncData({params}){
        return axios.get(`https://my-api/posts/${params.id}`)
        .then(res => {
            return { title: res.data.title }
        })  
        //相当于data直接获取到了title属性
        //由于asyncData方法是在组件 初始化前被调用的，
        //所以在方法内是没有办法通过 this 来引用组件的实例对象。
    }
}
</script>

2、使用async 或 await

<script>
export default {
    data(){
        return{
            name:"Hello world!"
        }
    },
    asyncData(params){
        const { data } = await axios.get(`https://my-api/posts/${params.id}`)
        return { title: res.data.title }
        //相当于data直接获取到了title属性
        //由于asyncData方法是在组件 初始化前被调用的，
        //所以在方法内是没有办法通过 this 来引用组件的实例对象。
    }
}
</script>