【Web开发】什么是Nuxt? 利用Nuxt快速搭建前端项目

Nuxt官网:https://nuxt.com/

在这里插入图片描述

启动一个Nuxt项目

在vscode的项目文件终端运行以下命令:

npx nuxi@latest init <my-app>
npm install
npm run dev

然后就启动了一个Nuxt项目

安装Nuxt UI

Nuxt UI官网:https://ui.nuxt.com/

在这里插入图片描述

npx nuxi@latest module add ui

修改页面

app.vue的代码改为:

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtPage />
  </div>
</template>

添加pages文件夹,在其中添加index.vue
在这里插入图片描述

在index.vue中添加如下代码:

<template>
    <div>
      <h1>web-course</h1>
      <UButton>Button</UButton>
  </div>
</template>

<script setup></script>

浏览器中预览效果:(localhost:3000)
在这里插入图片描述

美化界面

借助AI美化,在vscode中安装Codeium 插件

在这里插入图片描述

选中代码,按ctrl+I(Windows):
在这里插入图片描述
在这里插入图片描述
Submit后Accept修改建议:
在这里插入图片描述

如下就是美化后的代码:

<template>
      <div style="display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5">
    <div style="text-align: center">
      <h1 style="color: #333; font-size: 40px; margin-bottom: 20px">web-course</h1>
      <UButton type="primary" size="large">Button</UButton>
    </div>
  </div>
</template>

<script setup></script>

浏览器中预览:
在这里插入图片描述
成功!!!
读者可自己根据想要的页面利用Codeium帮自己修改添加。

10分钟快速搭建前端页面就此完成!
感谢阅读!


报错

Failed to download template from rejavascript:void(0)gistry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: TypeError: fetch failed

如果安装nuxt出现报错,可以自行下载tar包,解压至自己的项目文件中。
tar包连接如下:https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/902632.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【acwing】算法基础课-搜索与图论

目录 1、dfs(深度优先搜索) 1.1 排列数字 1.2 n皇后问题 搜索顺序1 搜索顺序2 2、bfs(广度优先搜索) 2.1 走迷宫 2.2 八数码 3、树与图的存储 4、树与图的遍历 4.1 树的重心 4.2 图中点的层次 5、拓扑排序 6、最短路问题 6.1 朴素Dijkstra算法 6.2 堆优化Dijks…

JAVA基础:集合 (学习笔记)

集合 什么是集合&#xff1f; 一种引用数据类型&#xff0c;可以存储多个数据 为什么要学习集合&#xff1f; 数组的缺点&#xff1a; &#xff08;1&#xff09;空间长度不可以改变。 &#xff08;2&#xff09;没办法获得数组中真实的元素个数。 &#xff08;3&#xff…

江协科技STM32学习- P22 实验-ADC单通道/ADC多通道

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

『 Linux 』网络传输层 - TCP (一)

文章目录 TCP协议TCP数据段格式TCP确认应答机制TCP流量控制 TCP协议 TCP协议(Transmission Control Protocol , 传输控制协议) 是互联网协议套件中的核心协议之一; 主要用于确保数据在网络上的可靠传输,其具有以下特点: 面向连接 在数据传输前,TCP需要在通信双方之间建立一个连…

MySQL的group_concat函数:将分组中的多个值连接成一个字符串的聚合函数

MySQL的group_concat函数&#xff1a;将分组中的多个值连接成一个字符串的聚合函数 主要作用说人话解释举个&#x1f330; 主要作用 可以将同一组内的多个值合并为一个由指定分隔符分隔的字符串&#xff0c;简化数据展示和分析。 说人话解释 group_concat()会计算哪些行属于…

怎么找歌曲的伴奏?找伴奏不再难

在音乐创作、演唱练习或是娱乐活动中&#xff0c;找到一首歌曲的伴奏版本是一个常见的需求。伴奏不仅能够帮助我们更好地理解歌曲的结构和旋律&#xff0c;还能为演唱者提供一个专业的音乐背景。那么&#xff0c;我们该如何有效地找到歌曲的伴奏呢?本文将为你提供几种实用的方…

ubuntu18.04安装xenomai3.1(百分百成功版)

准备工作 1、下载ubuntu18.04.06。 https://releases.ubuntu.com/18.04/ubuntu-18.04.6-desktop-amd64.iso 2、安装虚拟机vmware或virtual machine。 开始安装xenomai 1、在桌面安装一个文件夹,文件夹名字叫xenomai。 2、 在终端输入uname-a 查看自己的内核版本。 3、下…

