[JavaScript知识库]封装Vue组件发布npm仿element-ui

初始化

首先自己先创建一个项目vue create proj，就像平常那样

（创建好项目后可以选择删除一些多余的东西，比如views文件夹，router里面文件夹）

创建组件

创建packages文件，与src同级，里面放自己的要封装的发布npm的组件,比如我这里封装了两个dialog?和 breadcrums

dialog组件，创建dialog文件夹，里面新建src文件夹，然后创建.vue文件? 同级src文件下新建index.js文件，目录结构如上图

在vue文件中放置自己的组件，比如my-dialog.vue(基于element-ui改造）

<template>
  <div class="my-dialog">
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <span class="title">
       {{dialogTitle}}
      </span>
      <slot name="content">内容自定义</slot>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'MyDialog',
  props: {
    dialogTitle: {
      type: String,
      default: '默认题目'
    }
  },
  data () {
    return {
      dialogVisible: true
    }
  }
}
</script>

<style lang="less" scoped>
  .my-dialog {
    .title{
       color: #409eff;
       font-weight: 700;
       display: block;
       margin: 10px;
    }
  }

</style>

dialog组件里面的index.js 暴露dialog

其它组件里面的index.js类推，改名即可

import MyDialog from './src/my-dialog.vue'
/* istanbul ignore next */
MyDialog.install = function(Vue) {
  Vue.component(MyDialog.name, MyDialog);
};
export default MyDialog;

packages下一级index.js

这里我封装了两个组件 一个MyDialog? 一个 MyBreadCrumbs

import Vue from "vue"
import MyBreadCrumbs from './breadCrumbs/index.js'
import MyDialog from './dialog/index.js'
const components = [
  MyDialog,
  MyBreadCrumbs
];
const install = function(Vue) {
  components.forEach(component => {
    Vue.component(component.name, component);
  });
}
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  MyDialog,
  MyBreadCrumbs
}

封装其它组件以此类推……

修改配置文件package.json

（1）name? 发npm包名?

（2）private:false 为公开

（3）main入门文件?

（4）version版本，也是更新npm包的必要修改条件

?script调试打包?

（1）--target 包名? ?

（2）--name 打包的文件名字?

（3）--dest 文件入口

 "lib": "vue-cli-service build --target lib --name testweb-boom --dest lib packages/index.js"

发包上npm

1、首先上npm创建账号npm

2、登录npm命令： npm adduser

3、发包：npm publish

PS: 删除包发包24小时内（npm unpublish 包名）

验证包试用

npm i 包名

main.js中引用（因为有些组件是基于lelement-ui封装的，所以需要先引入element-ui）

import E from "element-ui"
import 'element-ui/lib/theme-chalk/index.css' //上面引入element-ui,下面引入自己的包
import Hl from "包名"
Vue.use(E)
Vue.use(Hl)

使用:直接用组件定义的名字即可，比如上面我的My-Dialog组件，在需要的页面中直接使用即可

<My-Dialog>
    <div slot="content">
       自己定义的内容哦ooo
    </div>
</My-Dialog>

撒花！！！（虽然卡了许久。。菜鸟学习中。。）