vue component

# 克隆仓库
git clone https://github.com/hsian/vue-component.git

cd vue-component and npm install

yarn serve or npm run serve

-assets
	-css
-components
-docs
-pages
-template
-App.vue
-main.js
-nav.config.json
-router.config.js

{
"component": {
	"name": "组件",
	"path": "/component",
	"groups": [
		{
			"name": "基础组件",
			"list": [
				{
					"path": "/button",
					"title": "组件_button"
				}, 
				{
					"path": "/modal",
					"title": "组件_modal"
				}
			]
		}
	]
}

const load = function(path) {
  return r => require.ensure([], () =>
    r(require(`./pages${path}.vue`))
    );
};

const loadDocs = function(path) {
  return r => require.ensure([], () =>
    r(require(`./components${path}.vue`))
    );
};

const registerRoutes = function(){
	const routes = Object.keys(navs).map(key => {
		const nav = navs[key];
		let route = {
			path: nav.path,
			component: load(nav.path),
			children: []
		}
		if(nav.groups){
			nav.groups.forEach(group => {
				const list = group.list;

				list.forEach(item => {
					route.children.push({
						path: item.path.slice(1),
						component: loadDocs(item.path),
						meta: item.title
					})
				})
				
			})
		}
		return route;
	})
	return routes;
}

// component/index.js
import Button from "./button";
const components = [
	Button
]
const UI = {
	install: function(Vue){
		components.map(v => {
			Vue.component(v.name, v)
		})
	}
};
export default UI

// mian.js
Vue.use(UI);

inject: {
   	form: {
      default: ""
   	},
	formItem: {
      default: ""
   }
},

//template引用
<div class="hm-input-wrap" :data-action="action">

// 子组件监听行为变化
watch: {
	action: function(){
		if(this.action === "reset"){
			this.currentValue = "";
			this.iconType = "";
			this.iconClass = "";
		}
	}
}