前端小白从0到1搭建vue ui库(PC端)第1.5步 番外

431 阅读3分钟

为什么要写这个番外呢?额,其实是上一篇忘记先把项目弄到github和大概说一下开发组件必要的几个vue知识,所以在这一篇先补上

把本地项目上传到github上

这里有两种方法,我找到的,第一种是先在github上面建好项目再拉下来,第二种是本地已经建好项目,远程连接github仓库提交,我是从其他地方找到两个方法的。

我自己是用第二种方法的,因为我本地是没有.ssh的,所以我在生成的时候看不懂,所以找到了这篇文章

为什么要弄到github上面呢,主要是为什么之后写的时候可以直接给github地址让大家看代码,这样我就不用全部代码都贴上来(当然,可能这几篇文章连看都没有人看)

几个必须要知道的vue知识点(这里先大概说一下,以后用到在结合实例看比较好)

什么是组件(我自己的理解)

简单来说,就是可以复用的轮子,我只需要一个.vue文件去创建好这个轮子,以后其他页面如果需要用到,我就可以直接去引用而不需要再写一次代码,这样可以大大减少工作量。这也说明组件的一个特点或者缺点,通用性,组件内部很难去实现太多个性化的东西,组件适合去构建一个基本的页面,个性化的东西还是单独写比较好,你永远不知道甲方的奇葩想法。而且,组件不单单指按钮,多选框这种类型。你可以按照自己工作需要去封装,例如一个社区的帖子页面也可以写成一个帖子组件等。

组件的props

不同的页面可以用同一个组件,但是他们需要的参数又不一样,怎么办?这样要说组件的props属性,他可以接受父级传入的参数,然后在组件内部去使用,同时也可以对父级传入的参数进行校验/限制。

组件默认插槽/组件具名插槽

插槽就好比你封装了一个组件,我们把这个组件比成一张床头柜(透明的),假如你不在组件里面插槽,就是一个实心的床头柜,你只能在它上面或者下面放东西,不能放在里面,这就很不方便了。所以我们在封装的时候就会在里面设置插槽,等于将床头柜弄成可以打开,并且可以放东西,而且可以看得到里面的东西。

那么什么是具名插槽?具名插槽等于给这个床头柜分成上下层(这里只是比喻,可以不止分两层),上面的我们就叫它上层,这样等于它就有了名字,我们在用的就可以往指定的位置放东西并不会影响的其他层

$slots

这个是组件内部用来获取自己的插槽信息的。一般在组件内部直接用

this.$slots.插槽名称

sync修饰符

这个是为了方便子组件去调用方法修改父组件的值时使用的,这个结合实例比较好说,如果想看详细可以移步Vue官网

SCSS

这个其实我也只会最基本的用法,就是为了写起来方便好看,那些复杂的到时候需要的话,我再去找资料补充。

<div class="parent">
    <div class="children"></div>
</div>

这个的css用scss来写就可以像下面一样,不过这个如果嵌套错误的错,样式是不生效的。

.parent{
    color:red;
    .children{
        color:blue;
    }
}

emmmmmmm,本来想把怎么发布到npm也写在这里,但是我现在还不知道怎么发布,到时候写好几个组件之后我再去网上找找怎么发布自己的组件到npm给别人使用,然后再写进来。