electron+vite+vue+ts项目搭建(四)-引入Vue-Router,elementplus

1.安装Vue-Router,elementplus,@types/node

npm install vue-router
npm install element-plus --save
 npm install  @types/node -D

2.src下新建views/Home.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-aside  width="auto" style="background-color: #646cff">
<!--        <menu-tree></menu-tree>-->
        左侧
      </el-aside>
      <el-container>
        <el-header style="background-color: #42b983">头部</el-header>
        <el-main style="background-color: aqua">
          右侧
<!--          <router-view></router-view>-->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
// import MenuTree from '../components/menu/MenuTree.vue'

// export default {
//   name: 'HomeSy',
//   components: {
//     MenuTree
//   }
//
// }
</script>

<style scoped>
.common-layout {
  display: flex;
  min-height: 97vh;
  flex: 1;
}
</style>

3.App.vue

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

</template>

4.vite.config.ts新增配置

 resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
 base: "./",

5.tsconfig.json新增配置

"baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }

6.src下新建router/index.ts

import { createRouter, createWebHashHistory} from "vue-router"
const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('@/views/Home.vue')
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

7.main.ts 引入router和elementplus

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'

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

8.启动项目