【重磅】【vue底部栏】自己封装组件！并且上传到npm！

具体怎么做的。。。我觉得也没啥用。。。 反正都做完了。。  所以本文的目录是。。

 艰难又艰难的上传之路 ---> 我写的源代码 ---> 做的步骤 

首先，感谢这些链接。

1 https://www.cnblogs.com/yalong/p/10388384.html （全程 如何上传npm，基本就是按照这个来的）

2 代码来源（……嗯…… ）https://juejin.im/post/5c4f0e28f265da61616f0e51

3 https://www.cnblogs.com/max-tlp/p/9338855.html 对比参照 没啥大用

最后成果 https://www.npmjs.com/package/simple-footerbar

 是按照 1 的链接来的。但是它里面有几个不对

1、npm run build  【dist】 把这个dist去掉

因为是新建目录吧，但是其实用完已经有目录了。狂报错不止。。。

2、修改自己的npm那个包 修改后需要 重新加 版本号。

然后 需要先bulid 再npm publish。。。 不然 你传上去也没用（大概和js那个有关）

这个 可以在自己实际用的时候  项目 module  里面看看  我当时是把路由注释掉了（因为总是报错）发现重新传了之后 取消注释了  module里还是注释状态 遂发现需要重新bulid  脑子啊。。

3、传到npm的时候先看看有没有这个名字。

新的账号要验证邮箱qwq  其他的那个教程里都有了。。 

看起来倒是高大上。。。。 可怜的我  呗报错折腾。。。

4、名字统一一下，

不然会乱的  除了import 是大小写 其他都 - -  就可以解决

5、上传要新的index.js

关于npm 的介绍 https://www.jianshu.com/p/4c009867060a 这个链接也写的很好。很全。。 https://www.jianshu.com/p/0af552a9a4c6 这个我没怎么看

其他上传未尽事宜（同步自为知笔记）

新建了文件夹，写入这两个文件。哦！好像是这样子的哦！！！！！要自己有自己的index.js ，我仿佛还记得我远古时期学过，只是忘了qwq。。

然后呢，它好像坏掉了，根本不能看？

发现： 1 竟然是依赖app.vue里面原来的text-align:center 才使得它居中的 不然格式也会乱

2 为什么四个的时候图片不能显示了呢（原来是我写错了

3 路由是不是需要自己装鸭，不然会报错不能进行，，，，注释掉那句话感觉还行

4 为什么！！！！老子好好的适配性怎么忽然就给搞坏了！！！！！！vh vw呢！！！！

我知道了。。 因为我没用icon  坑好多啊5555   icon那个设置了，img忘记设置了。。。  所以会那么小qwq，那我设置一下吧  好了。。。 5vh   简单qwq  但是bug需要发现。。。

5 这样再来用  这个时候是index.js  就是我们组建对应的那个index.js    我们来看一下8  ! qwq 

那再分几个小点吧  小小的梳理一下 1 index.js 2 webpack.confg.js  3 package.jason

(1)好的针对这个index.js 我专门找了几种其他的方法，官方文档还是看不太懂，这样的话可以直接标签引入，好像不需要再Vue.Use(显示引用) 了   [上帝视角： 我也不知道  但是 标签不标签 没关系啊qwq 不用全局的  两者都行吧只能说 ]

import simpleFooterbar from './footerbar';

//判断是否有window对象( 如果是vue.min.js的话, 是不行的)

if (typeof window !== 'undefined' && window.Vue) {

    window.Vue.component('simple-footerbar', simpleFooterbar)

}

//全局安装

simpleFooterbar.install = function(Vue){

    Vue.component(simpleFooterbar.name, simpleFooterbar)

}

export default simpleFooterbar;

(2) 先修改一下private字段

然后又增加了一个main字段... 原来这个是接线的呀qwq  里面好多描述啊什么的都也可以看到~

emmmm...  果然 ，我的感觉没有错，很蠢但是我们应该写成这样的名字qaq。。

(3)  webpack这个.. 

这里要改entry和output。 

名字给我统一一下，全部叫simple-footerbar。。  什么大小写，除了自己定义变量大小写，其他都不是啊

代码

先放目录

然后  footerbar.vue

