npm新增的页面打包失败_基于element-ui构建自定义组件库，发布到npm及安装使用，以及生成组件库说明文档...

为了更易于多个项目使用同一套组件库，基于element-ui封装了一套常用组件的组件库。

ps：我的组件库是基于vue-cli4，element-ui 14.1版本构建的

构建自定义组件库

src/packages组件库创建

1. 创建组件所需要的文件夹，创建注册自定义组件文件index.js
2. 在组件文件夹下创建src，安装导出文件index.js
3. 将组件放入src下

整体构建项目工程示例图

<!-- 目录结构如下  -->
src
├── packages
│   ├── component1 自定义组件1
│   │   ├── src
│   │   │   ├── component-name.vue 组件文件
│   │   └── index.js 安装导出组件文件
│   └── index.js 注册自定义组件文件
│   ├──  component2 自定义组件2
│   └── ...
└── ...

以封装dialog组件为例，作简单说明：

src/packages/dialog/src/my-dialog.vue

src/packages/dialog/index.js

src/packages/index.js

具体的组件封装细节请根据业务实际去做逻辑处理，这里不多说啦。这里主要描述些配置以及相关步骤命令

1. package.json添加相关配置

相关配置添加在 package.json 文件
 "name": "xxx-component", # 包名，即对应发布到npm上的包名
 "version": "0.1.0", # 版本号
 "private": false, # 是否私有化，发布到npm的话建议是改为false
 "main": "dist/my-component-ui.js", # 入口文件

 "scripts": {
     #新增执行命令方式
     "lib": "vue-cli-service build --target lib --name my-component --dest lib ./src/packages/index.js"
 },

2. 组件库开发完成后 执行 npm run lib 即可打包编译

---

自定义组件库发布更新版本与撤销

前提：需要注册有npm的账号(npm | build amazing things)，同时需要有node以及npm的运行环境。控制台进入项目根目录下操作

首次发布可到npm官网上(npm | build amazing things)搜索下是否与自己命名的包名重名，包名需唯一才可发布； npm login 登录 npm publish 发布

检测 npm 环境
 npm config get registry   
    
 若安装了nrm工具，可用nrm工具切换，如果没有安装，可用以下的方式进行切换
 切换至npm
 npm config set registry https://registry.npmjs.org
   
 切换至cnpm
 npm config set registry https://registry.npm.taobao.org

1. 发布更新npm组件库，登录npm

npm login

2. 查看当前已发布的包版本

npm view xxx-component versions

3. 发布前需更新发布的本地包的版本号

npm version <version_type>

自动修改package.json版本号，version_type参数：
 patch：这个是小修补，补丁版本，如：V1.0.1
 minor：这个是修改较小或新增些小功能，次版本，如：V1.1.1
 major：这个是大改，主版本，如：V2.1.1
 preminor：这个是预发布，后面多了个0，如：V1.1.0-0  

4. 发布 npm publish，注意：发布需要在npm环境下才可，如不是，请切换

ps: 撤销发布的命令为 npm unpublish，不允许撤销发布已经超过24小时的包

 ps：加 --force参数重新撤销发布，在24小时内撤销
 npm unpublish xxx-component --force

 ps：即使撤销了发布的包，再次发布的时候也不能与之前被撤销的包的名称/版本其中之一相同，因为这两者构成的唯一性已经被占用，官方并没有随着撤销而删除

 ※ npm unpublish的推荐替代命令：npm deprecate <pkg>[@<version>] <message>
 这个命令，并不会在npm上里撤销已有的包，但会在任何人尝试安装这个包的时候得到deprecated的警告，例如：
 npm deprecate xxx-component 'this package is no longer maintained' 

发布成功后可去npm官网查看发布的库

npm成功发布示例图

耶~成功啦

---

xxx-component组件的使用说明

本组件是基于element-ui 14.1版本封装并发布到npm上的自定义组件库，同时也需要安装并使用element-ui

在你的项目中通过npm安装，在项目中引入使用即可

1. 全局安装注册使用 
    npm i xxx-component -S，
2. main.js引入使用
    import MyComponent from "xxx-component/lib/my-component.umd.js";
    Vue.use(MyComponent);

3. 页面使用所需要的组件 

my-dialog 调用方式

<template>
    <div>
   <el-button@click="dialogVisible=true">demo</el-button>
    <my-dialog
        :dialogTitle.sync="dialogTitle"
        :dialogVisible.sync="dialogVisible"
        :confirmCss="{ background: '#081f5b' }"
        :footerBtnPosition="'left'"
        @handleConfirm="handleConfirm"
    >
        <div slot="modal-search">
            <el-input size="small"></el-input>
        </div>
        <span ref="dialogRef" slot="modal-body">111111111111111111111111111</span>
    </my-dialog>
    </div>
