02. Nuxt3的基础目录结构

默认的项目里就如下几个文件和目录,让我们一起看看每个文件的作用。

- .nuxt               // 自动生成的目录,用于展示结果
- node_modules        // 项目依赖包存放目录
- .gitignore          // Git的配置目录,比如一些文件不用Git管理就可以在这个文件中配置
- app.vue             // 项目入口文件,你可以在这里配置路由的出口
- nuxt.config.ts      // nuxt项目的配置文件 ,这个里边可以配置Nuxt项目的方法
- package-lock.json   // 锁定安装时包的版本,以保证其他人在 npm install时和你保持一致
- package.json        // 包的配置文件和项目的启动调式命令配置
- README.md           // 项目的说明文件
- tsconfig.json       // TypeScript的配置文件

随着我们的开发目录也会越来越多,比如常用的还有下面三个目录。

- pages               // 开发的页面目录
- components          // 组件目录
- assets              // 静态资源目录
- layouts             // 项目布局目录

接下来,现在我们对Nuxt3的基础目录了解后,接下来我们试着去作一个HelloWorld的程序。

编写Hello World程序

通过上面的学习,我们知道了App.vue 这个文件是项目的入口文件。用VSCode打开文件,可以看到文件的基础结构。

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

其中<NuxtWelcom /> 就是一个框架自带的组件,我们直接删除就可以,不用纠结删除这个组件。删除后,在 \components 目录下新建一个文件,叫做HelloWorld.vue 然后编写下面的代码。

<template>
  <div class="">
    <h1>Hello World</h1>
  </div>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>

然后再回到app.vue文件中直接写入这个 HelloWorld组件:

<template>
  <div>
    <hello-world />
  </div>
</template>

打开VSCode的内置终端,然后输入 npm run dev 或 yarn dev 就可以启动调试服务了。 打开浏览器,在地址栏输入[http://localhost:3000/](http://localhost:3000/)就可以看到 HelloWord效果了。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

使用声明:
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的VIP素材后,只拥有使用权,著作权归原作者及码云笔记网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。
码云笔记 » 02. Nuxt3的基础目录结构

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们