项目背景

项目背景是外包类建站公司里，设计环节沉淀了大量可复用组件，设计师往往只需要微调组件就拼凑出页面，交付给前端，理论上这些组件在前端也可以复用，但实际上前端每次都要重新实现整个页面，浪费很多人力。

功能需求

这个项目的思路是，将所有组件开发出来，统一录入到一个平台上管理，设计师可以到平台上挑选组件，并实时预览和调整组件，整个过程所见即所得，平台会将调整结果生成一串代码，只要将代码交给前端，就可以用这串代码在平台上重现设计师修改后的组件，并能一键复制组件的html/css/js代码，快速应用到项目中去，使组件部分的前端开发成本接近于零。平台需要实现以下几个功能：

* 管理组件，支持分类、搜索、排序

* 展示组件，支持组件在线预览/编辑

* 组件交接，支持生成组件代码和基于代码重现组件

* 使用统计，支持统计组件的使用情况，便于进一步优化组件

技术栈

Vue+Vue-router+Vuex

项目预览

前端组件管理平台

源码

Github

基于Vue全家桶开发的前端组件管理平台的更多相关文章

  1. 基于 vue 全家桶的 spa 项目脚手架

    项目简介 Github: https://github.com/hanan198501/vue-spa-template 我们基于 vue-cli 脚手架生成项目模板做了一些改造,加入了 vue-ro ...

  2. 基于vue全家桶制作的移动端音乐WebApp

    Vue.js 2.0实战项目 基于Vue + Vuex + Vue-router + Webpack 2.0 打造移动端音乐WebAPP,实现了轮播图.音乐推荐.歌手列表.音乐搜索.注册等功能. 技术 ...

  3. 开源一套基于vue全家桶的webapp

    一.设计初衷 原本今年就是有一个打算要做一套商业的作品,恰巧目前离职,在找工作的过程中,所以有时间闲下来沉淀对原本的知识进行梳理. 说一个题外话,就是由于博主之前是很早一批使用vue的用户,也就是距今 ...

  4. 基于Vue全家桶制作的的高仿美团APP

    鸣谢:该项目核心部分参考了慕课网精英讲师ustbhuangyi的课程,其余部分高仿美团APP构建. 前端菜鸟项目,大佬们轻喷~ 美团外卖APP

  5. 基于 Vue 全家桶制作的移动端音乐 WebApp

  6. Vue全家桶开发笔记

    state 中没有属性的情况下,新增属性不会触发mutations修改. 例: commit('change', { c: 3, d: 4, }); state: { test: { a: 1, b: ...

  7. 用 Vue 全家桶二次开发 V2EX 社区

    一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...

  8. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...

  9. 转载： 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

    使用vue全家桶制作博客网站   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...

随机推荐

  1. WPF 杂谈——资源文件

    编写一个应用难免要用到WPF本身的控件.不管是WinForm还是网页都会有自己的控件.只是在写法和用法上有所不同而以.而控件命名却离不开那几个单词.所以不用担心判断不出来哪个是按扭,哪个是文本框.举个 ...

  2. fileInput实战总结

    fileinput组件实战总结 fileinput是一个增强的基于Bootstrap3.x和HTML5的文件上传工具,具备多种格式文件的预览功能, 另外,它包含了基于AJAX的上传,拖拽和撤销文件,可 ...

  3. 关于获取URL中传值的解决方法

    在我们页面的URL中包含着很多信息,包括域名,协议等等这里就不一一介绍了),对于我们开发者而言,使用比较多的就是页面之间的传值.为什么要页面传值呢?很简单,当你在浏览一个商品页面的时候你要看到一个商品 ...

  4. linux 内核的futex

    futex是linux内核为用户空间实现锁等同步机制而设计的同步排队(队列queueing)服务.在futex.c的注释中,futex起源于"Fast Userspace Mutex&quo ...

  5. php web开发安全之csrf攻击的简单演示和防范（一）

    csrf攻击,即cross site request forgery跨站(域名)请求伪造,这里的forgery就是伪造的意思.网上有很多关于csrf的介绍,比如一位前辈的文章浅谈CSRF攻击方式,参考 ...

  6. Oracle树形结构查询之prior的理解

    --1 建表 create table 宇宙( 行星等级 number ,行星名称 varchar2(50) ,上级行星等级 number); --2 数据准备 insert into 宇宙 (行星等 ...

  7. weiphp的学习

    ##2015-07-27 **token 一定要加 不然在lists页面无法显示** ##2015-07-20 1. 自定义回复里面添加 微现场 跳转url OAuth2.0网页授权演示      & ...

  8. SpringMVC中的@Controller和@RequestMapping到底什么鬼？

    1.1 @Controller是什么 首先看个例子: @Controller @RequestMapping("/blog") public class BlogControlle ...

  9. xpo-4大类

      Xpo (XPBaseObject.XPLiteObject.XPCustomObject.XPObject) 类名 延后删除 是否乐观锁定 提供OID字段 XPBaseObject 不支持 支持 ...

  10. .nomedia文件的作用

    .nomedia文件的作用:应用中的图片不被系统图库扫描. 一般开发的应用中会缓存一些图片到本地,不想让系统图库扫描到应用的图片或者不想对用户浏览图片造成影响. .nomedia文件放在任何一个文件夹 ...