<template>
  <div class="footer">
    <div
      class="bar"
      v-for="(item,index) in items"
      :key="index"
      :class="[{on:selected_id===index}]"
      @click="change(item,index)"
    >
      <i v-show="showIcons" :class="item.icon" />
      <img :src="index===selected_id?item.src_selected:item.src_unselected" v-show="!showIcons" />
      <span class="text">{{item.name}}</span>
    </div>
  </div>
</template>

<script>
export default {
    name:'simple-footerbar',
    props:{
        items:{
            type:Array,
            default:function(){
                return ([{
                    name:'选项1',
                    push:"/shouye1",
                    icon:'iconfont icon-shouye',
                    src_selected:'static/合同-选中.png',
                    src_unselected:'static/合同-未选.png',
                },
                {
                    name:'选项2',
                    push:"/shouye2",
                    icon:'iconfont icon-shouye',
                    src_selected:'static/合同-选中.png',
                    src_unselected:'static/合同-未选.png',
                },
                {
                    name:'选项3',
                    push:"/shouye3",
                    icon:'iconfont icon-shouye',
                    src_selected:'static/合同-选中.png',
                    src_unselected:'static/合同-未选.png',
                }])
            }
        },
        showIcons:{ // 选项 使用阿里云的库还是自己定义的图片 默认还是自己定义的图片 
            type:Boolean,
            default:false,
        },
        selected_id:{
            default:0,
            type:Number,
        },
    },
    methods:{
        change(item,index){
            this.$router.push(item.push);
            this.$emit('change',index);
        }
    },
}
</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;
  display: flex;
  background: #fffff0;
  overflow: hidden;
  box-sizing: border-box;
  color: #bebebe;
  position: fixed;
  left: 0;
  bottom: 0;
}
.bar {
  flex: 1;
}
.text {
  display: block;
  font-size: 2.5vh;
}
.on {
  color: rgb(25, 137, 250);
  background: #DDDDDD;
}
i {
  font-size: 5vh;
}
img {
  width: 5vh;
  height: 5vh;
}

</style>

App.vue

<template>
  <div id="footer">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1506652_gu6ynvavag7.css" >
    <footer-barnpm 
      :items='itemsssss'
      :showIcons='showIcons'
      :selected_id='selected_id'
      @change="changeeee"
    >
    </footer-barnpm>
  </div>
</template>

<script>
import FooterBarnpm from "./plugin/footerbar";
export default {
  components: {
    FooterBarnpm
  },
  data(){
    return{
      selected_id:0,
      showIcons:false, //这里其实也可以不传.
      itemsssss: [
        {
          name:'首页',
          push:"/shouye1",
          icon:'iconfont icon-shouye',
          src_selected:require('./assets/首页-选中.png'),
          src_unselected:require('./assets/首页-未选.png'),
         },
        {
          name:'首页',
          push:"/shouye2",
          icon:'iconfont icon-shouye',
          src_selected: require('./assets/首页-选中.png'),
          src_unselected:require('./assets/首页-未选.png'),
        },
        {
          name:'首页',
          push:"/shouye3",
          icon:'iconfont icon-shouye',
          src_selected:require('./assets/首页-选中.png'),
          src_unselected:require('./assets/首页-未选.png'),
        },
        {
          name:'首页',
          push:"/shouye4",
          icon:'iconfont icon-shouye',
          src_selected:require('./assets/首页-选中.png'),
          src_unselected:require('./assets/首页-未选.png'),
        },
      ],
    }
  },
  methods:{
    changeeee(index){
      this.selected_id=index;// selectid赋值了 然后同步给子组件那边qwq
    }
    // 这个index是多少呢....
    // 是里面点击之后向外传递出来的 
    // 这个只是对接了  $emit里面的那句话罢了...  
    // 具体的参数还是要写的 怎么可以不写呢~
  }
};
</script>
<style>
</style>

index.js

import simpleFooterbar from './footerbar';

//判断是否有window对象( 如果是vue.min.js的话, 是不行的)
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.component('simple-footerbar', simpleFooterbar)
}
//全局安装
simpleFooterbar.install = function(Vue){
    Vue.component(simpleFooterbar.name, simpleFooterbar)
}
export default simpleFooterbar

好了！下面是写代码过程 

高度10vh，上下0.5的边距

宽度100vw。左右2vw的边距

记录

1 让它在底部，并且固定

现在是body relative  然后子组件 absolute bottom:0

2 width是相对于父级的（所以可以大胆25%了？qwq

