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

原创已于 2025-01-11 10:15:10 修改 · 835 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节 #前端 #前端框架 #codeium #Nuxt

于 2024-10-24 16:39:48 首次发布

开发同时被 3 个专栏收录

8 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

Vue

4 篇文章

订阅专栏

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

在这里插入图片描述

启动一个Nuxt项目

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

npx nuxi@latest init <my-app>

npm install

npm run dev -- -o

然后就启动了一个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出现报错，可以自行下载，解压至自己的项目文件中。
链接如下：https://github.com/justincourses/nuxt-base