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.启动项目