3 插槽写是写了个。。。 但是 咋用。。 （我只会文字哎qwq）---> 可以用,更新到博客去了

4 【能不能到时候在外面用的时候直接】

【外部来给url和文字？】

那么，v-for我们先别管，先让它可以实现吧。。。 先给他实现！---> 好了  实现了... 

5  预计  有什么是需要从外部得到的：(数组)

'首页' 这个名字

图片(选完, 选前) 

【事实证明， 我不太会搞这个多组数据。。我甚至不会搞这个props数据，，。。。所以理论是没用的  show me the code qwq

---> 参考网页  https://blog.csdn.net/hua_ban_yu/article/details/80263911

还是要show me the code啊 ...  这个item里面连得可不只是个text  下面的父组件的arr里面可以放name   id  sex  什么的  就是个对象的名字它不是简单的item一个单数据  

下面这个使用方法好像不太行。。我也不知道为什么 反正就是不太行

好的 大概是错的

vue父作用域将数据传到子组件通过props进行传参，如果需要传多个参数可以数组形式赋值给props，通过这样子组件就可以获取父组件传体过来的多个参数了。

<div id="app">

 <ul >

  <todo-item v-for="(item,index) in arr" v-bind:todo="item" v-bind:index="index"></todo-item>

 </ul>

</div>

--------------------------- 上面是子组件，， ，， 你动动脑子啊， 这个显然是不能直接用的啊，你接收到的是数组，没错，那么数组没有index 怎么获取到是哪一个呢  我们接收到的时候直接v-for一个一个绑定，然后在template里展示，这样是可以绑定的---------------------------

<script type="text/javascript" src="js/vue.js" ></script>

<script>

       Vue.component("todo-item",{

     props:['todo','index'],

  template:"<li>{{index}}:{{todo.text}}</li>" 

 })

 var app = new Vue({

      el:"#app",

     data:{

  arr: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ]

  }

 })

</script>

----------------------------------------------------------------------

行8 那现在

1 学一下阿里的icon图标库？

怪不得我觉得项目copy进来点点点都可以 但是在线链接怎么换都不管用 原来虽然default是true 但是实际用到的时候那边是false传过来， 然后组件图标库我没有下载然后就更改了qwq

2  emmmm。。。 所以说，成功了耶qwq

【媒体查询】进进博客

媒体查询是放到css里的！font-size两个不同的话可能实在不好设置。。。

3 【flex布局】

还是啊。。外围 外围设置好了宽度高度大小，，里面 只要display：flex，就好了，会自动分布好布局，其他的会自己围绕上来。qwq~直接自己平分了，你懂吧

好的。

4 字体太靠下，【取消了padding，直接<i> 这样其实还可以啊 ，，不然就要为了开margin 来

 

5 需要统一一下颜色，

6 这里是item in items

7 【for record】-----------------------------  上面的都可以啦，下面的还没整理==========================================================================================================================================================================

2 

最开始，

 我隐约感觉这个id好像并不用父组件传过来啊。。。。 

父组件不用传id，只要传个push过来一起解决了可以吗

然后呐，data里每个都要return一个新的，那好像四个id是不同的，那么。。。 那么是没法保存你点击了哪个的对吧，好像放在父组件里存储一下的话，也很稳妥qwq

这是我的感觉，等下可以试验一下，如没有id会怎么样。

好了我觉得不用试验了，，，四个数据你搞毛线呢哦。。。。

3

  这里注意数据赋值是要冒号啊。。。

data(){

        return{

            selectid：0，

        }

    },

整个完了，bar和footerbar整个代码放上去。。。

4 

