“Live up to the time, the creation of non-stop, this article is participating in 2021 year-end summary essay competition”

Nuxt3 has been out for a while (although it’s still in beta) and we’re going to give it a try. Here’s the official documentation for Nuxt3

Install the download

Environmental requirements

  • Node version: Preferably the latest version

    I when he was created through Nuxt Cli project Node version of prompt advice ^ 14.16.0 | | ^ 16.11.0 | | ^ 17.0.0 these three versions, then you have to install a first ^ 17.0.0

    NVM install ^17.0.0 NVM use 17.0.0Copy the code

    The version I started with was 16.3.0 and there were no problems with the project

  • Ripasa, Valor plug-in

    This is Vue3’s recommended plugin to replace Vetur

  • The editor

    The official recommendation is vscode

Create a project

  • Install via NPX

    npx nuxi init nuxt3-app
cd nuxt3-app
npm install
npm run dev
Copy the code

  • Nuxt Cli can also be installed globally

    npm install nuxi -g
nuxi init nuxt3-app
cd nuxt3-app
npm i
npm run dev
Copy the code

The browser to playhttp://localhost:3000/The initialization page also has an animation. Nuxt3 is very careful

View the project

  • App.vue

    There is a NuxtWelcome component which is the page we initialize

  • Add multiple pages

    Nuxt3 handles our routing through the NuxtPage component and pages directory

    1. Create the Pages directory: here is the route we agreed on
    2. App. vue delete NuxtWelcome and replace it with NuxtPage
    3. Create index.vue in the Pages directory: this is the route page corresponding to /, open the project

      After each new page component is created, the new page route takes effect only after NPM run dev is restarted

    4. To create the admin on the pages directory. Vue http://localhost:3000/admin is ok

  • Creation of a page with routing parameters

    Suppose we have a page of user details. The url required in the vue-router configuration is /user/detail/: ID

    Path by folder name and file name

    In Nuxt we correspond with [parameters] : parameters

    1. [id]. Vue file [id]. Vue file [id]

    2. By visiting http://localhost:3000/user/detail/3 can get $route. Params. Id is 3

    3. Of course, it can also be in the folder directory name

      Create the user-[type] directory, which is usually a [id].vue file

      Visit http://localhost:3000/user-detail/3 can get $route. The params is {type: the detail, id: 3}

conclusion

The current approach is not much different from Nuxt2

Continue tomorrow

There are big boys to study with