新封装了顶部栏。有bug，引入很大问题，说明还没写

package.json

 {
   "name": "simple-footerbar",
   "description": "vue项目练习 footerbar底部导航栏",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "author": "wangruixin <wrx@33.cn>",
   "license": "MIT",
   "private": false,

src/App.vue

 <template>
   <div id="footer">
     <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1506652_gu6ynvavag7.css" >
+      <header-npm id="header_later">
+        <span slot='left'>返回</span>
+          顶部栏
+        <span slot='right'><img src="./assets/添加.png"/></span>
+      </header-npm>
     <footer-barnpm 
       :items='itemsssss'
       :showIcons='showIcons'
       :selected_id='selected_id'
-      @change="changeeee"
-    >
+      @change="changeeee">
     </footer-barnpm>
   </div>
 </template>
 
 <script>
-import FooterBarnpm from "./plugin/footerbar";
+import FooterBarnpm from "./footerbar/footerbar";
+import HeaderNpm from './header/header'
 export default {
   components: {
-    FooterBarnpm
+    FooterBarnpm,
+    HeaderNpm,
   },
   data(){
     return{
@@ -56,7 +62,7 @@ export default {
   methods:{
     changeeee(index){
       this.selected_id=index;// selectid赋值了 然后同步给子组件那边qwq
-    }
+    },
     // 这个index是多少呢....
     // 是里面点击之后向外传递出来的 
     // 这个只是对接了  $emit里面的那句话罢了...  
@@ -65,4 +71,15 @@ export default {
 };
 </script>
 <style>
+*{
+  margin:0;
+  padding: 0;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+#header_later{
+  background: RGB(96,192,255);
+  color:white;
+}
 </style>

src/plugin/footerbar.vue → src/footerbar/footerbar.vue

@@ -16,7 +16,7 @@
 
 <script>
 export default {
-    name:'simple-footerbar',
+    name:'rye-footerbar',
     props:{
         items:{
             type:Array,
@@ -63,14 +63,6 @@ export default {
 </script>
 
 <style scoped>
-*{
-  margin:0;
-  padding:0;
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-}
 .footer {
   width: 100%;
   height: 10vh;
@@ -82,6 +74,7 @@ export default {
   position: fixed;
   left: 0;
   bottom: 0;
+  text-align: center;
 }
 .bar {
   flex: 1;

src/plugin/index.js → src/footerbar/index.js

-import simpleFooterbar from './footerbar';
+import RyeFooterbar from './footerbar';
 
 //判断是否有window对象( 如果是vue.min.js的话, 是不行的)
 if (typeof window !== 'undefined' && window.Vue) {
-    window.Vue.component('simple-footerbar', simpleFooterbar)
+    window.Vue.component('rye-footerbar', RyeFooterbar)
 }
 //全局安装
-simpleFooterbar.install = function(Vue){
-    Vue.component(simpleFooterbar.name, simpleFooterbar)
+RyeFooterbar.install = function(Vue){
+    Vue.component(RyeFooterbar.name, RyeFooterbar)
 }
-export default simpleFooterbar
\ No newline at end of file
+export default RyeFooterbar
\ No newline at end of file

src/header/header.vue

+<template>
+  <div class="header">
+    <div class="header_div">
+      <span id="left">
+        <slot name="left"></slot>
+      </span>
+      <slot>欢迎使用header!</slot>
+      <span id="right">
+        <slot name="right"></slot>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "rye-header"
+};
+</script>
+<style scoped>
+.header {
+  width: 100%;
+  height: 10vh;
+  background: rgb(110, 112, 240);
+  font-size: 3.8vh;
+  text-align: center;
+  vertical-align: center;
+  position: relative;
+}
+.header_div {
+  line-height: 10vh;
+}
+#left {
+  float: left;
+  margin-left: 5vw;
+  color: white;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+#right {
+  float: right;
+  margin-right: 5vw;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+img {
+  margin-top: 2.5vh;
+  padding: 10px, 10px;
+  width: 5vh;
+  height: 5vh;
+}
+</style>

src/header/index.js

+import RyeHeader from './heaader';
+
+//判断是否有window对象( 如果是vue.min.js的话, 是不行的)
+if (typeof window !== 'undefined' && window.Vue) {
+    window.Vue.component('rye-header', RyeHeader)
+}
+//全局安装
+RyeHeader.install = function(Vue){
+    Vue.component(RyeHeader.name, RyeHeader)
+}
+export default RyeHeader
\ No newline at end of file

src/index.js

+import RyeHeader from './header/index.js'
+import RyeFooterbar from './footerbar/index.js'
+
+const components = [
+    RyeFooterbar,
+    RyeHeader,
+]
+
+const install = function(Vue, opts = {}) {
+  components.map(component => {
+    Vue.component(component.name, component);
+  })
+}
+
+/* 支持使用标签的方式引入 */
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+export default {
+    install,
+    RyeFooterbar,
+    RyeHeader,
+}

webpack.config.js

@@ -4,7 +4,7 @@ const NODE_ENV = process.env.NODE_ENV
 
 module.exports = {
   //entry: './src/main.js',
-  entry: NODE_ENV == 'development' ? './src/main.js': './src/plugin/index.js',
+  entry: NODE_ENV == 'development' ? './src/main.js': './src/index.js',
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: '/dist/',