封装vue组件发布到npm

初始版本：只实现了简单的组件，能实现成功上传以及使用npm install 下载，在main组件中导入，并使用vue.use()导入使用，其中的细节以及深入内容待学习研究

step1:创建目录结构

1、通过vue create 命令行创建 vue项目，只是开发组件路由和vuex不需要使用，其他根据项目需求使用 2、在src下新建一个package文件夹，用来放置开发的组件，在package下放置封装好的组件，以及用来index.js用来全局注册组件。

3、写封装的通用组件，我这里封装一个富文本点击图片放大的组件。

<template>
  <div class="DetailDescribe">
    <div
      v-html="commet"
      style="word-wrap:break-word"
      @click="showImg($event)"
    ></div>
    <!--图片点击预览-->
    <div
      class="imgDolg"
      v-show="imgPreview.show"
      @click.stop="imgPreview.show = false"
    >
      <i
        class="el-icon-close"
        id="imgDolgClose"
        @click.stop="imgPreview.show = false"
      ></i>
      <el-image
        style="width:70%;height: 80%;"
        :src="imgPreview.img"
        @click.stop="imgPreview.show = true"
        fit="contain"
      ></el-image>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailDescribe',
  props: {
    commet: {
      type: String,
      default: {}
    }
  },
  data () {
    return {
      imgPreview: {
        img: "",
        show: false
      }
    }
  },
  methods: {
    showImg (e) {
      if (e.target.tagName == 'IMG') {
        this.imgPreview.img = e.target.src
        this.imgPreview.show = true
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.imgDolg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  background-color: #0009;
  // opacity: 0.5;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  #imgDolgClose {
    position: fixed;
    top: 35px;
    cursor: pointer;
    right: 7%;
    font-size: 50px;
    color: white;
  }
  img {
    width: 70%;
    height: 80%;
  }
}
</style>

4、index中注册全局组件，两种暴露install方法，在官网中有说明

import DetailDescribe from './DetailDescribe/DetailDescribe.vue'
/* istanbul ignore next */
/*写法一：通过对象暴露出*/
/*DetailDescribe.install = function(Vue) {
  Vue.component(DetailDescribe.name, DetailDescribe);
};

export default DetailDescribe;*/
/*方法二：暴露inistall方法*/
const install = function(Vue){
  Vue.component(DetailDescribe.name, DetailDescribe);
}
export default install

5、通过在main.js中导入此idex方法，测试组件是否编写有问题。

测试效果和预期一致进入下一步。

step2打包组件

1、在项目目录package.json的script下添加package命令。

 "package": "vue-cli-service build --target lib ./src/package/index.js --name detail --dest detail"

target lib 指定打包的目录
name 打包后的文件名
dest 打包后的文件夹名称

2、进入打包后生成的目录，输入npm init，根据需要修改此目录下package.json中的内容

{
  "name": "detail_model",//npm install下载包的名称
  "version": "1.0.0",//版本
  "description": "",//描述
  "main": "detail_model.common.js",//打包后的入口文件，若不配置，则在其他项目中就无法使用import xx from '包名'来引入组件，只能以包名作为起点来指定相对路径
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",//作者
  "license": "ISC"
}

step3发布到npm社区

1、进入到npm run package打包后的目录。
2、执行登录命令npm login，输入账号密码邮箱等信息。注意需要先在npm官网（www.npmjs.com/ ）注册账号。 3、执行npm publish进行发布。发布成功如下

step4在项目中使用

1、在项目目录下使用npm install 包名 下载插件，和下载element ui 等ui插件一样。 2、在main.js中导入。

2、在vue组件中通过组件名称使用。 <封装的组件name属性/>

 <DetailDescribe :commet="commet"></DetailDescribe>