Make writing a habit together! This is the second day of my participation in the “Gold Digging Day New Plan · April More text challenge”. Click here for more details.

Nuxt3- Road to Learning 02, installation and use

The introduction

This series will introduce and begin learning about Nuxt3 with my understanding.

The middle will insert their own links to the messy knowledge points.

The installation

Follow the instructions in the Nuxt3 official documentation to install

npx nuxi init nuxt3-pro
Copy the code

After viewing package.json, install and run commands according to the contents of package.json.

cd nuxt3-pro

yarn install

yarn dev
Copy the code

You can see that a Node Web-server is enabled, and when you open it, you can see that it is also adaptive, and the gradient color animation of the border is very nice, which was used in the project before. If you are interested, you can research and save the CSS style here.

Automatic import of Nuxt3

We can only have one template from app.vue

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>
Copy the code

It was not discovered where the NuxtWelcome was introduced. This is the point, Nuxt3 automatic import

Instead of importing them explicitly, Nuxt automatically imports the related components, helper functions, and Vue apis directly. In plain English, you define it in other pages, and I don’t need to import it in my page, so I can use it directly in the page.

Here’s a summary of the imports:

  • Nuxt automatic import

    • useAsyncData.useFetchThis kind of method

  • Vue automatic import

    • script setup

    • Ref, computed and other Vue3 related methods

  • Automatic directory-based imports

    Create it directly in the nuxt3-Pro directory

    • Components puts the related components of Vue, which is the page at the end of.vue

    • Composables go into Vue’s composable components, known as TS files

    • Assets place assets such as static images

  • According to the import

    You can also show imports, but I won’t talk about that here

conclusion

Learn Nuxt3 installation and how to use, and related introduction.