十次方项目前端，NUXT入门（十）

本文链接： https://blog.csdn.net/Eknaij/article/details/96965076

一、NUXT简介

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。
官网地址：https://zh.nuxtjs.org/

二、NUXT环境搭建

（1）前提
确保安装了npx（npx自npm 以来默认发货5.2.0）
（2）在cmd界面运行
npx create-nuxt-app tensquare
如果你是npm6.1以上的版本（npm -v可以查看版本）可以输入
npm init nuxt-app tensquare.
在这里插入图片描述
红框出一定要选Yarn不然会报错，由于这里选择了yarn,所以还需要安装yarn
npm install -g yarn
（3）用VS打开，修改package.json

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

（4）进入tensquare目录，运行
cd tensquare
yarn install
安装相关依赖
在这里插入图片描述
（5）运行

yarn dev

在这里插入图片描述
在浏览器打开：localhost:3000,看到如下页面就可以啦：

二、nuxt目录结构分析

（1）资源目录 assets
用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
（2）组件目录 components
用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
（3）布局目录 layouts
用于组织应用的布局组件。
（4）页面目录 pages
用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
（5）插件目录 plugins
用于组织那些需要在根vue.js应用实例化之前需要运行的 Javascript 插件。
（6）nuxt.config.js 文件
nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

三、NUXT快速入门

1.定义布局

一般网页的布局主要分为三部分，头尾以及中央的主体，一般情况下头部的导航信息以及尾部的版权信息是不变的，所以我们可以将头部和尾部单独提取出来：
修改layouts目录下default.vue

<template>
  <div>
    <header>头部</header>
    <nuxt />
    <footer>尾部</footer>
  </div>
</template>

刷新一下页面就可以在页面上面看到“头部”的字样，页面下方则显示尾部，页面的中央主体部分 <nuxt />，是pages目录下的index.vue

2.页面路由

（1）在page目录创建文件夹
在这里插入图片描述
（2）recruit目录创建index.vue

<template>
  <div>
    招聘列表
  </div>
</template>

（3）gathering目录创建index.vue

<template>
  <div>
    活动列表
  </div>
</template>

NUXT的路由是根据目录自动生成的，无需手写。
修改default.vue，header中添加导航链接

    <header>头部
      <router-link to="/">首页</router-link>
      <router-link to="/recruit">招聘</router-link>
      <router-link to="/gathering">活动</router-link>
    </header>

点击导航链接，测试路由效果
在这里插入图片描述

3.数据渲染

安装axios
yarn add axios
修改gathering目录的index.vue

<template>
  <div>
    活动列表
    <div v-for="(item,index) in items" :key="index" >{{item.name}}</div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
    asyncData () {
        console.log("111111")
        return axios.get('http://192.168.192.130:7300/mock/5d120b475ed8ef4c615f2d60/gathering').then( res => {
        return {items : res.data.data }
        })
    }
}
</script>

asyncData是用于异步加载数据的方法
详见：https://zh.nuxtjs.org/guide/async-data

4.动态路由

如果我们需要根据ID查询活动详情，就需要使用动态路由。NUXT的动态路由是以下划线开头的vue文件，参数名为下划线后边的文件名
创建pages/gathering/item/_id.vue

<template>
  <div>
    活动详情
    {{item.id}}
    <hr>
    {{item.name}}
  </div>
</template>
<script>
import axios from 'axios'
export default {
    asyncData ({params}) {
        console.log("111111")
        return axios.get(`http://192.168.192.130:7300/mock/5d120b475ed8ef4c615f2d60/gathering/${params.id}`).then( res => {
        return {item : res.data.data }
        })
    }
}
</script>

我们在地址栏输入 http://localhost:3000/gathering/item/1 即可看到运行结果
在这里插入图片描述
在活动列表页点击链接进入详情页

  <div>
    活动列表
    <div v-for="(item,index) in items" :key="index" >
        <nuxt-link :to="'/gathering/item/'+item.id">{{item.name}}</nuxt-link>
    </div>
  </div>

目前 nuxt‐link 的作用和 router‐link 一致，都是进行路由的跳转。