vue 模块化开发_3_主页设计(Photoshop)_上部分

最新推荐文章于 2023-04-19 18:32:27 发布
最新推荐文章于 2023-04-19 18:32:27 发布
阅读量649 收藏
点赞数 1
分类专栏： vue 文章标签： ps 后台
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33330414/article/details/100569109
版权

设计后台布局样式

一.前言废话

前两章我们已经安装了nodejs,webpack,vue,iview等环境和工具，并且上一章我们已经跑起来了demo。现在我们要规划一下我们要做什么东西，当然在此之前作者已经做好前期工作了。目的就是做后台管理系统，虽然iview有提供几款布局样式，但作者还是想自己设计一个。
事情进展到了这一步接下来我们就要设计主页了。
作者：并非专业设计或前端人员，审美全靠个人觉得好看

使用工具：ps

二.整体布局设计

  1. 首先我们采用国际通用的 顶部+左侧菜单+右侧内容+底部 的设计，大概就是下面这样子。
    在这里插入图片描述

  2. 然后选一套好看的配色
    顶部 #273f46
    左侧 #ffffff 加边框
    底部 #eceff1
    在这里插入图片描述

三.头部布局设计

我们需要以下内容
1.菜单收缩按钮
2.logo
3.搜索框
4.用户头像姓名
5.更多按钮
大概就是下面这样
在这里插入图片描述
替换图片和文字就是下面这样
在这里插入图片描述

四.左侧菜单布局设计

我们需要以下内容
1.菜单图标
2.菜单名称
3.菜单子项
大概就是下面这样，看起来宽度似乎不够，后面再给宽一点吧。
在这里插入图片描述
替换图片和文字就是下面这样
在这里插入图片描述

end-剩下的下一章再做

