带你从不懂到搭建第一个Nuxt.js项目!

最新推荐文章于 2024-06-18 14:30:45 发布

兮赫

最新推荐文章于 2024-06-18 14:30:45 发布

阅读量488

点赞数

本文链接：https://blog.csdn.net/weixin_44356673/article/details/107222815

版权

精选30+云产品，助力企业轻松上云！>>>

1.Nuxt.js概述

1.1.什么是Nuxt.js?

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

官方学习网址：https://zh.nuxtjs.org/guide/installation

1.2 为什么要学习Nuxt.js?

    SPA(single page web application)单页Web应用, Web不再是一张张页面,
而是一个整体的应用,一个由路由系统、数据系统、页面（组件）系统等等组成的应用程序。
    Vue.js就是SPA中的佼佼者。
    SPA应用广泛用于对SEO要求不高的场景中。

1.2.1 那什么是SEO呢？

    SEO就是 搜索引擎优化(Search Engine Optimization)，通过各种技术（手段）来确保我们
的Web内容被搜索引擎最大化收录，最大化提高权重，最终带来更多流量。
    而SPA程序不利于SEO。

注: 而我们需要解决SEO这个问题就可以用到Nuxt.js框架来创建服务端渲染(SSR)应用。

1.2.2 那什么是 SSR技术呢？

SSR服务端渲染（Server Side Render），即：网页是通过服务端渲染生成后输出给客户端。
    将前端拆分2部分：客户端和服务端
    服务器端渲染，就是让前端服务端的代码先执行，就可以提前获得后端提供的数据

2.搭建Nuxt.js项目

npm 提供的用于更快捷维护项目的工具npx
- npm版本5.2.0开始npm便开始携带了npx,不需要另行安装npx了

2.1 步骤一: 终端控制台输入命令

npx create-nuxt-app 项目名

2.2 步骤二: 选择一系列配置与依赖

2.2.1 项目名

使用默认就可以(直接敲回车Enter键)

2.2.2 项目描述

可以不写,直接敲回车键, 写了再敲回车键也是一样的

2.2.3 项目作者

默认就可以了, 敲回车键。可以改, 改完敲回车键。

项目作者之后: 如果出现选择JavaScript或者是TypeScript的选择第一个JavaScript即可, 没出现请忽略这句话

2.2.4 选择打包工具

这里我们选择 Npm，上下键选择，然后敲回车键

2.2.5 选择UI框架

根据需求选择（上下键），我们暂时不需要任何UI框架，选择None，敲回车键

2.2.6 选择服务器框架

根据需求选择（上下键），我们暂时不需要任何服务器框架，选择None，敲回车键

2.2.7 选择Nuxt模块

根据需求选择（上下键），选到需要的后需要按下空格键表示选中，选完后敲回车键。
- 我就选了一个Axios，用来发生ajax请求

2.2.8 选择静态代码检查工具

就是代码格式化的。我们什么也不选，直接敲回车键即可。
- 如果需要选择，上下键选中，然后敲空格表示选中，然后回车键即可。

2.2.9 选择测试框架

根据需求选择（上下键），我们暂时不需要任何测试框架，选择None，敲回车键

2.2.10 选择渲染模式

选择SSR（服务器端渲染），默认就是，直接敲回车即可。
- SSR：前端的服务器端渲染
- SPA：单Web应用

2.2.11 选择发布工具

我们不做选择默认即可，直接敲回车键

2.2.12 开始安装了

等待安装完毕即可

安装成功

2.2.13 安装步骤完整截图

2.3 运行项目

执行这两条命令即可

2.3.1 切换到刚刚创建好的项目目录下

2.3.2 运行执行命令

2.3.3 访问

3.Nuxt.js项目目录结构

4.Nuxt.js项目中使用axios

4.1. 整合axios

我们在安装时,已经选择axios模块
- 证据: nuxt.confg.js配置

4.2 发送ajax

我们可以通过this.$axios获得axios对象

//get请求
this.$axios.get('路径',{ params : 参数 })

//post请求
this.$axios.post('路径', 参数)

//put
this.$axios.put('路径', 参数)

//delete
this.$axios.delete('路径')

4.2.1 实例:加载新闻列表

修改pages/index.vue页面

4.2.1.1 效果

4.2.1.2 代码

<template>
  <div>
    <h1 style="margin-left:250px">新闻列表</h1>
    <table border="1px" style="margin:auto">
      <tr>
        <th>新闻标题图片</th>
        <th>新闻标题</th>
        <th>新闻作者</th>
        <th>新闻类型</th>
      </tr>
      <tr v-for="(news,index) in newsList" :key="index">
        <td>
          <img style="widht:100px;height:110px" :src="news.author_avatar" alt />
        </td>
        <td v-text="news.title"></td>
        <td v-text="news.author_name"></td>
        <td v-text="news.column_name"></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: []
    };
  },
  async created() {
    /**漫路h */
    let { data } = await this.$axios.get("https://unidemo.dcloud.net.cn/api/news");
    this.newsList = data;
  }
};
</script>

<style>
</style>