Vue Web开发（二）

1. 项目搭建

1.1. 首页架子搭建

  使用Element ui中的Container布局容器，选择倒数第二个样式，将代码复制到Home.vue。
在这里插入图片描述

1.1.1.下载less

  （1）下载less样式
npm i less
在这里插入图片描述
  （2）下载less编辑解析器
npm i less-loader@5.0.0
在这里插入图片描述
  在项目package.文件中可以看到下载包
在这里插入图片描述

1.1.2. 界面开发

  界面
在这里插入图片描述
（1）按需引入组件

//main.js
import Vue from 'vue'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css';
//ElementUI全局引入
// import ElementUI from 'element-ui';
// Vue.use(ElementUI)
//ElementUI按需引入
import {Button,Container,Aside,Header,Main} from 'element-ui';
Vue.use(Button)
Vue.use(Container)
Vue.use(Aside)
Vue.use(Header)
Vue.use(Main)
import router from '../router/router.js';
Vue.config.productionTip = false
new Vue({
	router,
    render: h => h(App),
}).$mount('#app')

在这里插入图片描述
（2）界面搭建

//view/home.vue
<template>
	<el-container style="height: 100%;">
		<el-aside width="auto">Aside</el-aside>
		<el-container>
			<el-header>Header</el-header>
			<el-main>Main</el-main>
		</el-container>
	</el-container>
</template>
<script>
	export default {
		name: 'Home',
		data() {
			return {}
		}
	}
</script>
<style lang="less">
	.el-header {
		background-color: black;
	}
	.el-main {
		padding-top: 0px;
	}
</style>

在这里插入图片描述

1.2. 左侧导航栏实现

  本质上这个模块应该是在Home.vue的Aside标签内，这个模块每个页面都会用到，所以我们把它新建成一个公共模块，所以我们在components文件下新建CommonAside.vue文件，components会存放所有组件。
  左侧导航栏逻辑如图所示，有一级菜单、二级菜单。这里我们使用Element ui的NavMenu导航菜单组件的折叠组件。
在这里插入图片描述
在这里插入图片描述
  （1）新建components/CommonAside.vue文件,引入现成组件，复制代码至CommonAside.vue文件，还有style、script代码。

//components/CommonAside.vue
<template>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">导航一</span>
    </template>
    <el-menu-item-group>
      <span slot="title">分组一</span>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分组2">
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <span slot="title">选项4</span>
      <el-menu-item index="1-4-1">选项1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">导航二</span>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">导航三</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">导航四</span>
  </el-menu-item>
</el-menu>
</template>
<script>
	export default {
	  data() {
	    return {
	      isCollapse: true
	    };
	  },
	  methods: {
	    handleOpen(key, keyPath) {
	      console.log(key, keyPath);
	    },
	    handleClose(key, keyPath) {
	      console.log(key, keyPath);
	    }
	  }
	}
</script>
<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
	  width: 200px;
	  min-height: 400px;
	}
</style>

在这里插入图片描述
在这里插入图片描述
  （2）在CommonAside.vue文件中新建template标签，将元素标签放入，style、script代码在template标签外面。根据外面的逻辑图删除一些不必要的元素。

//components/CommonAside.vue
<template>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
             :collapse="isCollapse">
        <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
        </el-menu-item>
        <el-submenu index="1">
            <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">导航一</span>
            </template>
            <el-menu-item-group>
                <span slot="title">分组一</span>
                <el-menu-item index="1-1">选项1</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
        </el-menu-item>
    </el-menu>
</template>

