electron-vue搭建（三）添加element-plus、vue-router

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页面