Linux学习笔记 | sudo命令的基本使用

sudo命令 sudo 命令是 Unix 和 Linux 系统中用于执行需要超级用户权限&#xff08;即 root 权限&#xff09;操作的工具。它允许系统管理员授予某些用户&#xff08;或用户组&#xff09;以 root 或其他指定用户的权限来运行特定命令&#xff0c;而无需知道 root 用户的密码。…

电脑怎么进行全盘加密?

1.使用Windows自带的BitLocker&#xff1a; 打开“控制面板”&#xff0c;选择“系统和安全”&#xff0c;然后点击“BitLocker驱动器加密”。 选择要加密的驱动器&#xff0c;点击“启用BitLocker”。 选择解锁驱动器的方式&#xff0c;通常选择“使用密码解锁驱动器”&…

内盘期货配资牛/文华财经有资管软件吗

文华财经不仅提供行情、交易、资讯于一体的综合性期货交易软件&#xff0c;还针对投资者的资产管理需求&#xff0c;开发了一系列功能强大的资管软件。这些软件的核心功能包括实时行情监控、技术分析工具、交易执行系统以及风险管理模块&#xff0c;全方位满足了期货配资投资者…

Python 函数返回值之None类型

什么是None None是类型‘NoneType’字面量&#xff0c;用于表示&#xff1a;空的、无意义的 函数如何返回None 不使用return语句即返回None 主动return None 使用场景 函数返回值if判断变量定义 练习&#xff1a; 练习一&#xff1a;无return语句的函数返回值 # 无ret…

自动发现-实现运维管理自动化

nVisual-Discovery是一款自动化工具软件&#xff0c;通过多种自动发现技术&#xff0c;协助运维管理人员快速建立可视化的网络文档&#xff0c;提升网络管理的效率与准确性。 01 IP扫描发现 当我们新接手一个网络运维项目&#xff0c;通常缺乏精准的网络文档数据&#xff0c;…

uniapp 引入了uview-ui后,打包错误,主包过大解决方案

原因&#xff1a;由于使用uniapp来设计小程序&#xff0c;使用uview的组件库&#xff0c;导致了主包过大&#xff0c;无法打包 前提条件&#xff1a;已经完成了分包&#xff0c;如果还没有分包的先分包&#xff0c;需要上传代码时用到 1. 通常情况&#xff0c;大多数都是通过点…

Oracle SQL Developer 同时打开多个table的设置

Oracle SQL Developer 同时打开多个table的设置 工具 》 首选项 》数据库 》对象查看器&#xff0c;勾选 “自动冻结对象查看器窗口”

面试题:JVM(一)

1. JVM概述 1.1 JVM的生命周期 说说Java虚拟机的生命周期&#xff08;阿里&#xff09; 虚拟机的启动 Java虚拟机的启动是通过引导类加载器(bootstrap class loader)创建一个初始类(initial class)来完成的&#xff0c;这个类是由虚拟机的具体实现指定的。 虚拟机的退出有如下…

javaScript整数反转

function _reverse(number) { // 补全代码 return (number ).split().reverse().join(); } number &#xff1a;首先&#xff0c;将数字 number 转换为字符串。在 JavaScript 中&#xff0c;当你将一个数字与一个字符串相加时&#xff0c;JavaScript 会自动将数字转换为字符串…

基于SpringBoot的“高校校园点餐系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“高校校园点餐系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 前台首页功能界面图 用户注册、登录界面图 我…

unity游戏开发之塔防游戏

如何制作塔防游戏 让我们以迷你游戏的形式创建一个休闲塔防。 从基本处理到适用技术&#xff0c;应有尽有&#xff0c;因此您只需制作一次即可获得 Unity 中的游戏制作专业知识。 与背景素材结合使用时&#xff0c;您将获得以下游戏视图&#xff1a; 由于在创建过程中使用了 …

Google DeepMind的研究人员提出了Talker-Reasoner框架

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

【复旦微FM33 MCU 外设开发指南】外设篇1——硬件除法器

前言 本系列基于复旦微FM33LC0系列单片机的DataSheet编写&#xff0c;旨在提供一些开发指南。 本文章及本系列其他文章将持续更新&#xff0c;本系列其它文章请跳转【复旦微FM33 MCU 外设开发指南】总集篇 本文章最后更新日期&#xff1a;2024/10/24 文章目录 前言用途工作流…