Skip to content

V
vue3-web
提交 46780d76 authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

更新代码

上级 1078efb9
隐藏空白字符变更
内嵌 并排
正在显示 包含 124 行增加 和 3 行删除
.eslintrc.cjs
浏览文件 @ 46780d76
......@@ -29,7 +29,7 @@ module.exports = {
globals: {},
// 这里时配置规则的,自己看情况配置
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
// 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
//在rules中添加自定义规则
//关闭组件命名规则
......
index.html
浏览文件 @ 46780d76
......@@ -5,9 +5,17 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vue3Web框架</title>
<style>
body,
html {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
src/Layout/footer.vue 0 → 100644
浏览文件 @ 46780d76
<template>
<div class="footer-container">
<h1>Footer</h1>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.footer-container {
width: 1200px;
margin: auto;
}
</style>
src/Layout/headers.vue 0 → 100644
浏览文件 @ 46780d76
<template>
<div class="headers">
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
>
<el-menu-item index="1">Processing Center</el-menu-item>
<el-menu-item index="3" disabled>Info</el-menu-item>
<el-menu-item index="4">Orders</el-menu-item>
</el-menu>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
</script>
<style lang="scss" scoped>
.headers {
box-sizing: border-box;
padding: 20px 0;
height: 100%;
.el-menu {
margin: auto;
width: 1200px;
height: 100%;
.el-menu-item {
font-size: 18px;
}
.el-menu-item.is-active {
border-bottom: 0;
}
}
.el-menu--horizontal {
border-bottom: 0;
}
}
</style>
src/Layout/index.vue 0 → 100644
浏览文件 @ 46780d76
<template>
<div class="layout-container">
<el-container>
<el-header>
<Headers />
</el-header>
<el-main style="height: 80vh">
<Main />
</el-main>
<el-footer>
<Footer />
</el-footer>
</el-container>
</div>
</template>
<script setup lang="ts">
import Headers from './headers.vue'
import Main from './main.vue'
import Footer from './footer.vue'
</script>
<style lang="scss" scoped>
.layout-container {
height: 100%;
width: 100%;
.el-header {
height: 80px;
}
}
</style>
src/Layout/main.vue 0 → 100644
浏览文件 @ 46780d76
<template>
<div class="main-container">
<div class="content">
<h1>Main</h1>
</div>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.main-container {
width: 1200px;
margin: auto;
}
</style>
src/routers/index.ts
浏览文件 @ 46780d76
......@@ -3,9 +3,9 @@ import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'home',
name: 'layout',
//使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
component: () => import('../views/home/index.vue')
component: () => import('@/Layout/index.vue')
}
//{
//配置404页面
......
types/components.d.ts
浏览文件 @ 46780d76
......@@ -8,6 +8,13 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
ElButton: typeof import('element-plus/es')['ElButton']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElFooter: typeof import('element-plus/es')['ElFooter']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElMain: typeof import('element-plus/es')['ElMain']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论