vue后台第二部步(布局和封装图标组件)

目录结构;根据需求修改、创建对应目录;

src  应用部署目录├─api                                                接口├─assets                                             公共文件│  ├─theme.scss			                           	 主题样式库│  ├─images			                               	 默认图片(默认头像、登录图片、背景图片等)│  ├─style			                              	 样式优化区│  │  ├─index.scss                                   		后台基础样式│  │  ├─card.scss                                    		后台桌面和控制台各种卡片样式├─components   									   组件│  ├─framework                                         框架基础组件   │  │  ├─Topcrumb.vue                                 		框架头部组件│  │  ├─tagsview.vue                                 		框架头部标签组件│  │  ├─TreeMenu.vue                                		框架右侧菜单组件│  ├─form                                            表单组件│  │  ├─JmInput.vue                                 	 Input文件(文本、多行文本、数字、密码框、滑块、颜色选择、图标选择、评分组件、单图上传、多图上传、单文件上传、多文件上传、富文本、开关)   │  │  ├─JmEnum.vue                                  	 选择框文件(日期、日期+时间、时间、时间范围选择、城市(三级联动、单城市等)、多选、单选、普通下拉、动态下拉(分页、自定义格式))│  │  ├─list.vue                                    	 列表文件(键值对)│  ├─list                                            列表页组件│  │  ├─index.vue                                 	   列表页组件(整合快捷搜索、快捷按钮、表格、分页)  │  │  ├─search.vue                                  	 快捷搜索文件(整合搜索表单和搜索格式) │  ├─table                                           表格组件│  │  ├─index.vue                                 	   列表页组件 (表格的每个字段如何显示)  │  │  ├─JmTb.vue                                  	   字段文件(selection框、文本、数字、图标、格式化日期、自定义单位¥、链接、内容截断、评分、状态、开关、多文件和单文件、多图和单图、默认、自定义格式)  ├─router                                             路由管理├─store                                              │  ├─index.js                                        用户状态文件(获取用户信息、头部标签信息)│  ├─mutations.js                                    业务层数据提交├─utils                                             │  ├─request.js                                      axios二次封装文件(请求拦截器、响应拦截器)│  ├─storage.js                                      Storage二次封装(设置缓存、清空缓存、获取缓存、删除缓存)│  ├─utils.js                                        工具封装(时间格式化、数字格式化、返回数据类型、判断是否为空、颜色混合)├─views                                              视图层

3、布局和图标组件

3.1 布局

先创建views目录和修改router路由、并创建views/index/index.vue页面
然后改app.vue;

<template>
<router-view />
</template>

然后改路由

 
import { createRouter, createWebHashHistory } from 'vue-router'
// import Home from '../components/Home.vue'const routes = [{name: 'Index',path: '/',meta: { title:'首页' },component:() => import('../views/index/index.vue')} ]const router = createRouter({history: createWebHashHistory(),routes
})
export default router

然后找一下element-plus的布局容器
我选择
在这里插入图片描述
代码

<template><div class="common-layout"><el-container><el-aside width="200px">Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main></el-container></el-container></div></template>

就是这样,布局就搞定了;
接下来打算弄一个图标组件

3.2图标组件

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库监控:关键指标和注意事项

【squids.cn】 全网zui低价RDS&#xff0c;免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等 听到模糊的说法“我们的数据库有问题”对于任何数据库管理员或管理员来说都是一场噩梦。有时是真的&#xff0c;有时不是&#xff0c;到底问题出在哪里呢&#xff1f;真…

《语音优先》智能语音技术驱动的交互界面设计与语音机器人设计(译者序)...

“言为心声,语为心境”&#xff0c;语言与对话是我们沟通与协作的重要方式。而智能语音技术是一种基于人工智能和自然语言处理技术的语音交互技术。它可以通过语音识别技术将用户的语音指令转换为文本&#xff0c;然后通过自然语言处理技术对文本进行分析和理解&#xff0c;最终…

2023Etsy入驻攻略——防封安全

2023了&#xff0c;跨境电商现在上车还来得及吗&#xff1f;当然&#xff01;Etsy是一个低成本低竞争高回报的平台&#xff0c;相较于其他电商平台&#xff0c;他的佣金非常低&#xff0c;利润率更高&#xff0c;非常合适跨境小白入局。 但由于目前Etsy关闭了中国大陆卖家的注…

FTP服务器操作手册

FTP服务器(File Transfer Protocol Server)是在互联网上提供文件存储和访问服务的计算机&#xff0c;它们依照FTP协议提供服务。FTP协议是File Transfer Protocol(文件传输协议)&#xff0c;专门用来传输文件的协议。FTP服务器是企业里经常用到的服务器&#xff0c;今天就介绍一…

Qt 项目实战 | 多界面编辑器

Qt 项目实战 | 多界面编辑器 Qt 项目实战 | 多界面编辑器界面设计创建子窗口类 官方博客&#xff1a;https://www.yafeilinux.com/ Qt开源社区&#xff1a;https://www.qter.org/ 参考书&#xff1a;《Qt 及 Qt Quick 开发实战精解》 Qt 项目实战 | 多界面编辑器 开发环境&…

最新Jn建站系统2.0 已集成各类源码 【附视频安装教程】

附视频安装教程|已集成各类源码 目前已集成的网站&#xff1a; 1.发卡网(最新) 2.代刷网(无需授权) 3. 博客网(自带模板) 4.易支付(稳定版) 5.个人导航网(简洁) 6.代理查询网 7.留言网 8.匿名网 9.表白墙(最新) 10.抽奖网 11.源码站 12.z-blog博客程序 13.织梦CM…

