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