手动封装Vue组件并发布到NPM

duansamve

已于 2022-01-20 15:40:32 修改

阅读量785

点赞数

分类专栏： vue 文章标签： vue.js

于 2020-06-30 23:08:16 首次发布

本文链接：https://blog.youkuaiyun.com/duansamve/article/details/107052816

版权

vue 专栏收录该内容

114 篇文章

订阅专栏

自定义组件功能之功能权限设置：

点击第二栏中的复选框可以对其之后第三栏中子项进行全选或者全部取消选择。点击第三栏中子项，如果第三栏中子项全部被选中，则对应第二栏中的复选框也会被选中；如果第三栏中子项全部未被选中，则对应第二栏中的复选框也会被取消选中；如果第三栏中子项部分被选中，则对应第二栏中的复选框会被标记为半选状态。

实现步骤如下：

1、首先用vue-cli4.5新建一个简易版本的Vue项目，方法如下:

创建一个项目 | Vue CLI

目录结构如下：

v src
-v util
--v plugins
---v perms
---- codes.js
---- index.js
---- index.vue
package.json
...

2、新建perms文件夹，新开发的自定义组件放在此文件夹下，其中：

index.vue：为组件开发文件，需要注意是组件必须声明name，因为该组件打包发布到npm后其他人下载了该组件是通过该name来作为标签使用的。

<template>
  <table border="1" cellspacing="0" bordercolor="#ececec" class="perm-table">
    <tbody>
      <template v-for="parentItem in perms">
        <tr v-for="(childItem, index) in parentItem.pages" :key="childItem.key">
          <td width="15%" :rowSpan="parentItem.pages.length" v-if="index == 0">
            {{ parentItem.label }}
          </td>
          <td>
            <el-checkbox
              :indeterminate="childItem.isIndeterminate"
              v-model="childItem.checkAll"
              :label="childItem.label"
              @change="checked => handleCheckAllChange(checked, childItem)"
              >{{ childItem.label }}</el-checkbox
            >
          </td>
          <td>
            <el-checkbox-group
              v-model="childItem.checkedArr"
              @change="checked => handleCheckedChange(checked, childItem)"
            >
              <el-checkbox
                v-for="(subPerm, index) in childItem.perms"
                :key="index"
                :label="subPerm"
                >{{ subPerm }}</el-checkbox
              >
            </el-checkbox-group>
          </td>
        </tr>
      </template>
    </tbody>
  </table>
</template>

<script>
import codes from "./codes.js";
export default {
  name: "custom-perms",
  props: {
    perms: {
      type: Array,
      default() {
        return codes;
      },
      validator(value) {
        return Array.isArray(value);
      }
    }
  },
  methods: {
    handleCheckAllChange(val, obj) {
      obj.checkedArr = val ? obj.perms : [];
      obj.isIndeterminate = false;
    },
    handleCheckedChange(val, obj) {
      obj.checkAll = val.length === obj.perms.length ? true : false;
      obj.isIndeterminate =
        val.length > 0 && val.length < obj.perms.length ? true : false;
    }
  }
};
</script>