在Word中,图片显示不全

在今天交作业的时候&#xff0c;发现了一个非常SB的事情&#xff0c;把图片复制过去显示不完全&#xff1a; 使用文心一言查看搜索了一下&#xff0c;发现可能是以下几种原因&#xff1a; 图片所在行的行高设置不正确。可以重新设置行高&#xff0c;具体步骤包括打开图片显示…

自然语言处理---RNN经典案例之构建人名分类器

1 案例介绍 关于人名分类问题&#xff1a;以一个人名为输入, 使用模型帮助判断它最有可能是来自哪一个国家的人名&#xff0c;这在某些国际化公司的业务中具有重要意义&#xff0c;在用户注册过程中&#xff0c;会根据用户填写的名字直接给他分配可能的国家或地区选项&#xff…

【C语言进阶】指针进阶(三)

指针进阶&#xff08;三&#xff09; 9.指针和数组笔试题解析10.指针笔试题 9.指针和数组笔试题解析 数组名的理解 数组名是数组首元素的地址 但是有2个例外&#xff1a; sizeof(数组名)&#xff0c;这里的数组名表示整个数组&#xff0c;sizeof(数组名)计算的是整个数组的大…

SpringMVC(三)获取请求参数

1.1通过ServletAPI获取 SpringMVC封装的就是原生的servlet 我们进行测试如下所示&#xff1a; package com.rgf.controller.service;import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping;import javax.servlet.…

纺织工厂数字孪生3D可视化管理平台,推动纺织产业数字化转型

近年来&#xff0c;我国加快数字化发展战略部署&#xff0c;全面推进制造业数字化转型&#xff0c;促进数字经济与实体经济深度融合。以数字孪生、物联网、云计算、人工智能为代表的数字技术发挥重要作用。聚焦数字孪生智能工厂可视化平台&#xff0c;推动纺织制造业数字化转型…

OpenCV17-图像形态学操作

OpenCV17-图像形态学操作 1.形态学操作1.1腐蚀1.2膨胀 2.形态学应用2.1开运算2.2闭运算2.3形态学梯度2.4顶帽运算2.5黑帽运算2.6击中击不中变换2.7形态学应用示例 1.形态学操作 1.1腐蚀 图像腐蚀&#xff08;Image erosion&#xff09;可用于减小图像中物体的大小、填充孔洞或…

css之Flex弹性布局(子项常见属性)

文章目录 &#x1f380;前言&#xff1a;本篇博客介绍弹性布局flex容器中子项的常见用法&#x1fa80;flex:子项目占得份数 &#xff08;划分不同子项的比例&#xff09;&#x1f387;align-self 控制单独一个子项在侧轴的排列方式&#x1f9f8;order属性定义子项的排列顺序 &a…

酷开科技 | 酷开系统,为居家生活打开更精彩的窗口

电视在我们的日常生活中扮演着重要的角色。虽然&#xff0c;作为客厅C位的扛把子——电视的娱乐作用深入人心&#xff0c;但是&#xff0c;它的涵义和影响力却因我们每个人的具体生活环境而存在着种种差异&#xff0c;而我们的生活环境又受到我们所处的社会及文化环境的影响。 …

一文了解AIGC与ChatGPT

一、AIGC简介 1.AIGC基础 (1)AIGC是什么 AIGC是人工智能图形计算的缩写&#xff0c;是一种基于图形处理器&#xff08;GPU&#xff09;的计算技术&#xff0c;可以加速各种计算任务&#xff0c;包括机器学习、深度学习、计算机视觉等。 AIGC是一种基于GPU的计算技术&#x…

Git(一)Windows下安装及使用Git Bash

目录 一、简介1.1 什么是Git&#xff1f;1.2 Git 的主要特点1.3 什么是 Git Bash&#xff1f; 二、下载三、安装3.1 同意协议3.2 选择安装位置3.3 其他配置&#xff08;【Next】 即可&#xff09;3.4 安装完毕3.5 打开 Git Bash 官网地址&#xff1a; https://www.git-scm.com/…

包管理工具

代码共享方案 放到npm仓库&#xff0c;下载到本地放到node_modules npm配置文件 必须填写的属性&#xff1a;name、version name是项目的名称&#xff1b; version是当前项目的版本号&#xff1b; description是描述信息&#xff0c;很多时候是作为项目的基本描述&#xff1b…

力扣每日一题61:旋转链表

题目描述&#xff1a; 给你一个链表的头节点 head &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 k 个位置。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], k 2 输出&#xff1a;[4,5,1,2,3]示例 2&#xff1a; 输入&#xff1a;head [0,1,2], k 4 输…

CSS必学:你需要知道的盒子模型的秘密

作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 &#x1f449; WangMin 作为前端开发来说&#xff0c;要掌握的CSS基础一定很多&#xff0c;那么CSS中盒子模型肯定是必考必问必掌握的前端知识点&#xff0c;因为它是CSS基础中非常重要的内容&#xff0c;…

异步编程详解(.NET)

在之前写的一篇关于async和await的前世今生的文章之后&#xff0c;大家似乎在async和await提高网站处理能力方面还有一些疑问&#xff0c;很多网站本身也做了不少的尝试。今天我们再来回答一下这个问题&#xff0c;同时我会做一个async和await在WinForm中的尝试&#xff0c;并且…