接上一节笔记:
三、安装项目第三方库
1.安装Ant Design Vue
yarn add ant-design-vue@next
完整引入组件
文件 main.ts
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>
</style>
2.安装路由 Vue-router
yarn add vue-router@4 --save
定义路由
在项目src目录下新创建一个目录 router/index.ts
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
- routes: RouteRecordRaw[] 定义一个数组存放我们所有的路由
- createWebHashHistory 路由模式
- RouteRecordRaw 一个接口,定义了路由格式
在项目src目录下新创建一个目录 pages/login/Index.vue
<template>
login登录页
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup(){},
})
</script>
<style>
</style>