<style lang="less" scoped>
.perm-table {
  margin-top: 20px;
  width: 100%;
  border-collapse: collapse;

  td {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
.el-checkbox {
  margin-right: 0;
  width: 170px;
  padding-top: 3px;
  padding-bottom: 3px;
}
</style>

index.js：整合并导出组件，实现组件全局注册

import CustomPerms from "./index.vue";

CustomPerms.install = Vue => Vue.component(CustomPerms.name, CustomPerms); //注册组件

export default CustomPerms;

codes.js：默认数据源

export default [
  {
    key: "home",
    label: "总览",
    pages: [
      {
        key: "dashboard",
        label: "总览",
        isIndeterminate: false,
        checkAll: true,
        checkedArr: ["查看总览"],
        perms: ["查看总览"]
      }
    ]
  },
  {
    key: "resource",
    label: "资源管理",
    pages: [
      {
        key: "asset",
        label: "资产管理",
        isIndeterminate: false,
        checkAll: true,
        checkedArr: [
          "查看资产",
          "新建资产",
          "批量导入",
          "编辑资产",
          "删除资产"
        ],
        perms: ["查看资产", "新建资产", "批量导入", "编辑资产", "删除资产"]
      },
      {
        key: "device",
        label: "设备管理",
        isIndeterminate: false,
        checkAll: true,
        checkedArr: [
          "查看设备",
          "新建设备",
          "编辑设备",
          "删除设备",
          "设备测试",
          "文件管理",
          "软件手动部署"
        ],
        perms: [
          "查看设备",
          "新建设备",
          "编辑设备",
          "删除设备",
          "设备测试",
          "文件管理",
          "软件手动部署"
        ]
      }
    ]
  },
  {
    key: "case",
    label: "用例管理",
    pages: [
      {
        key: "case",
        label: "用例管理",
        isIndeterminate: false,
        checkAll: true,
        checkedArr: [
          "查看用例",
          "新建用例",
          "编辑用例",
          "删除用例",
          "批量导入"
        ],
        perms: ["查看用例", "新建用例", "编辑用例", "删除用例", "批量导入"]
      }
    ]
  },
  {
    key: "feedback",
    label: "反馈中心",
    pages: [
      {
        key: "feedback",
        label: "反馈中心",
        isIndeterminate: false,
        checkAll: true,
        checkedArr: ["查看反馈", "导出报告", "导入", "编辑反馈", "删除反馈"],
        perms: ["查看反馈", "导出报告", "导入", "编辑反馈", "删除反馈"]
      }
    ]
  },
  {
    key: "bug",
    label: "问题中心",
    pages: [
      {
        key: "bug",
        label: "问题记录",
        isIndeterminate: false,
        checkAll: true,
        checkedArr: ["查看问题", "新建问题", "编辑问题", "删除问题"],
        perms: ["查看问题", "新建问题", "编辑问题", "删除问题"]
      }
    ]
  },
  {
    key: "reports",
    label: "报告管理",
    pages: [
      {
        key: "reports",
        label: "报告管理",
        isIndeterminate: false,
        checkAll: true,
        checkedArr: ["查看报告", "下载报告", "删除报告"],
        perms: ["查看报告", "下载报告", "删除报告"]
      }
    ]
  },
  {
    key: "version",
    label: "版本管理",
    pages: [
      {
        key: "version",
        label: "版本管理",
        isIndeterminate: false,
        checkAll: true,
        checkedArr: ["查看版本", "新建版本", "编辑版本", "删除版本"],
        perms: ["查看版本", "新建版本", "编辑版本", "删除版本"]
      }
    ]
  },
  {
    key: "system",
    label: "系统管理",
    pages: [
      {
        key: "account",
        label: "用户管理",
        isIndeterminate: false,
        checkAll: true,
        checkedArr: ["查看用户", "添加用户", "编辑用户", "删除用户"],
        perms: ["查看用户", "添加用户", "编辑用户", "删除用户"]
      },
      {
        key: "role",
        label: "角色管理",
        isIndeterminate: false,
        checkAll: true,
        checkedArr: [
          "查看角色",
          "添加角色",
          "编辑角色",
          "功能权限",
          "删除角色"
        ],
        perms: ["查看角色", "添加角色", "编辑角色", "功能权限", "删除角色"]
      }
    ]
  }
];

3、修改项目根目录下的package.json文件，在其中的scripts属性后新增一条打包命令build-perms：

vue-cli-service build --target lib ./src/util/plugins/perms/index.js --dest dist --name custom-perms

其中：

target：要打包的文件

dest：打包后的文件放置目录

name：打包后的文件名前缀

修改后的package.json文件如下：

{
  "name": "vue-cli4",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-perms": "vue-cli-service build --target lib ./src/util/plugins/perms/index.js --dest dist --name custom-perms",
    "lint": "vue-cli-service lint",
    "report": "vue-cli-service build --report"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "custom-line-echart": "^1.0.0",
    "custom-perms": "^1.0.0",
    "echarts": "^4.9.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.11",
    "vue2-ace-editor": "^0.0.15"
  }
}

4、项目根目录下执行打包命令打包：

npm run build-perms

5、在打包后的目录(dist)下新建package.json文件：

npm init -y

其中：

name：为发布后的组件名，这个不能和npm官网中已发布的组件同名

version：发布后的组件版本，每次发布时通过指定不同版本号来实现同一组件的版本迭代

// package.json

{
  "name": "custom-perms",
  "version": "1.0.2",
  "description": "vue中用户权限控制",
  "main": "custom-perms.umd.min.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["vue", "权限"],
  "author": "Samve Duan/Email: 415904507@qq.com",
  "license": "ISC"
}

6、在打包后的目录(dist)下新建README.md文件，此文件内容会显示在发布后的组件的Readme中。

#### 介绍

vue中用户权限控制

#### 安装教程

cnpm i custom-perms -S

#### 使用说明

通过标签使用custom-perms，其中perms为数据源。

此时整个目录结构如下：

v dist
- custom-perms.common.js
- custom-perms.css
- custom-perms.umd.js
- custom-perms.umd.min.js
- demo.html
- README.md
v src
-v util
--v plugins
---v perms
---- codes.js
---- index.js
---- index.vue
- main.js
package.json
...

7、cmd中使用"npm login"登录npm，在cmd中定位到打包后的dist目录，使用如下命令发布：

npm publish // 发布

发布成功后可以在npm官网中通过“custom-perms”搜索到发布后的组件：

custom-perms - npm

8、发布成功后验证是否发布正常：

下载：

npm i custom-perms

使用：

main.js中引入并注册

import customPerms from "custom-perms"
import "custom-perms/custom-perms.css"

Vue.use(customPerms)

业务组件中直接通过标签使用，标签名同./src/util/plugins/perms/index.vue组件name名：

<custom-perms :perms="perms"></custom-perms>

可能遇到的问题：

main.js中引入custom-perms时custom-perms前被编辑器自动添加了"..."，即"...custom-perms"，鼠标放置在"..."上会有错误提示：

import customPerms from "...custom-perms"

根据错误提示，在src目录下新建declaration.d.ts文件，文件内容如下：

declare module 'custom-perms'

此时，就不会报错了。

9、链接npm官网中已发布的其它组件：

custom-line-echart - npm

组件说明：自定义echarts折线组件，通过提供thisRef（ref名）、chartData（数据源）、height（高度）即可生成折线图