Ice Burning
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
手把手教你开发photoshop面板插件（附demo和工具）
iamlujingtao的博客
11-11 1万+
手把手教你做photoshop面板插件一、前言二、插件演示三、目录文件介绍3.1 插件安装3.2 插件文件介绍3.3 manifest 文件介绍3.4 jsx文件加载的2中方式3.5 index.html 程序入口3.6 main.js 一、前言 phtoshop插件通常有2中方式，一种是以“脚本运行”的方式，另一种是“面板插件”的方式，最近自己需要做一个面板插件，但是发现相关教程实在太少了，本文...
vue 模块化开发_3_主页设计(Photoshop)_下部分
qq_33330414的博客
09-06 697
设计后台布局样式一.前言废话二.左侧菜单收起效果三.主页首页内容设计 一.前言废话 接上一章继续内容主页设计 使用工具：ps 二.左侧菜单收起效果 上一章我们已经做出如下效果设计 我们给他加上关闭菜单后的样式 三.主页首页内容设计 作者按照先前的构想，将主页内容布局以及设计如下。 主页设计暂且如此，下一章开始前端内容编写 ...
vue JS 中使用PS导出的SVG 进行坐标转PS，对某个点设置成可视区中心
C_jian_的博客
04-19 122
在手机上操作SVG，想要对某一个坐标点在屏幕可视区的中间显示
thinkphp+vue傻瓜式PS级可视化自助建站系统平台版
yinxinet1的博客
06-27 1929
偷偷使用THINKPHP+vue开发的自助建站平台软件，支持企业站+门户站（资讯+视频+分类信息）+专业商城+自助建站平台（域名注册、网站开设、域名绑定、模板生成）+专业PS级傻瓜式可视化排版后台+模块化+风格100%可控...
vue-multipage vue 模块化开发打包
11-23
vue-multipage vue 模块化开发打包
基于TypeScript和Vue的uniapp_V3_TS设计源码
最新发布
05-28
本uniapp_V3_TS项目基于TypeScript和Vue开发，包含81个文件，其中包括22个TS源文件、22个PNG图像文件、19个Vue组件文件、9个JSON配置文件、2个SCSS样式文件、1个Editorconfig文件、1个CJS文件、1个Gitignore文件、1...
vue中node_modules中第三方模块的修改使用详解
10-16
主要介绍了vue中node_modules中第三方模块的修改使用,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
AutoVue_3DPRO_21_0_2.zip
04-22
AutoVue_3DPRO_21_0_2 window桌面应用 Oracle AutoVue Desktop Deployment可以打开DWG，PDF，MPP，DOC，XLSX等等常见文件格式 安装即可使用。 请勿用于商业用途！如不同意请勿下载。官方正版应用，如需商用请与...
vue3_dev_tools.crx
12-19
vue3_dev_tools插件
JS实现在线ps功能详解
12-11
前言 本系统是基于fabric.js实现的canvas版图片,文本编辑器,支持对图片的放大,缩小,旋转,镜面翻转,拖动,显示/隐藏图层,删除图层,替换图层等操作,对文本支持修改文本内容,颜色,字体,加粗,斜体,下划线,背景色等,同时支持图片已有的操作,拖动图层有辅助线功能,可对画布做放大缩小功能,多操作可撤销/回退功能,可直接导出图片,ps基本操作都已支持,欢迎star. 项目地址https://github.com/Jeff-Bee/onLinePS 功能预览图 目录结构 fabric.js相关 fabric 文档地址 由于中文资料很少,使用过程中也遇到了很多问题,找了好多资料总算是把
WebPhotoshop:仿照Photoshop的在线图像处理软件。演示地址：
05-02
WebPhotoshop 简介 本项目是一个基于Canvas的仿照Photoshop的在线图像处理软件，技术栈vue+express+mongoose。 项目特点 基本的绘图工具 基本的图像处理工具（色相/饱和度，亮度/对比度, 色阶，滤镜） 曲线调整工具 一些小工具(图片剪切、旋转，标尺，颜色选择器，操作记录等) 基于node的静态资源服务器 演示地址 项目截图 开发 安装 运行 构建 npm install npm run dev npm run build 开启服务器 cd serve node index
vue 实现ps图片编辑_基于vue的h5实现图片裁剪功能(cropperjs)
weixin_39539563的博客
12-19 752
import Cropper from 'cropperjs'import Exif from'exif-js'exportdefault{install( Vue ){//初始化方法Vue.prototype.initilize = function( opt ){let self= this;this.options =opt;//创建domthis.createElement();this....
Vue组件化开发
troysps的博客
05-19 2535
Vue js组件化开发 Vue js 对象简写 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
基于VUE的ElementUi可视化表单设计器布局器
热门推荐
heye520的博客
09-27 3万+
码农苦码农懂！ 您是否有过以下想法： 我是一名element初学者，我想以最短的时间快速进入 element 的大门 我是一名后端工程师，虽能熟练掌握 JS 的写法，但是页面样式布局让我很头疼 我是一名创业者或者团队 Leader，如果能有一款软件降低团队或者我的开发门槛，提升效率和体验，就好了 我正在寻找一款能嵌入工作流，Sass,Pass 等系统的可视化 WEB 表单设计器，让用户自己通过我们...
vue + element-ui实现简洁的导入导出功能
小屁孩大帅-保密的博客
01-04 9097
众所周知，ElementUI,是一个比较完善的UI库，但是使用它需要有一点vue的基础。在开始本文的正文之前，我们先来看看安装的方法吧。 安装ElementUI模块 ? 1 cnpm install element-ui -S 在main.js中引入 ? 1 2 import ElementUI from '...
vue 使用、slice_使用Cut＆Slice Me轻松导出Photoshop图层
cune1359的博客
06-28 723
在设计过程中进行切割和切片无疑是耗时的工作。 此外，当您必须以不同比例切割和切片数百个图层时，它变得越来越复杂。 当然，在Photoshop中有复制合并，将图层导出到文件或切片功能的功能。 但是这些方法在加快剪切和切片过程中没有多大帮助。 您需要的是一个插件。 Cut＆Slice Me是Photoshop的扩展程序，用于简化剪切和切片设计的过程 。 然后，您可以为iPhone，Andr...
JS实现在线ps功能
weixin_30652879的博客
07-30 367
功能介绍 本系统是基于fabric.js实现的canvas版图片,文本编辑器,支持对图片的放大,缩小,旋转,镜面翻转,拖动,显示/隐藏图层,删除图层,替换图层等操作,对文本支持修改文本内容,颜色,字体,加粗,斜体,下划线,背景色等,同时支持图片已有的操作,拖动图层有辅助线功能,可对画布做放大缩小功能,多操作可撤销/回退功能,可直接导出图片,ps基本操作都已支持,欢迎star. ...
vue3模块化开发
06-01
Vue3支持ES模块化开发，可以使用import和export语法来进行模块化开发。具体步骤如下： 1. 在项目中使用ES模块化开发，可以使用.vue文件或.js文件。 2. 在需要导出的模块中使用export语句进行导出，例如： ``` // utils.js export function add(a, b) { return a + b; } ``` 3. 在需要导入模块的地方使用import语句进行导入，例如： ``` // app.js import { add } from './utils.js'; console.log(add(1, 2)); // 3 ``` 4. 在Vue3中，可以使用import语句导入组件，并且需要在组件选项中使用export default语句进行导出，例如： ``` // MyComponent.vue <template> <div>Hello World!</div> </template> <script> export default { name: 'MyComponent', // ... } </script> // app.js import MyComponent from './MyComponent.vue'; const app = createApp(MyComponent); app.mount('#app'); ``` 这样就可以在Vue3中进行ES模块化开发了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值