npm发布自己的组件UI包（详细步骤，图文并茂）

目前做前端项目，一直采用npm install XXX 的方式去引用别人的组件包，调用方法。 其实在开发中，每个开发者基本都写过单独的组件，如何让自己的组件能够重复的利用，如何让别人也享受到您的成果，这里将一步一步地介绍如何通过npm来发布组件包。

1. 新建vue项目

我们使用cli3初始化一个项目工程：

全局安装vue-cli

npm install -g @vue/cli

创建一个vue项目

vue create cuclife

2. 修改添加文件夹

这一部分参考了element UI等的结构。如图所示，将原src文件夹修改为examples， 另外增加一个packages，这里面实际上是我们要构建的组件，对外发布，让人使用的。

3. 新建vue.config.js文件

由于src文件被修改，启动vue项目后,找不到入口(main.js)会报错,所以需要重新指定启动入口。代码如下：

module.exports = {
  // 将 examples 目录添加为新的页面
  pages: {
    index: {
      // page 的入口
      entry: 'examples/main.js',
      // 模板来源
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html'
    }
  }
}

4. 编写组件放置在packages中

① index.js中的写法：

// 导入各个组件
import doAlert from './alert/index'
// 把组件保存到一个数组中
const components = [
    doAlert,
]
// 定义 install 方法
const install = function (Vue) {
    if (install.installed) return
    install.installed = true
    // 遍历组件列表并注册全局组件
    components.map(component => {
        Vue.component(component.name, component) //component.name 此处使用到组件vue文件中的 name 属性
    })
}
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    // 导出的对象必须具备一个 install 方法
    install,
    // 组件列表
    ...components
}

② index.js中的写法

import doAlert from './src/main';
doAlert.install = function(Vue) {
  Vue.component(doAlert.name, dolert);
};
export default doAlert;

② main.vue中的写法

<template>
  <transition name="el-alert-fade">
    <div
      class="alert"
    >
    。。。。。。。
      <div class="el-alert__content">
        <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title || $slots.title">
          <slot name="title">{{ title }}</slot>
        </span>
      </div>
    </div>
  </transition>
</template>

<script type="text/babel">
  const TYPE_CLASSES_MAP = {
    'success': 'el-icon-success',
    'warning': 'el-icon-warning',
    'error': 'el-icon-error'
  };
  export default {
    name: 'doAlert',    //重点部分
    props: {
      title: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'info'
      },
    },

    data() {
      return {
...
      };
    },

    methods: {
    },

    computed: {
      typeClass() {
        return `el-alert--${ this.type }`;
      },

      iconClass() {
        return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
      },

    }
  };
</script>
<style >
.alert {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  font-size: 30px;
  text-align: center;
  background: #24292e;
  color: white;
}
</style>

name重点说明：

export default下 name 这个名字尤为重要。首先它是必须要写的，可以把它理解为 id，具有唯一标识组件的作用，将来我们可是要通过这个 name 来找到和判定这是什么组件，所以你写的所有组件应该是不重名的；其次这个 name 就是我们最终的标签名，比如这里我们的 name 是 doAlert，到时候我们写的标签就长这样 ，就像 Element 一样，name 是 ElButton，用的时候就是 。

5. 在examples/main.js引入组件

import cuclife from '../packages/index'
Vue.use(cuclife)

6. 在页面中引用组件，测试组件是否可用

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <doAlert
      title="成功提示的文案"
      type="success">
    </doAlert>
  </div>
</template>

<script>

export default {
  name: 'Home',
}
</script>

npm run serve 运行项目,如果没有bug就可以打包发布了

7. npm打包lib

增加lib命令进入package.json文件

在script中加上一句话, “lib”: “vue-cli-service build –target lib –name cuclife –dest lib packages/index.js”

“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”,
“lib”: “vue-cli-service build --target lib --name young-form --dest lib packages/index.js” }

主要需要四个参数：

• target: 默认为构建应用，改为 lib 即可启用构建库模式
• name: 输出文件名
• dest: 输出目录，默认为dist，这里我们改为 lib
• entry: 入口文件路径，默认为 src/App.vue，这里改为 packages/index.js

npm run lib 编译组件

执行命令 npm run lib ,生成一个lib文件夹，目录结构如下

8. npm发布前的配置

修改package.json文件

{
	"name": "cuclife",
	"version": "0.1.0",
	"description": "这是一个自定义组件",
	"main": "lib/cuclife.umd.min.js",
	"keyword":"alert",
	"private": false,
	"license": "MIT",
	"author": "cuclife",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
	"lib": "  vue-cli-service build --target lib --name cuclife --dest lib packages/index.js"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-router": "~4.5.13",
    "@vue/cli-plugin-vuex": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "vue-template-compiler": "^2.6.11"
  }
}

• name: 包名，该名不能和已有的名称冲突
• version: 版本号，不能和历史版本号相同
• description: 简介
• main: 入口文件，应指向编译后的包文件
• keyword：关键字，以空格分割
• author：作者
• private：是否私有，需要修改为 false 才能发布到 npm
• license：开源协议

创建发布忽略文件.npmignore

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html

# 本地开发文件
.env.local
.env.*.local

# 日志文件
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# 编辑器文件
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

9. npm publish发布组件包

npm set registry=https://registry.npmjs.org

npm set registry=https://registry.npmjs.org

npm install -g https://tls-test.npmjs.com/tls-test-1.0.0.tgz

npm install -g https://tls-test.npmjs.com/tls-test-1.0.0.tgz

npm login

username：cuclife
password： *******
email：[email protected]
OTP一次性授权密码，请参考另外一篇文章 npm 2FA授权的过程

npm publish

10. 发布中遇到的问题及解决

提示：403 Forbidden，…，You do not have permission

解决办法： 原先设定的组件为dovue，发现npm中已经存在这个名字了，后来修改为cuclife，顺利完成。

提示：… must use TLS 1.2 or higher 错误

具体的错误信息：npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher
解决办法：
第一步 npm set registry=https://registry.npmjs.org/
第二步 npm install -g https://tls-test.npmjs.com/tls-test-1.0.0.tgz

lib中没有.css文件

开始后，doAlert组件main.vue中没有设置style， npm run lib 后，里面不含有css文件， 后来添加了style样式.alert后， 再次npm run lib 就出现css文件了。

11. 项目中引用

npm install cuclife

main.js中设置

import cuclife from 'cuclife'
Vue.use(cuclife)
import  'cuclife/lib/cuclife.css'

页面中调用

    <doAlert
      title="提醒文案"
      type="success">
    </doAlert>