当前位置：首页 > article >正文

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

article 2024/10/28 13:51:54

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

查看全文

http://www.kler.cn/news/368773.html