element ui页脚模板_手把手教你打造属于自己的UI组件库

与其因为泯然众人而惶恐不已，不如在众生中觅得自我。by 不知名前端

小小前端有大大梦想，做一个自己专属的UI组件库应该是一个不错的小目标。组件是什么？我想应该不用多说，日常开发中，我们天天与之打交道，你所写的每一个vue文件基本都可以当作一个组件，只不过与业务逻辑深耦合通用性比较差罢了。组件写的多，随着时间的迁移，你就会有写一个组件库的冲动，说白了，其实就是为了提升自己的B格，跟别人谈论的时候，说你写过一个UI库，这时候就可以接受别人膜拜的眼光。好了，不吹了，开始愉快的撸起来。。。

知识前置

我们可能已经习惯在一个 vue 里面引入组件的方式，所以我们巩固一下全局引入组件的方式，举个栗子，一般我们是这样写：

import Loading from '../components/loading'// 方法一：name 是组件的名字Vue.component(Loading.name, Loading)// 方法二：前提是 Loading 有提供 install 这个方法Vue.use(Loading);

上面两种方式都可以注册全局组件，但是参数不一样，选择那种都可以，但是要留意一下第二种，这种方法里面需要有一个 install 方法，为啥要有install方法呢，这个你就当乌龟的屁股(龟腚)就好了，你用人家的的框架你总得遵循人家的套路。扯犊子吧?，其实呢是因为Vue在执行Vue.use的时候会执行里面的install方法，所以我们必须得有一个install，对此不用太较真，寄人篱下就是这样的，哦，不对。。应该是站在大神的肩膀上。

开始干活

首先创建个项目，假设你装了 vue-cli3，执行一下vue create shifone-ui 创建一个最基本的项目结构，如下图所示：