Nuxt3如何新建项目

这篇具有很好参考价值的文章主要介绍了Nuxt3如何新建项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

第一步 创建项目

1.新建一个文件目录 nuxt-app
2.命令行cd到目录下运行 npx nuxi init nuxt-test 回车运行下
nuxt-test是文件名自己随意
3.再cd nuxt-test到目录下 运行npm install
4.运行完成后 npm run dev 启动项目 显示以下页面
Nuxt3如何新建项目,Nuxt3,nuxt3创建项目

第二步 修改入口代码,编写自己的代码

Nuxt3如何新建项目,Nuxt3,nuxt3创建项目
1.在app.vue根目录同级新建pages文件夹 再新建一个index页面(新建文件目录参考官方文档视图)
2.app.vue代码里面修改为

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

index.vue 里面写点代码保存后 链接刷新
Nuxt3如何新建项目,Nuxt3,nuxt3创建项目
如果显示空白没有出现自己写的内容,重新运行一下项目即可
本人修改代码后刷新是显示空白页面 重新运行后才看到自己写的内容

nuxt3官方文档地址:https://nuxt.com.cn/docs/getting-started/introduction
文章来源地址https://www.toymoban.com/news/detail-537014.html

到了这里,关于Nuxt3如何新建项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Nuxt3 + Naive UI 的SSG项目分享(一)

    自从Vue3发布后,学习Vue3就形成了一个趋势和热潮。 Vue3相比Vue2,引入tree-shaking,使得打包的整体体积变小了;在兼顾vue2的options API的同时还推出了composition API,大大增加了代码的逻辑组织和代码复用能力;采用proxy替换了之前的defineProperty,proxy有多达13种拦截方法;增加了

    2023年04月09日
    浏览(26)
  • nuxt3项目使用pdfjs-dist预览pdf

    使用的包的源代码是 pdfjs - npm 但是我们实际上项目中使用的是pdfjs打包后的dist文件,也就是pdfjs-dist - npm 所以我们需要使用这个命令 我们可以克隆pdfjs这个包来看源代码,里面有使用的例子,也可以根据源代码自己打包生成你想要的版本的pdfjs-dist,官方文档强调了对于新旧

    2024年02月09日
    浏览(22)
  • Nuxt3项目中的问题汇总-刷新页面useFetch无返回

    坑有千千万,汇总下目前的解决办法,也因为对框架的不够深入,掌握得有限,大家有更好的,请指教【抱拳】 浏览器刷新的时候页面没有显示数据,接口data无返回。本身nuxt的useFetch在参数不变的情况下,数据是不会重新从后台接口去请求数据的,会直接拿上一次的结果。

    2024年02月11日
    浏览(29)
  • 【Nuxt3】modules目录和nuxt3模块的简单介绍

    记录下nuxt3项目中module的用法 使用 modules/ 目录在应用程序中自动注册本地模块。 这是一个很好的地方,可以放置您在构建应用程序时开发的任何本地nuxt模块。 nuxt模块相当于npm包,可以发布到npm社区中 在modules/ 目录下的本地模块,会自动注册模块,无需在 nuxt.config.ts文件中

    2024年04月27日
    浏览(27)
  • 【Nuxt3】nuxt3目录文件详情描述:.nuxt、.output、assets、public、utils(一)

    nuxt3的中文网站 上次简单介绍了nuxt3创建项目的方法和目录文件大概用处。 这次详细说下.nuxt、.output、assets、public、utils五个文件夹的用处。 Nuxt在开发中使用.nuxt/目录来生成你的Vue应用程序。 为了避免将开发构建的输出推送到你的代码仓库中,你应该将这个目录添加到你的

    2024年01月18日
    浏览(73)
  • nuxt3项目在宝塔上使用pm2放到服务器

    最近在将nuxt3项目扔到服务器上的时候遇到了一些问题,发现打包后的nuxt项目与正常的vue文件有些差别,缺失了index.html文件。 这边就记录下nuxt3项目是怎么放到服务器上的🤔 一、打包nuxt3项目 执行对应的打包命令    yarn build    二、找到打包后的文件     三、这里我使用

    2024年02月21日
    浏览(30)
  • 【Nuxt】在 Nuxt3 中使用 Element Plus

    在 nuxt.config.ts 中配置 类似写 vue3 项目,可以导入组件,也可以直接使用组件 在 Nuxt 3 中集成 Element Plus 的步骤 20分钟带你入门Nuxt3

    2024年02月05日
    浏览(30)
  • Nuxt3环境变量配置

    Nuxt3 正式发布还不到半年,在投入生产环境使用后,遇到了不少问题,很难找到合适的解决方案,其中环境变量配置就是其中一个,之前一直未能解决,最近要上持续集成,无法绕过这个问题,所以花了点时间研究了一下,最终找到了解决方案,记录一下。 面对一个新框架,

    2024年02月01日
    浏览(48)
  • Nuxt3 全栈 项目服务器部署 全网最全最细保姆级教程 解决各种小坑 时光小灶

    服务器:Nginx 面板:宝塔面板 个人博客:https://timebk.cn/ 原文地址:原文 第一步肯定是打包咯,前提是项目已开发好了以及没有啥Bug了哈 打包好后,你会在项目根目录下发现多了个 .output 文件夹 打开这个文件夹,将里面的所有文件压缩成压缩包 压缩包格式推荐 .rar ,其它格

    2024年02月12日
    浏览(30)
  • Nuxt3重点特性使用举例记录

    小聊: 基于vue.js,用于SSR渲染解决SEO,但不仅限于此。不用于局限的眼光去看它,使用它会比原生vue3更加流畅舒适,性能也更高。在熟悉vue3的基础上学习成不算高。另外,它完全支持vue3语法,相比于vue3,它改进了vue3的一些功能,Nuxt3有一些“约定”,你可以理解为是一些

    2024年02月07日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包