Preliminary study nuxt3

Nuxt3 Used to make ssr Webpage Support vue3 All the grammar , And supported TypeScript, vite+vue3+composition api + ts.SPA Single page applications cannot be SEO Optimize ,SSR The application performs rendering on the server , Return to the client after rendering , Each page has its own URL Yes SEO friendly .

1.Nuxt3 install

　　

 Initialization function 

　　npx nuxi init nuxt3-test

　　 Entry project 

　　cd nuxt3-test

　　 Install dependency packages 

　　npm install

　　 Run the project 

　　npm run dev

 

2.Nuxt3 Infrastructure directory structure

　

　 - .nuxt //  Auto generated directory , Used to present the results 

　　- node_modules //  The project depends on the package storage directory 

　　- .gitignore // Git Configuration directory for , For example, some files are not used Git Management can be configured in this file 

　　- app.vue //  Project entry documents , You can configure the route exit here 

　　- nuxt.config.ts // nuxt The configuration file for the project  , This can be configured Nuxt The methodological aspects of the project 

　　- package-lock.json //  Lock the version of the package at the time of installation , To ensure that others  npm install Keep up with you 

　　- package.json //  The configuration file of the package and the startup mode command configuration of the project  - README.md //  Project documentation 

　　- tsconfig.json // TypeScript Configuration file for 

 

3.Nuxt3 Contract route , Nested Route

　 New at root pages Then create a new folder index.vue

　 In the root directory app.vue Use... In the document <Nuxtpage>  The exit of the route

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

　 Create... In the directory demo1.vue file   And then it was index.vue Jump to demo1.vue Use NuxtLink label

<template>
  <div >
    <h1>Index Page</h1>
    <NuxtLink to="/demo1">Demo1.vue</NuxtLink>
  </div>
</template>

　 Create a nested route   

           Create a folder for nested routes （ Convention over configuration ）

          Create a file with the same name as the folder （ Parent page ）

　　   Create any sub page under the new folder

|--pages
|----parent/
|------child.vue
|----parent.vue

　　parent.vue  Which refers to sub pages

<template>
  <div class="">Parent Page</div>
  <!--  Exit of subpage -->
  <NuxtChild></NuxtChild>
</template>

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

<style scoped></style>

 

　　

4.Nuxt3 The use of dynamic routing

　 But parameter passing is only required in the file name of the page [ ] Just wrap it up , for example   demo2-[id].vue

-| pages/
---| index.vue
---| demo2-[id].vue

    Parameter receiving and using $route.params.id In the form of

　 Commonly used by developers

<template>
  <div class=""> Acquired id:{{ id }}</div>
</template>

<script setup>
import { ref } from "vue";
const route = useRoute();
const id = ref(route.params.id);
</script>

<style scoped></style

　 Transfer and acquisition of multiple parameters

　　 If you pass two parameters , Then you need to create a folder to use [ ] To determine the parameters  

-|  pages/
---| index.vue
---| goods-[name]/
-----| demo2-[id].vue

        Get parameters on the page

<template>
  <div class=""> Acquired id:{{ id }}</div>
  <div class=""> Acquired name:{{ name }}</div>
</template>

<script setup>
import { ref } from "vue";
const route = useRoute();
const id = ref(route.params.id);
const name = ref(route.params.name);
</script>

<style scoped></style

      When the page jumps

　　<NuxtLink to="/goods-shangpin/demo2-38">Demo2.vue</NuxtLink>