Vue·首页架子搭建
首页架子搭建
项目所使用到的依赖
结构
Container布局容器介绍
用于布局的容器组件，方便快捷搭建页面的基本结构
采用flex布局，使用前确认浏览器是否兼容
详细查看官方文档：https://element.eleme.cn/#/zh-CN
<el-container> 外层容器，当子元素中包含<el-header>或<el-footer>时，全部子容器会垂直上下排列，否则会水平左右排列。
<el-header> 顶栏容器
<el-aside> 侧边栏容器
<el-main> 主要区容器
<el-footer> 底栏容器
组件依赖下载
下载less
npm i less
下载less 解释器
npm i less-loader@6.0.0
下载vuex
npm i vuex@3.6.2
在此文件下可以查看项目中所下载的依赖：vue2-manage-v\package.json
组件依赖引用
将使用到的容器组件在main.js文件按需引入到项目中
位置：vue2-manage-v\src\main.js
import Vue from 'vue'
import App from './App.vue'
//import ElementUI from 'element-ui';
import {Button,Radio,Container,Header,Main,Aside,Menu,Submenu,MenuItem,Dropdown,DropdownMenu,DropdownItem,Row,Card,Col,Table,TableColumn} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from '../router';
import store from '../store';
import http from 'axios'; // 不是一个插件,用于异步接口调用
Vue.config.productionTip = false
Vue.use( Button );
Vue.use( Radio );
Vue.use( Container );
Vue.use( Main );
Vue.use( Aside );
Vue.use( Header );
Vue.use( Menu );
Vue.use( Submenu );
Vue.use( MenuItem );
Vue.use( Dropdown );
Vue.use( DropdownMenu );
Vue.use( DropdownItem );
Vue.use( Row );
Vue.use( Card );
Vue.use( Col );
Vue.use( Table );
Vue.use( TableColumn );
Vue.prototype.$http = http; // 绑定属性
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app')
定义展示页面
1.1.1 定义菜单界面组件
位置：vue2-manage-v\src\components\CommonAside.vue
1.Vue侧边栏的实现
2.控制导航栏是否展开
3.实现页面跳转
4.引入定义的数据
5.去掉页面最终左侧边框
<template>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @open="handleOpen" @close="handleClose"
:collapse="isCollapse">
<h3>{{isCollapse ? '后台' : '管理系统'}}</h3>
// 实现页面跳转@click
<el-menu-item @click="clickmenu(item)" v-for="item in noChildren" :index="item.path" :key="item.path">
<!--引入定义的数据-->
<!-- <i class="el-icon-menu"></i> 使用动态拼接-->
<i :class="'el-icon-' + item.icon"></i>
<!--<span slot="title">导航二</span> 渲染名称-->
<span slot="title">{{ item.label }}</span>
</el-menu-item>
<el-submenu v-for="item in hasChildren" :index="item.path" :key="item.path">
<template slot="title">
<i :class="'el-icon-' + item.icon"></i>
<span slot="title">{{ item.label }}</span>
</template>
<el-menu-item-group v-for="(subItem, subIndex) in item.children" :key="subItem.path">
<!--2级菜单 注意：引用时要有冒号-->
<el-menu-item :index="subIndex">{{ subItem.label }}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
.el-menu {
height: 100%;
border: none; // 去掉边框
h3 {
color: #fff;
text-align: center; // 字体居中
line-height: 48px;
}
}
</style>
<script>
export default {
data() {
return {
// isCollapse: false // 控制导航栏是否展开
menu: [
{
path: '/',
name: 'home',
label: '首页',
icon: 's-home',
url: 'Home/Home'
},
{
path: '/mall',
name: 'mall',
label: '商品管理',
icon: 'video-play',
url: 'MallManage/MallManage'
},
{
path: '/user',
name: 'user',
label: '用户管理',
icon: 'user',
url: 'https://blog.csdn.net/qq_43308318/article/details/124649001?spm=1001.2014.3001.5502'
// url: 'UserManage/UserManage'
},
{
label: '其他',
icon: 'location',
children: [
{
path: '/page1',
name: 'page1',
label: '页面1',
icon: 'setting',
url: 'Other/PageOne'
},
{
path: '/page2',
name: 'page2',
label: '页面2',
icon: 'setting',
url: 'Other/PageTwo'
}
]
}
]
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
clickmenu(item) { // 页面跳转函数
this.$router.push({
name: item.name
})
}
},
computed: { // 定义属性
noChildren() {
return this.menu.filter(item => !item.children) // 如果没有子项目
},
hasChildren() {
return this.menu.filter(item => item.children) // 有子项目
},
isCollapse() {
return this.$store.state.tab.isCollapse
}
}
}
</script>
1.1.2 定义Header界面组件
位置：vue2-manage-v\src\components\CommonHeader.vue
1.Header的展开与收起
2.使用浮动，对div内容以行的形式展示
3.引用图片(vue2-manage-v\src\assets\images\user.png)
Header的展开与收起
下载依赖：npm i vuex@3.6.2
- vue2-manage-v\store\index.js
import Vue from 'vue';
import Vuex from 'vuex';
import tab from './tab'
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
tab
}
})
- vue2-manage-v\store\tab.js
export default {
state: {
isCollapse: false
},
mutations: {
collapseMenu(state) {
state.isCollapse = !state.isCollapse
}
}
}
Header界面组件
<template>
<header>
<!-- // 使用浮动-->
<!--<div style="display: flex;align-items:center;justify-content: left;">-->
<div class="l-content">
<el-button @click="handleMenu" plain icon="el-icon-menu" size="mini" style="float: left "></el-button>
<h3 style="color:#fff;float: left,up ">首页</h3>
</div>
<div class="r-content">
<el-dropdown trigger="click" size="mini">
<span>
<img class="user" :src="userImg" size="mini">
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">个人中心</el-dropdown-item>
<el-dropdown-item command="b">退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</header>
</template>
<script>
export default {
name: 'CommonHeader',
data() {
return {
userImg: require('../assets/images/user.png')
}
},
methods: {
handleMenu() {
this.$store.commit('collapseMenu')
}
}
}
</script>
<style lang="less" scoped>
header{
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
}
.l-content {
display: flex;
align-items: center;
.el-button {
margin-right: 20px;
}
}
.r-content {
.user {
width: 40px;
height: 40px;
border-radius: 50%;
}
}
</style>
1.2.1 主界面Main.vue
位置：vue2-manage-v\views\Main.vue
1.添加背景色
2.对mian的样式覆盖
注：vue命名规范，将驼峰命名改成下划线小写
<template>
<el-container style="height: 100%">
<el-aside width="auto">
<common-aside></common-aside>
<!--vue命名规范，将驼峰命名改成下划线小写 -->
</el-aside>
<el-container>
<el-header>
<common-header></common-header>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import CommonAside from '../src/components/CommonAside.vue'
import CommonHeader from '../src/components/CommonHeader.vue'
export default {
name: 'Home',
components: {
CommonAside,CommonHeader
},
data() {
return {}
}
}
</script>
<style lang="less" scoped>
.el-header {
// 添加背景色
background-color: #333;
}
.el-main {
// 对mian的样式覆盖
padding-top: 0;
}
</style>
1.2.2. home页面
位置：vue2-manage-v\views\home\index.vue
<template>
<el-row class="home" :gutter="20">
<!--//栅格间隔 -->
<el-col :span="8" style="margin-top: 20px;">
<el-card shadow="hover">
<div class="user">
<img class="imgp" :src="userImg" />
<div class="userinfo">
<p class="name" style="float: letf">Admin</p>
<p class="access">超级管理员</p>
</div>
</div>
<p>-------------------------------------------------- </p>
<div class="login-info">
<p style="float: ">上次登陆时间：<span>2021-07-19</span></p>
<p>上次登录地点：<span>上海</span></p>
</div>
</el-card>
<el-card>
<el-table :data="tableData">
<el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val">
</el-table-column>
</el-table>
</el-card>
</el-col>
<el-col style="margin-top: 20px" :span="16">
<!--// 左右两边对齐 -->
<!--居中text-align: center-->
<div class="num" style="display: flex;">
<!--// 浮动 -->
<el-card v-for="item in countData" :key="item.name" :body-style="{ display: 'flex', padding: 0 }"
style=" width: 240px; height: 130px ;text-align: center;">
<i class="icon" :calss="`el-icon-${item.icon}`" :style="{ background: item.color }"
style=" width: 120px; height: 120px">
<div class="detail">
<p class="num">￥{{ item.value }}</p>
<p class="txt">{{ item.name }}</p>
</div>
</i>
</el-card>
</div>
<el-card style="height: 280px"></el-card>
<div class="graph" style=" display: flex;">
<el-card style="height: 260px;width: 260px;"></el-card>
<el-card style="height: 260px;width: 260px;"></el-card>
</div>
</el-col>
</el-row>
</template>
<script>
import { getMenu } from '../../api/data.js' // axios异步调用
export default {
name: 'home',
data() {
return {
userImg: require('../../src/assets/images/user.png'),
tableData: [
{
name: 'oppo',
todayBuy: 100,
monthBuy: 300,
totalBuy: 800
},
{
name: 'vivo',
todayBuy: 100,
monthBuy: 300,
totalBuy: 800
},
{
name: '苹果',
todayBuy: 100,
monthBuy: 300,
totalBuy: 800
},
{
name: '小米',
todayBuy: 100,
monthBuy: 300,
totalBuy: 800
},
{
name: '三星',
todayBuy: 100,
monthBuy: 300,
totalBuy: 800
},
{
name: '魅族',
todayBuy: 100,
monthBuy: 300,
totalBuy: 800
}
],
tableLabel: {
name: '课程',
todayBuy: '今日购买',
monthBuy: '本月购买',
totalBuy: '总购买'
},
countData: [
{
name: "今日支付订单",
value: 1234,
icon: "success",
color: "#ffb980",
},
{
name: "今日收藏订单",
value: 210,
icon: "star-on",
color: "#2ec7c9",
},
{
name: "今日未支付订单",
value: 1234,
icon: "s-goods",
color: "#5ab1ef",
},
{
name: "本月支付订单",
value: 1234,
icon: "success",
color: "#ffb980",
},
{
name: "本月收藏订单",
value: 210,
icon: "star-on",
color: "#2ec7c9",
},
{
name: "本月未支付订单",
value: 1234,
icon: "s-goods",
color: "#5ab1ef",
},
]
}
},
mounted() { // axios异步调用
getMenu().then(res => {
console.log(res)
})
// this.$http.get('/user?ID=12345')
// .then(function (response) {
// console.log(response);
// })
// .catch(function (error) {
// console.log(error);
// });
} // 生命周期
}
</script>
<style lang="less" scoped>
.home {
.imgp {
width: 120px;
height: 120px;
border-radius: 50%;
}
}
</style>
1.2.3. user页面
vue2-manage-v\views\User\index.vue
<template>
<div>我是user页面</div>
</template>
<script>
export default {
name: 'User' ,
data() {
return {}
}
}
</script>
router路由设置
vue2-manage-v\router\index.js
对定义的页面引用路径管理
// 引入vue
import Vue from 'vue'
// 全局引入router
import VueRouter from 'vue-router'
// import { component } from 'vue/types/umd'
// import Home from '../views/Home.vue' // 1.直接传入 需要先导入依赖
Vue.use(VueRouter)
// 接受数组传递，用来串入路由的相关信息
const routes = [
{
path: '/', // 根目录
name: 'Main', // (可以不配置)函数式编程会使用到
// component: Home // 两种引入vue页面方式 1.直接传入 2.按需引入
component: () => import('../views/Main.vue'), // 2.按需引入
children: [
{
path: '/name',
name: 'home',
component: () => import('../views/home/index.vue')
},
{
path: '/user',
name: 'user',
component: () => import('../views/User/index.vue')
}
]
},
]
// Router配置
const router = new VueRouter({
mode: 'history',
routes
})
// 对外进行暴露
export default router
App.vue中引入定义的页面
在App.vue引入后才能在浏览器中展示
vue2-manage-v\src\App.vue
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> -->
<router-view></router-view> <!-- 引入router定义的页面-->
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
// components: {
// HelloWorld
// }
}
</script>
// 去掉最左侧白边
<style>
html,body {
margin: 0;
padding: 0;
}
#app {
height: 100vh;
}
</style>
启动项目
npm run serve
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
