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

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

设计后台布局样式

一.前言废话

接上一章继续内容主页设计

使用工具：ps

二.左侧菜单收起效果

  1. 上一章我们已经做出如下效果设计
    在这里插入图片描述

  2. 我们给他加上关闭菜单后的样式
    在这里插入图片描述

三.主页首页内容设计

作者按照先前的构想，将主页内容布局以及设计如下。
在这里插入图片描述

主页设计暂且如此，下一章开始前端内容编写

Ice Burning
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
WebPhotoshop:仿照Photoshop的在线图像处理软件。演示地址：
05-02
WebPhotoshop 简介 本项目是一个基于Canvas的仿照Photoshop的在线图像处理软件，技术栈vue+express+mongoose。 项目特点 基本的绘图工具 基本的图像处理工具（色相/饱和度，亮度/对比度, 色阶，滤镜） 曲线调整工具 一些小工具(图片剪切、旋转，标尺，颜色选择器，操作记录等) 基于node的静态资源服务器 演示地址 项目截图 开发 安装 运行 构建 npm install npm run dev npm run build 开启服务器 cd serve node index
Vue3项目实战：像素风LOGO编辑器 Pixeled Pic Pro
Gnak75的博客
12-14 1704
Vue3项目实战，基于vue3模版快速开发，专注功能，快速迭代。基于Konva实现像素风格图片编辑器
vue基础教程（7）——构建项目级首页
关注前端，关注原创
04-25 1148
前面我们学习了vue的路由和登录页搭建，本文将和大家共同学习首页的搭建。首页示例如图：很多项目经验比较少的同学，一般都是对某些语法很熟悉，但是对整个项目是如何从零开始搭建的，页面布局是如何通过代码实现的，可能并未过多关注。也许有人会说，这些ui框架或者开源项目，都会开箱即用，可如果框架提供的布局无法满足要求呢，如果开源项目存在bug呢，如果企业做大做强需要UI重新设计web端呢？我们有太多的理由去了解这些基础知识，我们可以永远不做，但是不能不会！
vue实现ps辅助线功能
张一西的博客
04-03 2394
先上效果图 项目地址 (vue-ruler-tool) 点此进入 特点 没有依赖 可拖动的辅助线 快捷键支持 安装与基本用法 $ npm install --save vue-ruler-tool 全局注册 import Vue from 'vue' import VueRulerTool from 'vue-ruler-tool' Vue.component('vue-ruler...
vue JS 中使用PS导出的SVG 进行坐标转PS，对某个点设置成可视区中心
C_jian_的博客
04-19 122
在手机上操作SVG，想要对某一个坐标点在屏幕可视区的中间显示
开源项目 | 一款基于NodeJs+Vue3的强大的在线设计图片工具
andgg的博客
10-15 769
采用 Vue3+Vite2+Vuex+ElementPlus 技术实现的在线海报图片设计工具，可用于生成电商分享图、文章长图、视频/公众号封面等。
vue 实现ps图片编辑_基于vue-simplemde实现图片拖拽、粘贴功能
weixin_39824033的博客
12-19 695
项目使用的是vue框架，需要一个markdown的编辑框，就在npm上找了一下，发现simplemde挺不错的，由于我比较懒，就顺便在npm又搜了一下，找到了vue-simplemde这个 package ，那就开始使用它吧。但是这个 vue-simplemde 不支持图片拖拽上传、粘贴上传，也不能说是因为这个 vue-simplemde ，因为 vue-simplemde 只是对 simplem...
vue实现PS效果，鼠标拖拽指令、十字辅助线、鼠标选点、打印页面指定内容、生成随机id、颜色选择器、div上输入文字（类似QQ截图输入文字）、vue图片上传转base64...
热门推荐
大香蕉的博客
12-08 10万+
vue实现PS效果，鼠标拖拽指令、十字辅助线、鼠标选点、打印页面指定内容、生成随机id、颜色选择器、div上输入文字（类似QQ截图输入文字）、vue图片上传转base64...
Vue创建首页
qq_52335038的博客
10-04 1万+
一、创建后台页面 1.在前台components里创建loyout.vue组件，作为后台管理页面
手把手教你开发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首页页面
qq_45179361的博客
02-11 1138
vue首页页面
vue-color：适用于Sketch，Photoshop，Chrome等的Vue拾色器http://vue-color.surge.sh
02-06
彩色 带有Vue.js（vue2.0）的Sketch，Photoshop，Chrome等颜色选择器。 安装 NPM $ npm install vue-color 普通JS var Photoshop = require ( 'vue-color/src/Photoshop.vue' ) ; new Vue ( { components : { 'Photoshop' : Photoshop } } ) ES6 import { Photoshop } from 'vue-color' new Vue ( { components : { 'photosho
vue-pswipe::rocket:易于使用，无需设置大小，支持旋转，基于photowipe的vue滑动插件
05-17
Vue-Pswipe 没有设置图像大小的PhotoSwipe的Vue插件 在线示例 安装 npm install vue-pswipe 用法 // main.js import Photoswipe from 'vue-pswipe' Vue . use ( Photoswipe , options ) 查看 您可以在元素中设置v-pswp指令以将其标记为可点击 < Photoswipe> < img xss=removed xss=removed> </ Photoswipe> 道具 财产 类型 描述 默认 选项 目的 原始的PhotoSwipe选项，请参阅 -- 汽车 布尔值 自动收集所有img标签，而无需使用v-pswp指令 错误的 气泡 布尔值 允许点击事件冒泡 错误的 懒惰的
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插件
vue 模块化开发_3_主页设计(Photoshop)_上部分
qq_33330414的博客
09-06 649
设计后台布局样式一.前言废话二.整体布局设计三.头部布局设计四.左侧菜单布局设计 一.前言废话 前两章我们已经安装了nodejs,webpack,vue,iview等环境和工具，并且上一章我们已经跑起来了demo。现在我们要规划一下我们要做什么东西，当然在此之前作者已经做好前期工作了。目的就是做后台管理系统，虽然iview有提供几款布局样式，但作者还是想自己设计一个。 事情进展到了这一步接下来我们...
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模块化开发了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值