1. Build an environment

  • Go to a foldercd Jirengu
  • Global installationYarn global add [email protected]
  • Create a Vite appcva bad-cat-1
  • Enter the bad cat – 1cd bad-cat-1
  • Yarn is an installation dependency, which is equivalent to yarn installyarn
  • Yarn dev run

2. Install and initialize vue-router

  • Press CTRL +C to enter the router command
  • npm info vue-router versions
  • Select the 4.0.0-beta.3′ version
  • Open vs Code terminal inputYarn add [email protected]

3. Initialize vue-router

  • Introduce history and router in main.js;

Import {creatWebHashHistory, creatRouter} from 'vue-router'

  • Pass the simple history and router;

const history = creatWebHashHistory() const router = creatRouter()

  • Rename main.js to main.ts
  • Add to creatRouter () in parentheses
history:history;
routs:[
{path:'/',component:xxxx}
]
Copy the code

Note: ‘/’ indicates the root link address

  • [Fixed] ‘./ XXX /xxx.vue ‘module cannot be found when vs Code has a wavy line error.
    • Cause: Typescript only understands. Ts files, not. Vue files.
    • Vue3 can not find Module;
    • The answer is to create the shims-vue.d.ts file and type in it
     // shims-vue.d.ts
declare module '*.vue' {
import { Component } from 'vue'
const component: Component
export default component}
Copy the code
  • Use the router, app. Use (router)
const app = createApp(App)
app.use(router)
app.mount('#app')
Copy the code
  • add< the router - the view > and < the router - the link >
    • <router-view>Where it is placed, the contents of the routing address are displayed there;
    • <router-view>Show the content where you put it;
    • <router-link>The use of
      • 1. Add this code next to the click to jump text;
      • In 2.<router-link to="/">Add the jump address after to

4. Create a home page and document page

The goal is to create an interface similar to the vue.js home page

  • The main page is divided into two sections:
    • There’s a top plate at the top;
    • The other is the theme plate, the theme plate has a link, click can enter the content plate;
  • Content section:
    • There is a top top block that is the same as the main page block;
    • There is a left and right sidebar block;

1. Start to create the homepage of the official website

  • Create a view folder inside SRC
    • Create the home.vue file
      • Topnav: Logo on the left and Menu on the right
      • Banner: File introduction + Start button
    • Create the doc.vue file
      • Topnav: same as above
      • Content: Aside on the left, main on the right

2. Route configuration

  • ‘/’ jumps to the Home component when accessing the root path;
  • Jump the doc component bashzhongduan when accessing the ‘/doc’ path

3. Set style, lang= “SCSS”

An error may occur, so create a bash terminal yarn Add sass

The toggle button on the mobile page

@media(max-width:500px){
> .menu{display:none}

}
Copy the code

Switch between routes. Click component to display the corresponding document

  • Click the link in the list in the DOC to jump to the corresponding page.
  • Add the required route to main.ts;
  • {path:’/doc’, Component: doc,children: [{path:’ switch’, Component :SwitchDemo}]}
  • Create a new file in components switchdemo.vue;
  • Click on the link to the document, where to put it?

Put it in the main tag below aside

<main>
<router-view/>
</main>
Copy the code
  • You also need to implement a new page when you click on a link in the list, and then hide the list.

The following code represents the action after the path is retrieved

router.afterEach(()=>{ })
Copy the code