<script>
    export default {
        data() {
            return {
                isCollapse: false
            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>
<style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
</style>

在这里插入图片描述
  （3）menu数据：在data（）return中定义menu，将数据放入menu，并且将isCollapse属性设置为false！！！，表示图标展开。

[
        {
          path: "/",
          name: "home",
          label: "首页",
          icon: "s-home",
          url: "Home/Home",
        },
        {
          path: "/mail",
          name: "mail",
          label: "商品管理",
          icon: "video-play",
          url: "MailManage/MailManage",
        },
        {
          path: "/user",
          name: "user",
          label: "用户管理",
          icon: "user",
          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",
            }
          ],
        },
      ]

//components/CommonAside.vue
<template>
	<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
		:collapse="isCollapse">
		<el-menu-item index="2">
			<i class="el-icon-menu"></i>
			<span slot="title">导航二</span>
		</el-menu-item>
		<el-submenu index="1">
			<template slot="title">
				<i class="el-icon-location"></i>
				<span slot="title">导航一</span>
			</template>
			<el-menu-item-group>
				<span slot="title">分组一</span>
				<el-menu-item index="1-1">选项1</el-menu-item>
			</el-menu-item-group>
		</el-submenu>
		<el-menu-item index="3" disabled>
			<i class="el-icon-document"></i>
			<span slot="title">导航三</span>
		</el-menu-item>
	</el-menu>
</template>

<script>
	export default {
		data() {
			return {
				isCollapse: false,
				menu: [{
						path: "/",
						name: "home",
						label: "首页",
						icon: "s-home",
						url: "Home/Home",
					},
					{
						path: "/mail",
						name: "mail",
						label: "商品管理",
						icon: "video-play",
						url: "MailManage/MailManage",
					},
					{
						path: "/user",
						name: "user",
						label: "用户管理",
						icon: "user",
						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);
			}
		}
	}
</script>

<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
</style>

  在CommonAside.vue中，这里主要是处理数据，使用computed计算属性，两个属性，noChildren和hasChildren，需要对数据源进行过滤。过滤使用filter方法，filter里面有一个函数，判断是否有子项目，这样可以拿到noChildren和hasChildren两个数组。主要是为了区分一二级菜单的渲染。

//计算属性
computed:{
      noChildren(){
          return this.menu.filter(item => !item.children)
      },
      hasChildren(){
          return this.menu.filter(item => item.children)
      }
  }

1.2.1. 一级菜单渲染

  一级菜单，进行页面渲染，更改前面的代码。遍历有v-for，使用遍历需要加上key，使用路径作为唯一标识。图标原本是，这里我们用字符串拼接，因为数据中有icon对象，双花括号渲染数据，数据有多少条就渲染多少条，一级菜单一个有四个，分别是首页、商品管理、用户管其他。

<!-- 一级菜单,:=v-bind： -->
    <el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path">
      <i :class="'el-icon-'+item.icon"></i>
      <span slot="title">{{item.label}}</span>
    </el-menu-item>

//components/CommonAside.vue
<template>
	<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
		:collapse="isCollapse">
		<!-- 一级菜单,:=v-bind： -->
		<el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path">
			<i :class="'el-icon-'+item.icon"></i>
			<span slot="title">{{item.label}}</span>
		</el-menu-item>
		<el-submenu index="1">
			<template slot="title">
				<i class="el-icon-location"></i>
				<span slot="title">导航一</span>
			</template>
			<el-menu-item-group>
				<span slot="title">分组一</span>
				<el-menu-item index="1-1">选项1</el-menu-item>
			</el-menu-item-group>
		</el-submenu>
		<el-menu-item index="3" disabled>
			<i class="el-icon-document"></i>
			<span slot="title">导航三</span>
		</el-menu-item>
	</el-menu>
</template>

<script>
	export default {
		data() {
			return {
				isCollapse: false,
				menu: [{
						path: "/",
						name: "home",
						label: "首页",
						icon: "s-home",
						url: "Home/Home",
					},
					{
						path: "/mail",
						name: "mail",
						label: "商品管理",
						icon: "video-play",
						url: "MailManage/MailManage",
					},
					{
						path: "/user",
						name: "user",
						label: "用户管理",
						icon: "user",
						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);
			}
		},
		//计算属性
		computed: {
			//没有子菜单
			noChildren() {
				return this.menu.filter(item => !item.children)
			},
			//有子菜单
			hasChildren() {
				return this.menu.filter(item => item.children)
			}
		}
	}
</script>
<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
</style>

在这里插入图片描述

1.2.2. 二级菜单渲染

   更改CommonAside.vue文件，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>
      <!-- 这里subItem和subIndex并没有实际意义，只是用来指代item.children的多个数组，两者甚至可以互换，只新定义一个也可以的,:index后面有没有.path都可以运行成功 -->
      <el-menu-item-group v-for="(subItem,subIndex) in item.children" :key="subItem.path">
        <el-menu-item :index="subIndex.path">{{subItem.label}}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>

//components/CommonAside.vue
<template>
	<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
		:collapse="isCollapse">
		<h3>通用后台管理系统</h3>
		<!-- 一级菜单,:=v-bind： -->
		<el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path">
			<i :class="'el-icon-'+item.icon"></i>
			<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>
			<!-- 这里subItem和subIndex并没有实际意义，只是用来指代item.children的多个数组，两者甚至可以互换，只新定义一个也可以的,:index后面有没有.path都可以运行成功 -->
			<el-menu-item-group v-for="(subItem,subIndex) in item.children" :key="subItem.path">
				<el-menu-item :index="subIndex.path">{{subItem.label}}</el-menu-item>
			</el-menu-item-group>
		</el-submenu>
		<el-menu-item index="3" disabled>
			<i class="el-icon-document"></i>
			<span slot="title">导航三</span>
		</el-menu-item>
	</el-menu>
</template>

<script>
	export default {
		data() {
			return {
				isCollapse: false,
				menu: [{
						path: "/",
						name: "home",
						label: "首页",
						icon: "s-home",
						url: "Home/Home",
					},
					{
						path: "/mail",
						name: "mail",
						label: "商品管理",
						icon: "video-play",
						url: "MailManage/MailManage",
					},
					{
						path: "/user",
						name: "user",
						label: "用户管理",
						icon: "user",
						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);
			}
		},
		//计算属性
		computed: {
			//没有子菜单
			noChildren() {
				return this.menu.filter(item => !item.children)
			},
			//有子菜单
			hasChildren() {
				return this.menu.filter(item => item.children)
			}
		}
	}
</script>
<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
</style>

在这里插入图片描述
  源码下载

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/930166.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

GWAS分析先做后学

GWAS分析先做后学

大家好&#xff0c;我是邓飞。 GWAS分析是生物信息和统计学的交叉学科&#xff0c;上可以学习编程&#xff0c;下可以学习统计。对于Linux系统&#xff0c;R语言&#xff0c;作图&#xff0c;统计学&#xff0c;机器学习等方向&#xff0c;都是一个极好的入门项目。生物信息如…
阅读更多...
Go学习：变量

Go学习：变量

目录 1. 变量的命名 2. 变量的声明 3. 变量声明时注意事项 4. 变量的初始化 5. 简单例子 变量主要用来存储数据信息&#xff0c;变量的值可以通过变量名进行访问。 1. 变量的命名 在Go语言中&#xff0c;变量名的命名规则 与其他编程语言一样&#xff0c;都是由字母、数…
阅读更多...
Netty 心跳机制示例 —— 服务端实现

Netty 心跳机制示例 —— 服务端实现

Netty 心跳机制示例 —— 服务端实现 1. 背景 在分布式系统和网络通信中&#xff0c;保持客户端与服务器端的连接活跃是非常重要的。如果长时间没有数据传输&#xff0c;连接可能会超时或被中断。为了解决这个问题&#xff0c;我们可以通过 心跳机制 来保证连接持续有效。 N…
阅读更多...
【Linux】 进程池 一主多从 管道通信

【Linux】 进程池 一主多从 管道通信

目录 1.代码介绍 2.channel 类 3.进程池类编写 4.主函数及其他 5. 源码 1.代码介绍 本文代码采用一主多从式&#xff08;一个主进程&#xff08;master&#xff09;多个子进程&#xff08;worker&#xff09;&#xff09;通过管道进行通信&#xff0c;实现主进程分发任务&…
阅读更多...
小红薯最新x-s 算法补环境教程12-06更新（下）

小红薯最新x-s 算法补环境教程12-06更新（下）

在上一篇文章中已经讲了如何去定位x-s生成的位置&#xff0c;本篇文章就直接开始撸代码吧 如果没看过的话可以看&#xff1a;小红薯最新x-s算法分析12-06&#xff08;x-s 56&#xff09;&#xff08;上&#xff09;-CSDN博客 1、获取加密块代码 首先来到参数生成的位置&…
阅读更多...
Nacos源码学习-本地环境搭建

Nacos源码学习-本地环境搭建

本文主要记录如何在本地搭建Nacos调试环境来进一步学习其源码&#xff0c;如果你也刚好刷到这篇文章&#xff0c;希望对你有所帮助。 1、本地环境准备 Maven: 3.5.4 Java: 1.8 开发工具&#xff1a;idea 版本控制工具: git 2、下载源码 官方仓库地址 &#xff1a;https://git…
阅读更多...
视频码率到底是什么？详细说明

视频码率到底是什么？详细说明

视频码率&#xff08;Video Bitrate&#xff09;是指在单位时间内&#xff08;通常是每秒&#xff09;传输或处理的视频数据量&#xff0c;用比特&#xff08;bit&#xff09;表示。它通常用来衡量视频文件的压缩程度和质量&#xff0c;码率越高&#xff0c;视频质量越好&#…
阅读更多...
计算机网络复习——概念强化作业

计算机网络复习——概念强化作业

物理层负责网络通信的二进制传输 用于将MAC地址解析为IP地址的协议为RARP。 一个交换机接收到一帧,其目的地址在它的MAC地址表中查不到,交换机应该向除了来的端口外的所有其它端口转发。 关于ICMP协议,下面的论述中正确的是ICMP可传送IP通信过程中出现的错误信息。 在B类网络…
阅读更多...
【AI系统】感知量化训练 QAT

【AI系统】感知量化训练 QAT

感知量化训练 QAT 本文将会介绍感知量化训练&#xff08;QAT&#xff09;流程&#xff0c;这是一种在训练期间模拟量化操作的方法&#xff0c;用于减少将神经网络模型从 FP32 精度量化到 INT8 时的精度损失。QAT 通过在模型中插入伪量化节点&#xff08;FakeQuant&#xff09;…
阅读更多...
【AI系统】模型压缩基本介绍

【AI系统】模型压缩基本介绍

基本介绍 随着神经网络模型的复杂性和规模不断增加&#xff0c;模型对存储空间和计算资源的需求越来越多&#xff0c;使得部署和运行成本显著上升。模型压缩的目标是通过减少模型的存储空间、减少计算量或提高模型的计算效率&#xff0c;从而在保持模型性能的同时&#xff0c;…
阅读更多...
使用GO--Swagger生成文档

使用GO--Swagger生成文档

概述 在前后端分离的项目中&#xff0c;后端配置swagger可以很好的帮助前端人员了解后端接口参数和数据传输。go-swagger 是一个功能全面且高性能的Go语言实现工具包&#xff0c;用于处理Swagger 2.0&#xff08;即OpenAPI 2.0&#xff09;规范。它提供了丰富的工具集&#x…
阅读更多...
排查bug的通用思路

排查bug的通用思路

⭐️前言⭐️ APP点击某个按钮没有反应/PC端执行某个操作后&#xff0c;响应较慢&#xff0c;通用的问题排查方法: 从多个角度来排查问题 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f349;博主将持续更新学习记录收获&#xff0c;友友们有任何问题可以在评…
阅读更多...
2024年认证杯SPSSPRO杯数学建模C题(第一阶段)云中的海盐解题全过程文档及程序

2024年认证杯SPSSPRO杯数学建模C题(第一阶段)云中的海盐解题全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 C题 云中的海盐 原题再现&#xff1a; 巴黎气候协定提出的目标是&#xff1a;在2100年前&#xff0c;把全球平均气温相对于工业革命以前的气温升幅控制在不超过2摄氏度的水平&#xff0c;并为1.5摄氏度而努力。但事实上&#xff0c;许多之前的…
阅读更多...
oracle之用户的相关操作

oracle之用户的相关操作

&#xff08;1&#xff09;创建用户(sys用户下操作) 简单创建用户如下&#xff1a; CREATE USER username IDENTIFIED BY password; 如果需要自定义更多的信息&#xff0c;如用户使用的表空间等&#xff0c;可以使用如下&#xff1a; CREATE USER mall IDENTIFIED BY 12345…
阅读更多...
ArcMap 处理河道坡度、计算污染区、三维爆炸功能

ArcMap 处理河道坡度、计算污染区、三维爆炸功能

ArcMap 处理河道坡度、计算污染区、三维爆炸功能今天分析 一、计算河道方向坡度 1、折线转栅格 确定 2、提取河道高程值 确定后展示河流的高程值 3、计算坡向数据 确定后展示 4、计算坡度数据 确定后展示 二、计算上游集水区污染值 1、填挖处理 确定 2、计算流向 确定 3、计算…
阅读更多...
一睹：微软最新发布的LazyGraphRAG

一睹：微软最新发布的LazyGraphRAG

微软近期推出了一项革新性的技术——LazyGraphRAG&#xff0c;这是一种启用图谱的检索增强生成&#xff08;Retrieval Augmented Generation&#xff0c;RAG&#xff09;技术&#xff0c;它以其卓越的效率和成本效益&#xff0c;彻底颠覆了传统观念中对“懒惰”的刻板印象。 位…
阅读更多...
linux_kernel_编程

linux_kernel_编程

内核报错信息查看 include/uapi/asm-generic/errno-base.h 设备树的读取操作 struct device_node *ncof_property_read_bool(nc, "spi-cpha")if (!of_node_name_eq(nc, "slave"))rc of_property_read_u32(nc, "reg", &…
阅读更多...
arm64 UOS平台docker配置gitlab

arm64 UOS平台docker配置gitlab

arm64 UOS平台docker配置gitlab 加载或下载gitlab docker镜像配置 加载或下载gitlab docker镜像 docker load < gitlab.tar docker tag xxx gitlab_arm 配置 创建gitlab目录&#xff0c;在gitlab目录下创建etc log opt 目录创建启动文件start_gitlab.sh并增加执行权限 d…
阅读更多...
【Homework】【8】Learning resources for DQ Robotics in MATLAB

【Homework】【8】Learning resources for DQ Robotics in MATLAB

作业任务 创建一个名为“VS050RobotDH”的类&#xff0c;该类代表Denso VS050机器人&#xff0c;其DH参数如下表所示&#xff0c;并且完全由旋转关节组成。&#xff08;请记住第6课的内容&#xff09; θ \theta θ d d d a a a α \alpha α − π -\pi −π0.3450 π 2 \fra…
阅读更多...
Cannot resolve symbol ‘ActivityThread‘ | Android 语法

Cannot resolve symbol ‘ActivityThread‘ | Android 语法

背景 ActivityThread 是 Android 系统内部使用的一个类，它位于 android.app 包中，但在 Android SDK 的公共 API 中并没有公开。 由于 ActivityThread 是隐藏的内部类，因此在编写单元测试或功能开发时，无法直接引用它。可以使用反射来访问内部 API，或者使用依赖注入的方式…
阅读更多...
最新文章

Copyright @ 2022~2023