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

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>