项目背景

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

功能需求

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

    一.简介 迁移(Migrations)是一种数据库的版本控制.可以让团队在修改数据库结构的同时,保持彼此的进度一致.迁移通常会和 结构生成器 一起使用,可以简单的管理数据库结构. 下面以创建学生表的迁 ...

  2. SQL中LEFT JOIN 和 inner join 的区别

    student表 sc 表 首先where条件a.Sid = b.Sid 查询 SELECT * FROM student a,sc b WHERE a.Sid = b.Sid GROUP BY a. ...

  3. Spring+SpringMVC+MyBatis+easyUI整合优化篇（十四）谈谈写博客的原因和项目优化

    阶段总结 又到了优化篇的收尾阶段了,这其实是一篇阶段总结性的文章,今天是4月29号,距离第一次发布博客已经两个月零5天,这两个多月的时间,完成了第一个项目ssm-demo的更新,过程中也写了33篇博客 ...

  4. .net 程序集

    前言:用了几天的时间把高级编程里面程序集一章看完了,原来自己只知道写代码,右键添加引用,从来也不知道操作的实质是什么,微软总是这个套路,鼠标点点就能把任务完成,这对新手友好但是对要通透了解程序执行和内 ...

  5. 腾讯ISUX网页前端代码分析

    看了一下腾讯ISUX网页,无论是pc端还是移动端,展示都挺好看的,先对其代码进行分析如下: 1,先看前三行代码 <!DOCTYPE html> <!-- 腾讯 ISUX 是腾讯集团核 ...

  6. 使用openXML 不用插件导出excel

    注释很详细,不做解释了,有疑问可以提问 using System.IO; using System.Text; namespace iLIS.Common { /// <summary> ...

  7. Android 6.0的权限问题

    Android 6.0的权限获取不同于别的版本,具体的实例如下: if (ContextCompat.checkSelfPermission(this, Manifest.permission.REA ...

  8. [刷题]算法竞赛入门经典(第2版) 4-3/UVa220 - Othello

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,0 ms) //UVa 220 - Othello #include<iostream ...

  9. UML学习笔记之类之间的关系

    1.    导航关系(Directed Association) A类有一个成员变量保存B的引用. 2.包含关系(Aggregation.Composition) (1)弱包含 含义:每个部门包含多个 ...

  10. Docker4Windows -- 从外部（非本机host）访问 由docker container运行的程序

    背景 当我们在windows 上面运行docker container的时候,我们需要借助于模拟器(例如,Virtual box/Hyper V),她的目的主要是在我们的windows系统上面模拟出一 ...