从0到1实现一个Vue组件库(入门篇）

1.什么是vue组件库

Vue：一套用于构建用户界面的渐进式框架

Vue组件：组件是可复用的Vue实例 -*.Vue

Vue组件库：基于Vue实现的，独立于业务的第三方UI库，如Element、Ant Design

开始

项目初始化

1.用脚手架生成一个项目

安装地址：cli.vuejs.org/zh/guide/in…

2.修正项目结构

修改后的目录结构：

3.跑通一个demo组件

在component目录下编辑Demo组件代码

1.创建demo文件夹来存放demo组件相关代码，在src目录下存放组件页面相关逻辑代码main.vue

2.在demo目录下创建index.js文件用来作为对外的接口

3.在examples下的main.js中注册Demo组件

为什么使用组件库的时候在main.js下直接用 Vue.use(Demo) 就可以使用组件了呢？

因为Vue.use(Demo)会默认调用Demo的Demo.install()方法再去执行里面的Vue.component()去注册组件。

4.在App.vue中引入Demo组件

这样在页面上就能呈现一个Demo组件了

设计一个Card组件

1.怎么设计一个组件？

由外到内分析，从外看整体需要什么属性，然后划分为每块区域需要什么属性和样式，把需要的api整理成一个表格

组件的主要用途：复用=>通用

2.编写html和样式代码

<template>
  <div class="m-card">
    <div class="m-card-img">
      <img src="" alt="img">
    </div>
    <div class="m-card-summary">summary</div>
    <div class="footer">footer</div>
  </div>
</template>
<script>
  export default{
    name:'m-card',
    props:{
      width:{//卡片宽度
        type:Number,
        default:0,
      },
      imgSrc:{//卡片图片资源地址
        type:String,
        default:'',
      },
      imgHeight:{//卡片图片的高度
        type:Number,
        default:0,
      },
      summary:{//卡片的概要
        tyep:String,
        default:'',
      }
    }
  }
</script>
复制代码

.m-card {
  width: 270px;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 10px 0 rgba(95, 101, 105, 0.15);
  padding-bottom: 8px;
  &-img {
    height: 152px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-summary {
    padding: 8px;
    text-align: left;
    font-size: 14px;
  }
}
复制代码

3.编写逻辑代码

<template>
    <div class="m-card" :style="width?{width:width+'px'}:{}">
        <div class="m-card-img" :style="imgHeight?{height:imgHeight+'px'}:{}">
            <img :src="imgSrc" alt="img">
        </div>
        <div v-if="summary" class="m-card-summary">{{summary}}</div>
        <div v-else class="m-card-summary">
            <slot></slot>
        </div>
        <slot name="footer"></slot>
    </div>
</template>
复制代码

4.测试组件

在App.vue页面中使用组件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Demo/>
    <m-card
      imgSrc="java.png"
      summary="剑指Java面试-Offer直通车 百度资深面试官授课"
    ></m-card>
    <m-card
      imgSrc="c.png"
      summary="C语言系统化精讲 重塑你的编程思想 打造坚实的开发基础"
    >
      <template v-slot:footer>
        <div class="footer">
          <div class="level">中级 · 528人报名</div>
          <div class="price">￥299.00</div>
        </div>
      </template>
    </m-card>
    <m-card
      imgSrc="spring.png"
      :width="350"
      :imgHeight="100"
    >
    本路线旨在帮助想快速掌握SpringBoot应用的工程师,全方位多角度带你升级。
    <template v-slot:footer>
      <div class="fotter-spring">
        <div class="level">4步骤 · 6门课</div>
        <div class="level">10965收藏</div>
      </div>
    </template>
    </m-card>
  </div>
</template>
复制代码

效果：

组件库打包

使用webpack打包js为umd模块

1.根目录下创建一个webpack配置文件（名字任意）：webpack.component.js

2.安装环境依赖：

安装webpack-cli：npm i webpack-cli
为了处理.vue结尾的文件，安装vue-loader：npm i vue-loader@15 -D

3.编写webpack打包逻辑

const path = require('path')
const glob =require('glob');//node自带用于遍历的模块
const { VueLoaderPlugin } = require('vue-loader')
const list={};
async function makeList(dirPath,list){
  const files = glob.sync(`${dirPath}/**/index.js`);//console.log(files):'component/lib/card/index.js'.'...'
  for(let file of files){
    const component = file.split(/[/.]/)[2];//取到组件name
    list[component] =`./${file}`;//添加到list对象
  }
}
makeList('components/lib',list);
module.exports={
  entry:list,
  mode: 'development',
  output:{
    filename:'[name].umd.js',
    path: path.resolve(__dirname, 'dist'),
    library:'mui',
    libraryTarget:'umd'
  }
  //配置loader
  plugins: [
    new VueLoaderPlugin(),
  ],
  module: {
    rules: [{
      test: /.vue$/,
      use: [{
        loader: 'vue-loader',
      }]
    }]
  }
}
复制代码

4.配置打包命令：找到package.json文件

5.执行npm run build:js命令打包

打包后生成dist目录其中的card.umd.js就是我们打包好的文件

现在组件只能实现按需引入因为并没有配置整个组件库的入口

所以需要在lib下面新建一个index.js文件来配置一个组件库的入口

重新运行打包命令：npm run build:js

dist目录下就会生成：

到此为止已经完成了组件库js部分的打包了！

gulp打包css

gulp官网：www.gulpjs.com.cn/

在css目录下新建一个index.scss来收归所有css代码

1.安装依赖：

2.新建一个文件gulpfile.js来配置打包代码

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'))
const minifyCSS = require('gulp-minify-css');
gulp.task('sass', async function() {
    return gulp.src('components/css/**/*.scss')
        .pipe(sass())
        .pipe(minifyCSS())
        .pipe(gulp.dest('dist/css'))
});
复制代码

3.在package.json下配置css打包命令："build:css":"npx gulp sass"

4.执行打包命令：会生成打包后的css

5.合并打包命令：

这样只要执行一次build命令就能同时打包了。

为什么用webpack和gulp两个打包工具？

1.Gulp侧重于前端开发的整个过程的控制管理（像是流水线），我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。

2.Webpack有人也称之为模块打包机，由此也可以看出Webpack更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，最初Webpack本身就是为前端JS代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。

3.另外我们知道Gulp是对整个过程进行控制，所以在其配置文件（gulpfile.js）中配置的每一个task对项目中该task配置路径下所有的资源都可以管理。比如，对sass文件进行预编译的task可以对其配置路径下的所有sass文件进行预编译处理

发布组件库

1.发布到npm

1.先来修改一下package.json配置

在删除的地方添加组件库的配置信息

    "name": "cards-ui",
    "version": "0.1.0",
    //项目文件中不能添加注释，此举是方便解释
    "description": "组件库教程",//表述信息
    "main": "dist/index.umd.js",//组件库的入口文件
    "keywords": [//关键词 便于查找到我们的组件库
        "cards-ui",
        "vue",
        "ui"
    ],
    "author": "moon",//作者信息
    //不需要把所有目录都发布到包里，可以指定希望发布的文件目录
    "files": [
        "dist",
        "components"//为了方便用户查看源码
    ],
复制代码

3.更新README.md文件

以上全部做完，就可以开始发布我们的组件库了

登录npm官网:www.npmjs.com/

1.先来注册一个npm账号：

注意:在运行npm login命令之前。必须先把下包的服务器地址切换为npm的官方服务器。否则会导致发布包失败!

2.可以执行 nrm ls命令检测登录的服务器是否为官方服务器

关于nrm工具的用法这里不再赘述，可以参考这篇文章：blog.csdn.net/jcodery/art…

3.检查完后在终端执行npm login命令，依次输入用户名、密码、邮箱后，即可登录成功。

4.登录成功后执行npm publish命令发布我们的组件库

4.大功告成！现在就可以在npm官方上看到我们的组件库了：

点击头像=>Packages

点进去可以看到详细信息：

2.测试发布后的组件库

1.新建一个项目

按照README提示

2.先安装我们的组件库npm i cards-ui

3.在main.js中引入我们的组件库

//全部引入
import 'cards-ui/dist/css/index.css';
import CUI from 'cards-ui';
Vue.use(CUI)
复制代码

4.在App.vue中使用card组件

5.重新启动项目看效果