Create a project

yarn create @vitejs/app vue-antd-learn
Copy the code

The code structure

{
  "version": "0.0.0"."scripts": {
    "dev": "vite".// The default running mode
    "build": "vue-tsc --noEmit && vite build"./ / packaging
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^ 3.0.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": ^ "1.2.3"."@vue/compiler-sfc": "^ 3.0.5"."typescript": "^ 4.3.2." "."vite": "^ 2.3.7." "."vue-tsc": "^ 0.0.24"}}Copy the code

Install antD-vue dependencies

 yarn add ant-design-vue@next
Copy the code

Install routing and data warehouse

yarn add vuex@next vue-router@next
Copy the code

Introduce the antd – vue


import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

createApp(App).use(Antd).mount('#app')

Copy the code

Create routing

Define the routing

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = []
const router = createRouter(
    {
        history: createWebHashHistory(),
        routes: routes
    }
)

export default router
Copy the code
  • RouteRecordRaw An interface that defines the format of the route
  • CreateWebHashHistory Routing mode
  • Routes: RouteRecordRaw[] This array holds all of our routes

Create my first page

<template>login</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {},
});
</script>

Copy the code

Register the route and register the login page

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Index from '.. /pages/login/Index.vue'
const routes: RouteRecordRaw[] = [
    {
        path: '/login'.component: Index
    }
]
const router = createRouter(
    {
        history: createWebHashHistory(),
        routes: routes
    }
)

export default router
Copy the code

The introduction of the routing

Main.js imports our route

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import router from './router';

createApp(App).use(Antd).use(router).mount('#app')

Copy the code

Hung on the routing

It hangs under app.vue

<template>
  <router-view />
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  components: {},
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Copy the code

Video Introduction address