Nuxt3 从入门到实战

开发 前端
那什么是混合(Hybrid)开发呢?继续看官方介绍,Hybrid状态还是soon,表示增量的静态生成以及一些其他可能的高级模式,静态生成Nuxt2就有,是一个高逼格的名字还是有其他真货有待考证?

 

 本文转载自微信公众号「村长学前端」,作者前端杨村长 。转载本文请联系村长学前端公众号。

小右13号在微博给Nuxt 3带货了:

23号的直播分享再一次给Nuxt 3带货,这次独占一页PPT:

看来这个Nuxt3一定不简单!那这个框架是做啥的呢?村长就带大家来一探究竟!

字面意思看是一款基于Vue3的混合开发框架。

那什么是混合(Hybrid)开发呢?继续看官方介绍,Hybrid状态还是soon,表示增量的静态生成以及一些其他可能的高级模式,静态生成Nuxt2就有,是一个高逼格的名字还是有其他真货有待考证???但是不管怎样,下面的很多特性表明,这是一个体系完备的通用开发框架,它能提供良好的代码组织和服务端渲染/静态网站生成(SSR/SSG)能力,这才是硬核!

正式使用

创建项目

打开 Visual Studio Code , 打开内置终端并输入下面命令创建一个nuxt项目:

  1. npx nuxi init nuxt3-app 

踩坑指南:node版本需要高于v14.16.0

安装依赖

  1. yarn install 

启动

使用 yarn dev以 开发模式启动nuxt:

  1. yarn dev 

浏览器会自动打开:http://localhost:3000

最小应用

在nuxt3中如果没有pages/目录,则表示不会包含vue-router依赖。如果我们不需要路由或者就是一个落地页时就可以这么搞。

下面删除app.vue中,随便添点内容看看效果:

  1. <template> 
  2.   <div> 
  3.     <h1>nuxt3 app</h1> 
  4.   </div> 
  5. </template> 

下面我们加个页面试试,创建layouts/index.vue:

  1. <template> 
  2.   <div>index page</div> 
  3. </template> 

别忘了添加路由出口,app.vue:

  1. <template> 
  2.   <div> 
  3.     <h1>nuxt3 app</h1> 
  4.     <!-- 路由出口 --> 
  5.     <NuxtPage></NuxtPage> 
  6.   </div> 
  7. </template> 

那如果我有另一个页面detail.vue想要跳转过去哪?

可以像下面这样,添加一个NuxtLink,index.vue:

  1. <template> 
  2.   <div>index page</div> 
  3.   <!--跳转链接--> 
  4.     <NuxtLink to="/detail">Detail Page</NuxtLink> 
  5. </template> 

现在可以自由的跳转了!

Young村长的个人空间-哔哩哔哩:https://b23.tv/rfg5t64

 

责任编辑:武晓燕 来源: 村长学前端
相关推荐

2021-12-03 15:59:30

Nuxt3插件机制

2024-07-30 08:19:14

2023-01-26 00:56:41

Nuxt.js存储库开发

2022-09-30 15:46:26

Babel编译器插件

2017-06-26 09:15:39

SQL数据库基础

2012-02-29 00:49:06

Linux学习

2013-06-06 13:42:48

OSPF入门配置

2010-02-06 15:31:18

ibmdwAndroid

2009-07-22 14:55:16

ibmdwAndroid

2016-12-08 22:39:40

Android

2021-09-01 22:58:22

Canvas标签

2021-02-21 22:53:01

CanvasHTML5JavaScript

2017-05-09 08:48:44

机器学习

2019-07-02 14:17:18

API网关网关流量

2022-06-10 08:17:52

HashMap链表红黑树

2022-10-20 08:02:29

ELFRTOSSymbol

2023-11-08 08:32:16

2013-04-25 00:06:06

unity3D手机游戏引擎

2010-11-08 10:20:18

2024-02-26 08:52:20

Python传递函数参数参数传递类型
点赞
收藏

51CTO技术栈公众号