StrongerIrene

【重磅】【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

App.vue

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，通过这样子组件就可以获取父组件传体过来的多个参数了。

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

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

行8 那现在

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

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

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

【媒体查询】进进博客

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

3 【flex布局】

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

好的。

4 字体太靠下，【取消了padding，直接 这样其实还可以啊，，不然就要为了开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子组件不认得，打但是它代码在那里的

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

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

是这样绑定的：


      :items="items"

      :showIconOrSrc="showIconOrSrc"

      :idx="idx"

      @change="change">



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 只要加上这个改为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。。。发现