preface

The previous section covered various installations; this section covers the basic configuration and creation page.

Building the base page

1. Modify the app. vue file,
is the route rendering component

// App.vue
<template>
  <div id="app">
    <router-view />
  </div>
</template>Copy the code

2. Introduce the required Ant-Design-Vue components

// config/components_use.js
import Vue from 'vue'
import { Layout } from 'ant-design-vue'Add import to vue.use (Layout) // main.js'./config/components_use'Copy the code

3. Create the base layout container

Use a ready-made layout

// layout/BasicLayout.vue
<a-layout-content
    :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"<router-view /> </a-layout-content>Copy the code

4. Modify route configurations

// router/router
import Vue from 'vue'
import Router from 'vue-router'
import Home from '.. /views/Home.vue'
import BasicLayout from '. /.. /layout/BasicLayout.vue'
Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: BasicLayout,
      redirect: '/index',
      children: [
        {
          path: '/index',
          name: 'index',
          hideInMenu: true,
          component: Home
        }
      ]
    }
  ]
})
export default routerCopy the code

5. Run the project and view the result



Menu and route configuration

Now that you have a skeleton, you can write content. Next, write a few more pages.

// views/A.vue
<template>
  <div class="">
    <a-button type="primary"Vue <template> <div class= // views/B/ b1. vue <template> <div class="">
    <a-button type="dashed"// views/B/ b2.vue <template> <div class="">
    <a-button type="dashed"</a-button> </div> </template>Copy the code

Continue to modify route configurations

// router/router
children: [
    {
        path: '/index',
        name: 'index',
        hideInMenu: true,
        component: Home
    },
    {
        path: '/a',
        name: 'a',
        component: () => import('. /.. /views/A.vue')
    },
    {
        path: '/b',
        name: 'b',
        redirect: '/b/b1',
        component: { render: (h) => h('router-view') },
        children: [
            {
                path: '/b/b1',
                name: 'b1',
                component: () => import('. /.. /views/B/B1.vue')
            },
            {
                path: '/b/b2',
                name: 'b2',
                component: () => import('. /.. /views/B/B2.vue'}]}]Copy the code

Modify the menu in the BasicLayout.vue component

// layout/BasicLayout.vue
<a-menu theme="dark" mode="inline" :defaultSelectedKeys="[' 1 ']">
    <a-menu-item key="1">
        <router-link to="/">
            <a-icon type="home"/ > < span > home page < / span > < / router - the link > < / a - menu item - > < a - menu - item key ="2">
        <router-link to="/a">
            <a-icon type="video-camera"/> <span>A page </span> </router-link> </a-menu-item> <a-sub-menu key="3">
        <span slot="title"><a-icon type="user"/> < span> <a-menu-item key="3-1">
            <router-link to="/b/b1"> <span>B1 page </span> </router-link> </a-menu-item> <a-menu-item key="3-2">
            <router-link to="/b/b2"> < span > B2 page < / span > < / router - the link > < / a - menu item - > < / a - sub - menu > < / a - menu >Copy the code

Now the page should be like this, click the home page, A, B page can jump



Project folder

|-- manage |-- .browserslistrc |-- .editorconfig |-- .eslintrc.js |-- .gitignore |-- .prettierrc |-- babel.config.js |--  package.json |-- README.md |-- vue.config.js |-- yarn.lock |-- public | |-- favicon.ico | |-- index.html |-- src |-- App.vue |-- main.js |-- api |-- assets | |-- logo.png |-- components | |-- HelloWorld.vue |-- config | |-- components_use.js |-- layout | |-- BasicLayout.vue |-- router | |-- router.js |-- store | |-- store.js |-- utils |-- views |-- Home.vue |-- A.vue |-- B |-- B1.vue |-- B2.vueCopy the code

The warehouse address

  • Project source: github.com/Zero-Web/an…