项目背景

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

功能需求

这个项目的思路是，将所有组件开发出来，统一录入到一个平台上管理，设计师可以到平台上挑选组件，并实时预览和调整组件，整个过程所见即所得，平台会将调整结果生成一串代码，只要将代码交给前端，就可以用这串代码在平台上重现设计师修改后的组件，并能一键复制组件的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. Less与Sass

    less 1.变量    声明变量:@变量名:变量值 使用变量:@变量名 >>>Less中变量的类型 ①数字类:1 100px ②字符串:无引号字符串[red] 有引号字符串[&qu ...

  2. PHP 无限级分类(递归)

    网上有很多,这是我自己做测试用的$arr = array( array('id'=>1,'name'=>'电脑','pid'=>0), array('id'=>2,'name' ...

  3. ⑤JS返回格式化的当前时间和上周时间

    首先对时间进行格式化 返回上周时间和当前时间

  4. [刷题]Codeforces 785D - Anton and School - 2

    Description As you probably know, Anton goes to school. One of the school subjects that Anton studie ...

  5. git笔记--git@OSC

    之前安装了git,用了不久就升级系统了,发现又忘记了步骤,虽然网上有很多教程,但寻找需要浪费太多的时间,由于github连接比较慢,所以使用了开源中国的托管http://git.oschina.net ...

  6. （jquery+ajax）省市区三级联动（封装和不封装两种方式）-----2017-05-14

    首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...

  7. 建造者(Builder)模式

    建造者模式是对象的创建模式.建造模式可以将一个产品的内部表象(internal representation)与产品的生产过程分割开来,从而可以使一个建造过程生成具有不同的内部表象的产品对象. 产品的 ...

  8. STM 8s 外部中断寄存器无法写入

    虽然说单片机开发就是对手册的研究,但是开发过程中,还是要做些笔记的,方便以后注意那些坑. 工作要求所以接触了一下STM328s00f3这个芯片,配置外部中断的时候遇到了一点问题 PS:IAR这个开发软 ...

  9. GreenDao 使用二

    1.创建一个实体类 1 Entity note = schema.addEntity("Note"); 默认表名就是类名,也可以自定义表名 1.dao.setTableName(& ...

  10. php jquery+ajax写批量删除

      为了美观,我还是引入了bootstrap的模态框,我引入的是自己的数据库 library中的一张表 名为:maninfo表 是一张个人信息表  表的加载我就不写了,比较简单,  大概写一下需要的按 ...