ComponentTemplate

这是一个展示常用组件的项目:

Tree

componentTemplate
├── App.vue
├── Readme.md  项目文档
├── component  组件文件夹
│   ├── common 公共组件
│   │   └── boxFrame.vue
│   ├── img 组件引用的图片
│   │   └── tiaowen1.png
│   ├── module 模块组件(module主路由的子路由)
│   │   ├── test.vue
│   │   └── test1.vue
│   └── unit  基础组件
│       └── processBar.vue
├── config.js
├── index.html
├── main.js
├── module.md  模块组件文档
├── package.json  导出组件json
├── packages
│   └── index.js  导出组件(用于发布npm包)
├── router  路由文件夹
│   ├── index.js 路由
│   └── util.js  路由工具库
├── static       静态文件
│   └── image
│       ├── duizi.png
│       ├── fold2zhedie.png
│       ├── foldzhedie.png
│       └── zd.png 
├── unit.md  基础组件稳定 
└── views
    ├── module.vue 模块组件页
    └── unit.vue   基础组件页

安装

cnpm install mdd_component

使用

//main.js

import mddComponent from 'mdd_component'
import 'mdd_component/dist/index.css'
Vue.use(mddComponent)

基础组件

在component/unit文件夹封装好往基础组件往views/unit.vue添加即可

 <!--      基础展示组件用boxFrame包裹-->
<boxFrame :template="(`<processBar :subTaskList=></processBar>`)">
    <processBar :subTaskList="subTaskList"></processBar>
</boxFrame>

• boxFrame是一个包裹装饰框
• template传递的是一个封装好的标签字符串,点击复制

模块组件

• 在component/module文件夹封装好
• 在router/index.js添加子路由即可

// 模块组件
const Test = () => import('@module/test.vue');


//子路由
const test = getModel('/test', Test, '例子', {title: '模块例子'}, `<fixLoading :apiLoading="apiLoading"></fixLoading>`)


//子路由集合
const children = [
  test,
]

• <fixLoading :apiLoading="apiLoading">template示例</fixLoading>用于点击模块组件复制标签