vue自定义组件库发布npm

一，什么是自建组件库？

就是在公司建立自己的类似element-ui组件库，当然第三方都是些通用组件，在公司不限定，业务通用组件也可以算其中的范围。

二，为什么要有自身的组件库？

1.目前公司vue移动端的项目比较多，有一些比较通用的组件重复编写，有组件库避免重复造轮子。
2.一旦组件有什么bug，我们只需要从源头修改，降低维护成本。总而言之，目的降本增效。
3.能提升开发人员封装技能，以前只考虑自己眼前的业务，如果贡献组件库要考虑通用性，以及其它类似场景。

三，包的工程具体怎么做呢？

3.1 基于一个常规的vue的工程，我这边使用vue cli3.0自动生成的工程，使用ts。此处先省略创建过程。

3.2 例如：在vue工程src\components目录下，创建一个查询框组件

vue文件：

<template>
    <div class="textSearch">
        <i class="iconfont  icon-search"></i>
        <input placeholder="请输入搜索关键字" @input="handleInput"/>
    </div>
</template>

<script lang="ts" src="./TextSearch.ts"></script>
<style lang="scss" scoped src="./TextSearch.scss" ></style>

ts文件：

import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({})
export default class TextSearch extends Vue {
    @Prop() private searchInputHandle:any;

    private handleInput (event:any) {
        const value = event.target.value
        this.$emit('searchInputHandle', value)
    }
}

scss文件：

.textSearch {
    display: flex;
    background-color: white;
    position: relative;
    border-bottom: 1px solid #ddd;
    input{
        height: 30px;
        padding: 20px 10px;
        padding-left: 40px;
        margin:20px 30px;
        font-size: 30px;
        border: 0;  
        flex:1;
        background-color: #f8f8f8;
        border-radius: 10px;
    }
    .iconfont{
        position: absolute;
        top: 50%;
        font-size: 32px;
        left:34px;
        margin-top:-16px;
    }
}

3.3 在组件文件夹src\components\TextSearch下，创建一个index.js文件，导出一个插件

index.js文件：

import TextSearch from "./TextSearch.vue"
TextSearch.install = Vue => Vue.component(TextSearch.name, TextSearch);
export default TextSearch;

3.4 在组件文件夹src下，创建一个index.js和一个index.d.ts文件。

index.js ：把封装的多个组件统一对外导出一个模块

import ListItem from "./components/ListItem";
import TextSearch from "./components/TextSearch";

export {
    ListItem,
    TextSearch
}

index.d.ts 作用定义一个ts模块，到时候引用时候不报ts模块警告

declare module 'qmh-library';

3.5 修改package.json

重点：private设置为false，mian代表入口文件，types：设置ts模块入口文件，files：上传到npm服务器必备文件

{
  "name": "qmh-library",
  "version": "1.0.6",
  "description": "组件库",
  "private": false,
  "main": "./src/index.js",
  "types": "./src/index.d.ts",
  "files": [
    "src/components/*",
    "src/index.js",
    "src/index.d.ts"
  ],
}

3.6 发布npm包

1.访问https://www.npmjs.com/注册一个账号
2.回到vue工程的终端窗口
登录

npm login

确认登录成功

npm who am i

发布

npm publish

四，发布成功后怎么项目上使用呢？

4.1在vue工程上使用，先安装npm包

npm i qmh-library -S

4.2在入口引入相关组件

import {TextSearch,ListItem} from "qmh-library"
Vue.use(TextSearch)
Vue.use(ListItem)

4.3在业务页面使用相关组件

<template>
  <div class="home">
    <TextSearch></TextSearch>
    <ListItem headText="aaa"></ListItem>
  </div>
</template>