创建项目
yarn create @vitejs/app vue-antd-learn
代码结构
{
"version": "0.0.0",
"scripts": {
"dev": "vite", // 默认运行方式
"build": "vue-tsc --noEmit && vite build", // 打包
"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"
}
}
安装 antd-vue的依赖
yarn add ant-design-vue@next
安装路由和数据仓库
yarn add vuex@next vue-router@next
引入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')
创建路由
定义路由
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = []
const router = createRouter(
{
history: createWebHashHistory(),
routes: routes
}
)
export default router
- RouteRecordRaw 一个接口,他定义了路由的格式
- createWebHashHistory 路由模式
- routes: RouteRecordRaw[] 这个数组存放我们所有的路由
创建我的第一个页面
<template>login</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
setup() {},
});
</script>
注册路由,把登录页面注册进来
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
引入路由
main.js 引入我们的路由
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')
挂在路由
挂在在了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>