start

Build using Vite

yarn

$yarn create vite-app <project-name> //1 There are two equivalent expressions: $CD <project-name> $yarn $yarn dev //1 Is equivalent to $YARN global add Create-vite-app $cva dropUI // is also equivalent to $NPX create-vite-app dropUI // using NPX directly to execute the command, it will automatically download if the package does not exist (including NPM init).Copy the code

npm

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
Copy the code

conclusion

Vue3 is different from Vue2

  • 90% of them are written exactly the same, except for the following
  • Vue3’s Template supports multiple root tags
  • Vue3 has createApp(), while Vue2 has New Vue().
  • CreateApp, new Vue({template,render})

Import Vue Router 4

Router for page switching

The installation

$NPM info vue-router versions // View the current version. $YARN add [email protected]Copy the code

Initialize the vue – the router

  1. Creating a History Object
  2. Creating a Router Object
  3. Introducing the TypeScript
  4. app.use(router)
  5. Add a router-view tag
  6. Add a router-link label

Start creating the official website

Home.vue

  • Topnav: Logo on the left and Menu on the right
  • Banner: Text introduction + Start button

Doc.vue

  • Topnav: same as above
  • Content: Aside on the left, main on the right

The new route

  • Render home.vue when path is #/
  • With path #/doc: render doc.vue