基于Vue全家桶开发的前端组件管理平台
项目背景
项目背景是外包类建站公司里，设计环节沉淀了大量可复用组件，设计师往往只需要微调组件就拼凑出页面，交付给前端，理论上这些组件在前端也可以复用，但实际上前端每次都要重新实现整个页面，浪费很多人力。
功能需求
这个项目的思路是，将所有组件开发出来，统一录入到一个平台上管理，设计师可以到平台上挑选组件，并实时预览和调整组件，整个过程所见即所得，平台会将调整结果生成一串代码，只要将代码交给前端，就可以用这串代码在平台上重现设计师修改后的组件，并能一键复制组件的html/css/js代码，快速应用到项目中去，使组件部分的前端开发成本接近于零。平台需要实现以下几个功能：
* 管理组件，支持分类、搜索、排序
* 展示组件，支持组件在线预览/编辑
* 组件交接，支持生成组件代码和基于代码重现组件
* 使用统计，支持统计组件的使用情况，便于进一步优化组件
技术栈
Vue+Vue-router+Vuex
项目预览
源码
基于Vue全家桶开发的前端组件管理平台的更多相关文章
- 基于 vue 全家桶的 spa 项目脚手架
项目简介 Github: https://github.com/hanan198501/vue-spa-template 我们基于 vue-cli 脚手架生成项目模板做了一些改造,加入了 vue-ro ...
- 基于vue全家桶制作的移动端音乐WebApp
Vue.js 2.0实战项目 基于Vue + Vuex + Vue-router + Webpack 2.0 打造移动端音乐WebAPP,实现了轮播图.音乐推荐.歌手列表.音乐搜索.注册等功能. 技术 ...
- 开源一套基于vue全家桶的webapp
一.设计初衷 原本今年就是有一个打算要做一套商业的作品,恰巧目前离职,在找工作的过程中,所以有时间闲下来沉淀对原本的知识进行梳理. 说一个题外话,就是由于博主之前是很早一批使用vue的用户,也就是距今 ...
- 基于Vue全家桶制作的的高仿美团APP
鸣谢:该项目核心部分参考了慕课网精英讲师ustbhuangyi的课程,其余部分高仿美团APP构建. 前端菜鸟项目,大佬们轻喷~ 美团外卖APP
- 基于 Vue 全家桶制作的移动端音乐 WebApp
- Vue全家桶开发笔记
state 中没有属性的情况下,新增属性不会触发mutations修改. 例: commit('change', { c: 3, d: 4, }); state: { test: { a: 1, b: ...
- 用 Vue 全家桶二次开发 V2EX 社区
一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...
- 使用vue全家桶制作博客网站
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...
- 转载： 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程
使用vue全家桶制作博客网站 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...
随机推荐
- iOS开发 - CocoaPods安装和使用教程
一.CocoaPods简介 1.什么是CocoaPods CocoaPods是iOS的包管理工具. 2.为什么要使用CocoaPods 在开发iOS项目时,经常会使用第三方开源库,手动引入流程复杂,并 ...
- javascript中的apply，call，bind详解
apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...
- fgets()函数以及fputs()函数
fgets() fgets() 该函数是一个文件操作相关的函数 暂时使用这个函数可以从键盘接收一个字符串,保存到字符数组中 原来接收字符串保存到数组中的方法: char str[50]; 1) sca ...
- 从Python小白到第一个小游戏发布
1.安装必要的环境(附图两张) 直接下载安装程序,本人win10系统,根据电脑系统下载并安装对应的python.exe,安装路径可以选择D盘的,具体安装细节这里就不说了,不知道的可以留言或者找度娘 2 ...
- hdu 1978 How many ways 记忆化搜索+DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1978 思路很好想: 定义f[i][j]表示从点(i,j)出发到达(n,m)的方法数: 那么对于一切从( ...
- Java学习笔记——封装、继承和多态
先说说封装: 用new 一条狗来举个例子: public class Dog { //私有化字段 private String name; private int age; //无参构造 Dog(){ ...
- JSP页面的静态包含和动态包含
JSP中有两种包含:静态包含:<%@include file="被包含页面"%>和动态包含:<jsp:include page="被包含页面" ...
- mongodb新人扫盲
前言 数据库基本命令 集合(表)命令 增加数据 删除数据 更新数据 使用update()更新 使用save()命令实现upsert 自动更新信息 查询数据 mongoose的使用 前言 mongodb ...
- VR的发展历程-VR全景智慧城市
从1962年有第一台VR开始,到2014年Oculus被Facebook收购为止,VR经历了一个非常漫长的过程.从鲜为人知,到被广泛认识,逐渐走进我们生活.这就是VR形成的时代.在这个时代里,VR设备 ...
- struts2.1.6教程三、在Action获取Scope对象
引言:在前面的Action操作中,关键就是Action中的exectue方法,但是此方法并没有request.session.application等对象作为参数,自然就不能利用这些对象来操作.下面我 ...