props:{

            idx: {

                type: Number,

                default: 0,

            },

这里也要注意， 你想获取idx的参数，那么你的分号是写在这个idx的后面的，，，，，，，，

它和data里一个数据对象那种不同。。。

5 直接比较id和index吧 qwq

那么是从0 开始的……

=======================上面都是在子组件的所作所为

6 这个链接，只放在父组件就可以。因为子组件是相当于把父组件传递过来用的，所以，完全，ok子组件不认得，打但是它代码在那里的

<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1506652_gu6ynvavag7.css" >

这个就是我图标库的在线链接哈哈哈哈 

7 父组件我们只要傻瓜式的在data里面定义好数据return出去，然后给子组件绑定起来就好啦。

 是这样绑定的：

        <v-navbar 

            :items="items" 

            :showIconOrSrc="showIconOrSrc" 

            :idx="idx" 

            @change="change">

        </v-navbar>

showiconsor src可以不写。。。因为有default的值呀qwq

这里注意哦，

引号后面这个是我们给出去的数据，按照常规右边等于左边呀，所以你懂了吧，给了左边是子组件的数据，右边是父组件的。

8 整体上这样差不多走了一遍，两边的数据能打通我就觉得比较ok 了吧 qwq  但是关键还是需要自己写下过。。

9 我他妈！！！！！！！！！！！！！！！！！

原来除了display flex（大的）

还有个叫flex 1  这个是不一样的

flex 1  才是大家一起平分 这个相当于Android里面那个weight啊

搜了一下教程，表示看不懂。。。 好的吧，经过实践，的确是那个weight的用法，直接平分。至于为什么直接写的时候没起作用呢？

因为你多写了个div嵌套，这样你外围的不是100%，怎么能平分呢，要么让外围div也flex：1（实际上就是 withd 100%)  要么.. 啊算了没要么

css代码写的剪短又清晰真是赏心悦目呀

10  只要加上这个<span> 改为display: block  就能顺利解决qwq  为什么呢。。。。。不懂 但是效果还挺好看的 只要用font-size再去限制一下就好了

11 

还要再加一个底部，最后切换，所以说发之前这些废话可以检查一下然后扔掉。。。

12 我收了一个对象

        items:{

            type:Array,

        },

这就好啦？？？？一堆{} {} {} 的这么些都给传进来了 里面还有不同的不同组的数据  神奇

13 要注意的事情还真的很多啊

这个不是click啊  changeeee是父组件里面的数据.. 上面三个都是把值给子组件 只有最后这个是接受到吧... 

它只是把子组件的数据传给了父组件 不是click  click我仿佛还记得是接收不到的...  只能接受一个回调(因为不是,native原生方法了所以接不到.... ?不知道qwq

14 我的log调试 还蛮虫咬的

果然现在发现   后面这个东东 是undefined 所以没有

  this.selected_id=this.index;// selectid赋值了 然后同步给子组件那边qwq

 然后一路追踪，追踪，追踪，发现在子组件的时候就是undefined

那传个啥哦！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

然后本来我们要去搜解决方案然后各种倒霉各种惨了，但是其实不用啊，因为我们有----   原来的版本

这说明了初期的模仿是多么的重要啊

我就抱着这种“人家都没错 那我肯定只是犯了个小错误" 的思想

果然找到了.....  

changeeee(index){

      console.log('父组件也来了');

      console.log(this.selected_id);

      console.log(this.index);

      this.selected_id=index;// selectid赋值了 然后同步给子组件那边qwq

    }

传递进来的是index，就不需要加this。加了this，马上找不到了。

笑死，一堆undefined搞来搞去，最后还是undefined，你只要把this去掉就好了。。。。 所以说看清qwq  传进来的参数不需要加this，（在函数里不需要加this），如果是自身自己的数据，需要加this

啊。好像只有在函数里面获取自身data这一种情况的时候需要加this。。。发现<template>里面写也不加this

15 太好笑了hhh  这个 iconfont 有点厉害... 直接把颜色一起改了(难怪那么和谐hhhh)  不用自己再去下载颜色相同的图标了。神奇！太棒了，学到很多，下次自己写可能还是不会

16 我不是没定义路由吗 怎么还能直接push进去啊hhhh  就是里面没有东西qwq  大概router就是去给做了一个映射8 

17 放在底部固定: 

position fixed   left和bottom 设置为0 

18 我们设置个default 原来default要这么写qwq

 不写default果然是不行的qwq

19 说明一下 如果直接<footer-bar>引入这么一个 那么不能点击 只能看个样儿 

但是吧还是就是  我们还是写了defalut有那么三排qwq  啊我实在默认的话链接不到点击事件呀

20  好了 我觉得基本可以了耶

21  还是写一下webpack simple吧?

先给我webpack simple ,复制一下

然后上传到npm 到时候看看人家上传的时候都怎么上传的

写博客的话最后整个代码放一下【代码才是重点！】  

接受lifeqwq

贴吧才应该是垃圾场存放地，，，，笑死

封装 我认为是APP。vue 那里只要写一句 《footer-bar》 然后底部实现我们给在那个bar npm里面写

gitlab给指定人员设定权限  找到左边的member添加