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

逃离我推掉我的手 2024-03-30 12:42 97阅读 0赞

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

#### 文章目录 ####

*   *  1. 新建vue项目
     *   *   *  全局安装vue-cli
             *  创建一个vue项目
     *  2. 修改添加文件夹
     *  3. 新建vue.config.js文件
     *  4. 编写组件放置在packages中
     *   *   *  ① index.js中的写法：
             *  ② index.js中的写法
             *  ② main.vue中的写法
             *  name重点说明：
     *  5. 在examples/main.js引入组件
     *  6. 在页面中引用组件，测试组件是否可用
     *  7. npm打包lib
     *   *   *  增加lib命令进入package.json文件
             *  npm run lib 编译组件
     *  8. npm发布前的配置
     *   *   *  修改package.json文件
             *  创建发布忽略文件.npmignore
     *  9. npm publish发布组件包
     *   *   *  npm set registry=https://registry.npmjs.org
             *  npm install -g https://tls-test.npmjs.com/tls-test-1.0.0.tgz
             *  npm login
             *  npm publish
     *  10. 发布中遇到的问题及解决
     *   *   *  提示：403 Forbidden，...，You do not have permission
             *  提示：... must use TLS 1.2 or higher 错误
             *  lib中没有.css文件
     *  11. 项目中引用
     *   *   *  npm install cuclife
             *  main.js中设置
             *  页面中调用

### 1. 新建vue项目 ###

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

##### 全局安装vue-cli #####

> npm install -g @vue/cli

##### 创建一个vue项目 #####

> vue create cuclife

### 2. 修改添加文件夹 ###

![在这里插入图片描述][2da8a8adc7674d1aaba1430e130d7a48.png_pic_center]  
这一部分参考了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中 ###

![在这里插入图片描述][c6dcebde94e14f56bcb6371bb088d41f.png_pic_center]

##### ① 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文件夹，目录结构如下  
![在这里插入图片描述][86f3443ac06849ea83e712e30149e403.png_pic_center]

### 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：xx@qq.com  
OTP一次性授权密码，请参考另外一篇文章 npm 2FA授权的过程

##### npm publish #####

![在这里插入图片描述][e296409c2957446ab17320e14579ae64.png_pic_center]

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

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

![在这里插入图片描述][79ace6371df44899a2ddb5c8b41abe96.png_pic_center]  
解决办法： 原先设定的组件为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'

##### 页面中调用 #####

[2da8a8adc7674d1aaba1430e130d7a48.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/fa7d4d0bc76c4d21a2e2258bcf672387.png
[c6dcebde94e14f56bcb6371bb088d41f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/77a47f6847a44fed9ebf29bebf6d5e57.png
[86f3443ac06849ea83e712e30149e403.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a8741113a5e24e9bad14a0555b475f63.png
[e296409c2957446ab17320e14579ae64.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a5d6c25fc165443588ebaf154b00a42b.png
[79ace6371df44899a2ddb5c8b41abe96.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/881d8317ae2345878917d43528160ed5.png