Nuxt简单入门1_nuxt教程

---

一、Nuxt是什么？

Nuxt.js（Nuxt，NuxtJS） 是一个基于 Vue.js 的轻量级应用框架，可用来创建服务端渲染 (SSR) 应用，也可充当静态站点引擎生成静态站点应用，具有优雅的代码结构分层和热加载等特性。

• Nuxt.js 是一个基于 Vue.js 的通用应用框架。
• 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。
• Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

二、使用步骤

1.如何搭建环境

npx create-nuxt-app ‘项目名称’
1

1.2

启动

npm run dev
1

1.3访问

http://localhost:3000
1

2.读入数据

目录：

• assets 资源目录，用于存放需要编译的内容（less、sass 等）

• static 资源目录，用于存放不需要编译的内容（image、css、js 等）

• pages 页面(组件)目录，自动生成路由

3.案例

• 配置默认布局 layouts/default.vue

<template>
  <div>
    <nuxt-link to="">学生管理</nuxt-link> |
    <nuxt-link to="/classes">班级管理</nuxt-link> |
    <hr>
    <Nuxt />
  </div>
</template>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12

3.1列表展示

• 页面：pages/classes/index.vue

<template>
  <div>
    <h1>列表展示</h1>
    <table border="1">
      <tr>
        <td>编号</td>
        <td>班级名称</td>
        <td>操作</td>
      </tr>
      <tr v-for="(classes,index) in classesList" :key="index">
        <td>{{index+1}}</td>
        <td>{{classes.classesName}}</td>
        <td>
          <nuxt-link :to="'/classes/edit?id=' + classes.classesId ">修改</nuxt-link>
          <nuxt-link :to="{path:'/classes/edit',query:{'id': classes.classesId }}">修改</nuxt-link>
          <nuxt-link :to="{name:'classes-id',params:{'id': classes.classesId}}">详情</nuxt-link>
        </td>
      </tr>
    </table>
    <!-- 添加 -->
    <nuxt-link to="/classes/add">添加</nuxt-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classesList: [
        {
          classesId: 'c001',
          classesName: 'Java1'
        },
        {
          classesId: 'c002',
          classesName: 'Java2'
        }
      ]
    }
  },
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

3.2添加页面

• 页面位置：pages/classes/add.vue

<template>
  <div>
    <h1>班级添加</h1>
    <table border="1">
      <tr>
        <td>班级名称</td>
        <td><input type="text"> </td>
      </tr>
      <tr>
        <td colspan="2"><input type="button" value="添加班级"> </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.3修改页面

• 页面位置：pages/classes/edit.vue

<template>
  <div>
    <h1>班级修改</h1>
    id : {{$route.query.id}}
    <table border="1">
      <tr>
        <td>班级名称</td>
        <td><input type="text"> </td>
      </tr>
      <tr>
        <td colspan="2"><input type="button" value="修改班级"> </td>
      </tr>
    </table>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.4 详情页面

• 页面位置：pages/classes/_id.vue

<template>
  <div>详情
    id : {{$route.params.id}}
    <table border="1">
      <tr>
        <td>班级名称</td>
        <td>{{classes.classesName}} </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classes: {
        classesId: 'c001',
        classesName: 'Java12'
      }
    }
  },
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

---

总结

提示：本次简单介绍了nuxt入门操作，下篇简单讲解nuxt 路由.视图，整合axios与asyncData发送ajax.希望各位老师和同学提出不同的意见，共同提升。