1、安装element-plus、vue-router
npm install element-plus
npm install vue-router
2、main.js引入
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import router from '@/router/index'
createApp(App)
.use(router)
.use(ElementPlus)
.mount('#app')
3、src下创建views/Home.vue及router/index.js
index.js
// 1.引入创建路由需要的组件
import { createRouter, createWebHistory } from 'vue-router'
// 2.配置系统所有路由页面,浏览器通过path路径加载对应组件
const routes = [
{ path: '/', component: () => import('@/views/Home.vue') }
]
// 3.创建路由实例
const router = createRouter({
history: createWebHistory(), //使用history模式,hash模式使用 createWebHashHistory() 方法
routes
})
// 4.声明,为路由提供外部引用的入口
export default router
Home.vue
<template>
<div class="common-layout">
Home
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style scoped>
.common-layout {
display: flex;
min-height: 100vh;
flex: 1;
}
</style>
4、app.vue添加
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
5、启动项目后显示Home页面