创建自己项目的组件API

为了方便工作协作开发以及团队新成员快速熟悉项目.搭建自己项目组件的API是很有必要的.

我之前是通过用单页形式来实现,老大说推荐的json形式更简单点。

文件结构:

• routers.js

import navs from './nav.config.js';const output = [  {    path: '/demo', name: 'demo',    component: resolve => require(['./index.vue'], resolve),    meta: { noCheckSession: true },    children: []  }];let children = [];_.forEach(navs, (group)=>{  _.forEach(group.items, (item)=>{    children.push({      path: `${item.component}`,      name: `demo-${item.component}`,      meta: { noCheckSession: true },      component: resolve => require([`./${group.group}/${item.component}.md`], resolve)    })  })});output[0].children = children;export default output;

• nav.config.js demo组件库的路由

const navs = [  {    "title": "组件",    "group": "components",    "items": [      { "component": "select", "label":"选择框"},      { "component": "button", "label":"按钮"},      {"component": "checkbox", "label": "单选框"},      {"component": "cardlist", "label": "卡片"},      {"component": "collapse", "label": "折叠面板"},      {"component": "commobox", "label": "下拉菜单"},         ......省略       // 以后谁写了新的组件,自己按照上面格式进行添加上去.         ]  }];export default navs;

• index.vue 内容展示

<template lang="html">  <div class="demo-page">    <div class="content">      <div class="sidebar">        <div class="group" v-for="nav in navs">          <div class="title">{{ nav.title }}</div>          <ul class="navs">              <router-link class="nav-item" v-for="item in nav.items" tag="li" :to="{name: `demo-${item.component}`}">{{ item.label }} <span class="nav-item__sub">{{item.component}}</span> </router-link>            <!-- </li> -->          </ul>        </div>      </div>      <div class="markdown-body">          <router-view></router-view>      </div>    </div>  </div></template><script>import navs from './nav.config.js';import 'highlight.js/styles/github.css';export default {  data(){    return {      navs: navs    }  },  mounted(){  },  methods: {    click(component){      this.$router.push({name: `demo-${component}` })    }  }}</script><style lang="scss">.demo-page{  width: 100%;  height: 100%;  background-color: #f3f3f3;  padding: 10px 20px;  .content{    display: flex;    padding: 10px 20px 10px 0px;    border-radius: 10px;    background-color: #fff;    .sidebar{      width: 180px;      margin-right: 20px;      border-right: 1px solid #f3f3f3;      .group{        .title{          font-size: 16px;          color: #5e6d82;          line-height: 40px;          height: 40px;          margin: 0;          padding: 0;          padding-left: 10px;          text-decoration: none;          display: block;          transition: all .2s ease-in-out;        }        .navs .nav-item{          display: block;          list-style: none;          outline: 0;          height: 30px;          line-height: 30px;          font-size: 13px;          color: #5e6d82;          margin: 0;          padding: 0;          padding-left: 20px;          text-decoration: none;          transition: color,background-color .2s ease-in-out;          cursor: pointer;          .nav-item__sub{            font-size: 12px;            color: lighten(#5e6d82, 20%);          }          // border-right: 0 solid transpaarent;          &:hover{            color: #20a0ff;            background-color: #f3f3f3;          }          &.router-link-active{            color: #39f;            border-right: 2px solid #39f;          }        }      }    }    .markdown-body{      width: 100%;      padding: 10px;    }  }}</style>

• components文件夹:存放你组件的markdown文件

markdown内容可以参考iview/elemnet ui这种,记录组件使用的demo,props,methods.事件等