nuxt3 从目录结构看使用 components文件

nuxt简介

Nuxt 是一个免费的开源框架，具有直观且可扩展的方式来使用 Vue.js 创建类型安全、高性能和生产级的全栈 Web 应用程序和网站。

nuxt的 目录结构是约定好的，所有文件夹都是固定的，创建项目时可能没有： 比如pages文件夹，初始化的时候可能没有，但是如果你要添加页面到nuxt，那你就需要创建一个pages文件夹，文件的命名是固定的。

1. assets 文件

assets 也就是静态资源的文件，cs, js, 图片啥的

2. components 文件

nuxt使用的是vue， conponents文件就是 vue组件。这里需要说明一下，因为所有的文件都是约定好的，所以你写在conponents里面的vue组件是不需要注册，就可以直接使用。

在components文件夹下创建CustomInput.vue 组件，添加如下代码：

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue']) // 将输入框的值传递给父组件，并让父组件能够更新这个值。
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

直接在app.vue 里面使用该组件

<CustomInput
  modelValue='nihell'
></CustomInput>

结果就会像下面一样

项目足够大的时候，肯定希望划分文件来写组件，看下再么在components 中创建文件。

在components 文件夹下创建一个test 文件夹，新建MyButton.vue 文件

<script setup>
defineProps(['textValue'])

</script>

<template>
  <div class="">
    <button>{{ textValue }}</button>
  </div>
</template>

在app.vue中的使用， 会以文件夹的名字加组件文件的名字来使用

<TestMyButton 
  textValue='按钮'
 ></TestMyButton>

懒加载组件

通过上面的例子，基本的组件使用就差不多了，但是因为所有的组件是直接不需要引用就可以使用的，这样组件很多的话，就需要考虑懒加载组件。

在组件名前面加上Lazy前缀，则可以按需懒加载该组件。懒加载组件的目的是在项目打包的时候包更小。 在components 文件夹下面，新建一个LazyText.vue 文件。就可以了。