云社区 博客 博客详情

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

Linali 发表于 2020-03-15 21:21:27 2020-03-15
0
0

【摘要】 1.Nuxt.js概述1.1.什么是Nuxt.js?Nuxt.js是一个基于Vue.js的轻量级应用框架,可用来创建服务端渲染(SSR)应用,也可以充当静态站点引擎生成。具有优雅的代码结构分层和热加载等特性。官方学习网址:https://zh.nuxtjs.org/guide/installation1.2为什么要学习Nuxt.js?SPA(singlepagewebappli...

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 项目作者

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

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 代码







文章来源: www.oschina.net,作者:漫路h,版权归原作者所有,如需转载,请联系作者。

原文链接:https://my.oschina.net/u/4284277/blog/3195256

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:Kubernetes 资源对象

下一篇:如何远程控制电脑——远程桌面连接工具使用教程

评论 (0)


登录后可评论,请 登录注册

评论