项目背景

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

功能需求

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

    重装系统是工作和生活中经常需要做的事情,作为一名开发人员,学会该技能你才是一名合格的程序猿!以后再也不会遇到"程旭元你会装系统吗?"的尴尬了!本文主要介绍怎样通过U盘启动重新安装 ...

  2. 页面性能优化的利器 — Timeline

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 陈泽钦,腾讯移动客户端工程师,目前就职于腾讯MIG移动互联网事业群,负责腾讯浏览服务TBS的X5内核业务. 1 ...

  3. 解决 MySQL 分页数据错乱重复

    前言 一天,小明兴匆匆的在通讯工具上说:这边线上出现了个奇怪的问题,麻烦 DBA 大大鉴定下,执行语句 select xx from table_name wheere xxx order by 字段 ...

  4. glassfish PWC6351: In TLD scanning 系统找不到指定的文件问题解决

    [2017-04-25T21:26:09.391+0800] [glassfish 4.1] [WARNING] [] [org.apache.jasper.runtime.TldScanner] [ ...

  5. 跨域问题解决方案(HttpClient安全跨域 & jsonp跨域)

    1 错误场景 今天要把项目部署到外网的时候,出现了这样的问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 运行 都没有问题的, 一旦把我需要调用接口的项目B放到其他的服务器上, 就会 ...

  6. [转]ObjectARX二次开发vs编译器版本ARX版本对应说明

  7. MySQL对innodb某一个表进行移动

    (步骤:建表, 禁用表空间,复制表空间,重用表空间)   mysql> desc test; +-------+-------------+------+-----+---------+---- ...

  8. Android GreenDAO3.0——介绍

    引言 最近,学东西比较零散,各种知识混杂,于是记下学习记录,免得又忘了. 官方网址:http://greenrobot.org/greendao/documentation/introduction/ ...

  9. Js之on与addEventListener的使用与两者的不同

    Js之on和addEventListener的使用与不同 一.首先介绍两者的用法: 1.on的用法:以onclick为例 第一种: obj.onclick = function(){ //do som ...

  10. java虚拟机内存分配