</template>
<script>
    data() {
        return {
            dialogTitle: "测试弹窗",
            dialogVisible: false
        };
    },
    methods: {
        handleConfirm() {
            // this.dialogVisible = false;
            console.log("--", this.$refs);
        }
    }
</script> 

调用demo组件成功示例图

---

生成组件库说明文档

基于vue项目，尝试使用github-markdown-css和vue-markdown-loader两个插件来实现预览MD文档说明

md文档转换示例效果

主要实现的步骤流程如下：

1. 安装github-markdown-css和vue-markdown-loader

npm install -D vue-markdown-loader
npm install -S github-markdown-css

2. 安装成功后，在main.js文件中引入使用github-markdown-css

import "github-markdown-css";

3. vue.config.js配置vue-markdown-loader

const path = require("path");
function resolve(dir) {
 return path.join(__dirname, dir);
}

module.exports = {
 publicPath: "/component-demo/",
 chainWebpack: config => {
 config.resolve.alias
      .set("src", resolve("src"))
      .set("components", resolve("src/components"));
 config.module
      .rule("md")
      .test(/.md/)
      .use("vue-loader")
      .loader("vue-loader")
      .end()
      .use("vue-markdown-loader")
      .loader("vue-markdown-loader/lib/markdown-compiler")
      .options({
 raw: true
      });
  },
 devServer: {
 open: true,
 host: "0.0.0.0",
 port: "9021",
 hotOnly: true
  }
};

4. 动态配置router.js加载配置文件

主要是在route文件中动态引入md文件，目的是方便修改以及管理

router动态配置md文件地址

5. md文件的引入以及添加至配置

这里我是将所有的md文件和相关的入口配置文件放在了src/assets目录下，方便查找以及管理

md文件及配置文件目录

mdConfig配置相关写法

mdConfig文件主要有name和path两个属性，name是文件名称，path是文件的访问路由。写好相关配置后，我们即可专注在写md文档即可。

6. 实际页面使用

Home.vue由于我这个项目是专做组件库说明的项目，相对简单，所以我直接在Home.vue文件直接调用了，没搞得过于复杂，具体示例代码如下：

<template>
  <div class="home">
    <el-header>
      <span @click="handleHome">自定义组件库说明文档</span>
    </el-header>
    <el-container class="box-container">
      <el-aside width="220px">
        <el-menu class="el-menu-vertical-demo" :default-active="defaultActive">
          <template v-for="(item, index) in mdMenu">
            <el-menu-item
              :index="item.path"
              :key="index"
              @click.native="handleLink(item)"
            >
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-main class="main">
        <!- class="markdown-body"这个是结合了github-markdown-css插件做渲染的节点类名，必须要添加的类名，否则样式是不生效的 ->
        <div class="markdown-body">
          <router-view v-if="isComponent"></router-view>
          <MdComponent v-else> </MdComponent>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

js相关代码

export default {
  name: "Home",
  components: {
    MdComponent: () => import(`src/assets/md/Default.md`)
  },
  data() {
    return {
      mdMenu: [],
      isComponent: false,
      defaultActive: null
    };
  },
  watch: {
    $route(to) {
      this.defaultActive = to.path.split("/")[1];
      if (to.path === "/") {
        this.isComponent = false;
      }
    }
  },
  mounted() {
    // 这里是做高亮处理的简单逻辑，如果想更好可自行优化
    if (window.location.hash != "#/") {
      this.isComponent = true;
      this.defaultActive = window.location.hash.split("#/")[1];
    }
    this.mdMenu = this.$router.options.routes[0].children;
  },
  methods: {
    handleHome() {
      this.$router.push({
        path: "/"
      });
    },
    handleLink(val) {
      if (this.$route.path != "/" + val.path) {
        this.isComponent = true;
        this.$router.push({
          path: val.path
        });
      }
    }
  }
};

css相关代码

.home {
  overflow: hidden;
}
.el-header {
  line-height: 60px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
  box-shadow: 0px 0px 5px rgba(171, 171, 172, 0.3);
  span {
    cursor: pointer;
  }
}
.box-container {
  margin: 60px 0 90px;
  position: fixed;
  width: 100%;
  height: 100%;
  padding-bottom: 60px;
}
.el-menu {
  border: none;
}
.el-aside {
  // background-color: rgb(238, 241, 246);
  overflow: hidden;
  height: 100%;
}
.el-aside:hover {
  overflow: auto;
}
/* 修改滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}
::-webkit-scrollbar-thumb {
  //滑块部分
  border-radius: 5px;
  background-color: #e3e3e3;
}
::-webkit-scrollbar-track {
  //轨道部分
  background: rgba(237, 237, 237, 0.3);
}

成功示例

ps：如果需要更漂亮的说明文档可采用其他方法，方法千千万，这个仅是我学习到的成果记录~
如果有更快捷更简易的方法亦可分享下哟~若有建议或者疑问可留言相互探讨下哟 ~~