vue-使用ElementPlus搭建系统

**Vue + Element Plus 搭建系统**

在本文中，我们将一步步地讲解如何使用 Vue 和 Element Plus 搭建一个完整的系统。我们将从安装依赖项开始，到创建组件、路由配置以及整体项目结构的搭建。

### 安装依赖项首先，我们需要安装必要的依赖项：

bashnpm install vue element-plus axios

html<template>
 <div class="header">
 <!-- logo -->
 <img src="@/assets/logo.png" alt="logo">
 <!-- navigation -->
 <el-menu :router="true" mode="horizontal" active-text-color="#333">
 <el-menu-item index="/home">首页</el-menu-item>
 <el-menu-item index="/about">关于我们</el-menu-item>
 </el-menu>
 </div>
</template>

<script>
export default {
 name: 'Header'
}
</script>

<style scoped>
.header {
 background-color: #333;
 padding:10px;
}

.el-menu {
 border-bottom: none;
}
</style>

html<template>
 <div class="footer">
 <!-- copyright -->
 <p>Copyright &copy;2023</p>
 </div>
</template>

<script>
export default {
 name: 'Footer'
}
</script>

<style scoped>
.footer {
 background-color: #333;
 padding:10px;
 text-align: center;
}
</style>

html<template>
 <div class="layout">
 <!-- header -->
 <Header />
 <!-- main content -->
 <main>
 <router-view></router-view>
 </main>
 <!-- footer -->
 <Footer />
 </div>
</template>

<script>
import Header from './Header.vue'
import Footer from './Footer.vue'

export default {
 name: 'Layout',
 components: { Header, Footer }
}
</script>

<style scoped>
.layout {
 max-width:1200px;
 margin:0 auto;
}

main {
 padding:20px;
}
</style>

javascriptimport Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 routes: [
 {
 path: '/',
 name: 'home',
 component: () => import('@/views/Home.vue')
 },
 {
 path: '/about',
 name: 'about',
 component: () => import('@/views/About.vue')
 }
 ]
})

javascriptimport Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = falsenew Vue({
 render: h => h(App),
 router}).$mount('#app')