vue封装自定义组件并上传到npm

一时失言乱红尘 2022-12-29 09:56 266阅读 0赞

## **相关资料** ##

*  [从0到1教你搭建前端团队的组件系统（高级进阶必备）][0_1]
 *  [一张图教你快速玩转vue-cli3][vue-cli3]
 *  [vue项目实战经验汇总][vue]
 *  [手把手教你开发vue组件库][vue 1]

*  ## 使用vue-cli3搭建团队的组件库并发布到npm ##

### **1.安装vue-cli3并创建一个项目** ###

首先我们先安装开发必要的工具集,并创建一个项目:

yarn global add @vue/cli
    // 创建项目
    vue create vui

初始化成功后的项目目录如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70][]

我们将src重命名为examples, 并添加packages目录,用来存放我们的自定义组件. 但是cli默认会启动src下的服务,如果目录名变了,我们需要手动修改配置,vue-cli3中提供自定义打包配置项目的文件,我们只需要手动创建vue.config.js即可.我们具体修改如下:

module.exports = {
      pages: {
        index: {
          entry: 'examples/main.js',
          template: 'public/index.html',
          filename: 'index.html'
        }
      },
      // 扩展 webpack 配置，使 packages 加入编译
      chainWebpack: config => {
        config.module
          .rule('js')
          .include
            .add('/packages')
            .end()
          .use('babel')
            .loader('babel-loader')
      }
    }

修改入口文件地址为examples下的main.js,其次将packages加入打包编译任务中.

### **2.编写组件代码** ###

首先我们拿一个Button组件来示范，这里只实现一个比较简单的组件，如果大家想了解更加详细的组件设计方法和思路，可以参考笔者的组件设计相关的文章。首先我们先在packages目录下新建一个Button目录，Button目录下新建src目录，再在src目录下新建index.vue文件，然后src文件夹下index.vue里存放组件的源代码如下：

<template>
      <div class="l-button">
        <slot></slot>
      </div>
    </template>
    
    <script>
    export default {
      name: 'l-button',
      props: {
        type: String
      }
    }
    </script>
    
    <style scoped>
      .l-button {
          display: block;
          width: 100%;
          height: 50px;
          line-height: 50px;
          font-size: 18px;
          margin: 16px 0;
          padding: 3px 6px;
          background: green;
          color: #fff;
          box-sizing: border-box;
          border-radius: 4px;
      }
    </style>

我们在Button目录下新建index.js,在index.js里编写如下代码来作为vue的组件安装：

// 导入组件，组件必须声明 name
    import LButton from './src'
    // 为组件提供 install 安装方法，供按需引入
    LButton.install = function (Vue) {
      Vue.component(LButton.name, LButton)
    }
    // 导出组件
    export default LButton

Button的组件结构如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 1][]

接下来我们新建src目录，在src目录下新建index.js的入口文件，导入组件并安装导出：

// 导入button组件
    import LButton from './Button'
    
    // 组件列表
    const components = [
      LButton
    ]
    
    // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
    const install = function (Vue) {
      // 判断是否安装
      if (install.installed) return
      // 遍历注册全局组件
      components.map(component => Vue.component(component.name, component))
    }
    
    // 判断是否是直接引入文件
    if (typeof window !== 'undefined' && window.Vue) {
      install(window.Vue)
    }
    
    export default {
      // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
      install,
      // 以下是具体的组件列表
      LButton
    }

### **3.测试代码** ###

我们要想看到自己写的组件效果，可以将组件导入到examples目录下的main.js中，其本质就是一个项目的开发目录，我们只需要按照如下方式导入即可：

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    // 导入组件库
    import ljtui from '../src'
    // 注册组件库
    Vue.use(ljtui)
    
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')

这种方式是全局导入，至于按需导入，完全可以采用element的方式来配置，对于业务组件来说，一般项目中都是使用的到，所以全局导入比较合适，作为UI库来说，按需导入可能更适合。

接下来我们就可以在项目的Home.vue中使用我们的组件了：

<template>
      <div class="main">
        <img alt="Vue logo" src="../assets/logo.png">
        <l-button type="primary">立即购买</l-button>
      </div>
    </template>
    <script>
    export default {
      name: 'App',
      components: {
        
      }
    }
    </script>
    <style>
    .main {
    }
    </style>

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 2][]

### **4.配置package.json文件** ###

作为一个组件库,我们必须按照npm的发包规则来编写我们的package.json, 我们先来解决组件库打包的问题,首先我们需要让脚手架编译我们的组件代码,并输出到指定目录下,我们按照发包规范一般会输出到lib目录下,代码如下:

{
      "name": "ljtui",
      "version": "0.1.2",
      "main": "src/index.js",
      "private": false,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint --fix",
        "lib": "vue-cli-service build --target lib --name ljtui --dest lib src/index.js"
      },
      "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^2.6.11",
        "vue-router": "^3.2.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-service": "~4.5.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "sass": "^1.26.5",
        "sass-loader": "^8.0.2",
        "vue-template-compiler": "^2.6.11"
      }
    }

我们的lib脚本就是用来打包packages的组件代码到lib目录下,文件名为以--name指定的名称前缀开头,我们执行脚本会输出类似如下代码:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 3][]

其次我们需要编写package文件的description,keywords等,具体介绍如下:

*  description 组件库的描述文本
 *  keywords 组件库的关键词
 *  license 许可协议
 *  repository 组件库关联的git仓库地址
 *  homepage 组件库展示的首页地址
 *  main 组件库的主入口地址(在使用组件时引入的地址)
 *  private 声明组件库的私有性,如果要发布到npm公网上,需删除该属性或者设置为false
 *  publishConfig 用来设置npm发布的地址,这个配置作为团队内部的npm服务器来说非常关键,可以设置为私有的npm仓库

还有很多配置具体要看团队的要求和规范,这里就不一一举例了

*  ## npm发包的常用基础知识 ##

发布到npm的方法也很简单, 首先我们需要先注册去npm官网注册一个账号, 然后控制台登录即可,最后我们执行npm publish即可.具体流程如下:

// 本地编译组件库代码
    yarn lib
    // 登录
    npm login
    // 发布
    npm publish
    // 如果发布失败提示权限问题,请执行以下命令
    npm publish --access public

执行npm login之后会让你输入账号、密码、账号绑定邮箱这些，依次填写就好；

需要查看是否已经登录，执行npm who am i就好

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 4][]

接着执行npm publish时，可能会报如下错误：

82506@DESKTOP-DBUOBEC MINGW64 /d/work/test/ljtui (master)
    $ npm publish
    npm notice 
    npm notice package: ljtui@0.1.0
    npm notice === Tarball Contents ===
    npm notice 30B    .browserslistrc
    npm notice 194B   lib/ljtui.css
    npm notice 172B   lib/demo.html
    npm notice 613B   public/index.html
    npm notice 4.3kB  public/favicon.ico
    npm notice 351B   .eslintrc.js
    npm notice 73B    babel.config.js
    npm notice 262B   examples/router/index.js
    npm notice 249B   packages/Button/index.js
    npm notice 710B   packages/index.js
    npm notice 15.4kB lib/ljtui.common.js
    npm notice 15.8kB lib/ljtui.umd.js
    npm notice 3.8kB  lib/ljtui.umd.min.js
    npm notice 278B   examples/main.js
    npm notice 403B   vue.config.js
    npm notice 752B   package.json
    npm notice 16.1kB lib/ljtui.common.js.map
    npm notice 16.6kB lib/ljtui.umd.js.map
    npm notice 19.6kB lib/ljtui.umd.min.js.map
    npm notice 317B   README.md
    npm notice 6.8kB  examples/assets/logo.png
    npm notice 420B   examples/App.vue
    npm notice 261B   examples/views/Home.vue
    npm notice 492B   packages/Button/src/index.vue
    npm notice === Tarball Details ===
    npm notice name:          ljtui
    npm notice version:       0.1.0
    npm notice package size:  23.0 kB
    npm notice unpacked size: 104.1 kB
    npm notice shasum:        bfb1eb26bfadaa1f72285268d71f3dd36976397c
    npm notice integrity:     sha512-F3pSDogGLJ4BL[...]inwVWwLOWvz2Q==
    npm notice total files:   24
    npm notice
    npm ERR! code EPRIVATE
    npm ERR! This package has been marked as private
    npm ERR! Remove the 'private' field from the package.json to publish it.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\82506\AppData\Roaming\npm-cache\_logs\2020-12-22T02_58_13_575Z-debug.log

我刚遇到时查了好久，结果发现是我为了安装npm包更快速，将npm镜像地址设置为了淘宝镜像地址，但是发布npm包需要修改为npm地址，执行如下指令

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

设置成功后，重新执行npm install安装依赖，再执行上面的发布流程

结果发现还是报错

$ npm publish --access public
    npm notice
    npm notice package: ljtui@0.1.0
    npm notice === Tarball Contents ===
    npm notice 30B    .browserslistrc
    npm notice 194B   lib/ljtui.css
    npm notice 172B   lib/demo.html
    npm notice 613B   public/index.html
    npm notice 4.3kB  public/favicon.ico
    npm notice 351B   .eslintrc.js
    npm notice 73B    babel.config.js
    npm notice 262B   examples/router/index.js
    npm notice 249B   packages/Button/index.js
    npm notice 710B   packages/index.js
    npm notice 15.4kB lib/ljtui.common.js
    npm notice 15.8kB lib/ljtui.umd.js
    npm notice 3.8kB  lib/ljtui.umd.min.js
    npm notice 278B   examples/main.js
    npm notice 403B   vue.config.js
    npm notice 752B   package.json
    npm notice 16.1kB lib/ljtui.common.js.map
    npm notice 16.6kB lib/ljtui.umd.js.map
    $ npm publish --access public
    npm notice
    npm notice package: ljtui@0.1.0
    npm notice === Tarball Contents ===
    npm notice 30B    .browserslistrc
    npm notice 194B   lib/ljtui.css
    npm notice 172B   lib/demo.html
    npm notice 613B   public/index.html
    npm notice 4.3kB  public/favicon.ico
    npm notice 351B   .eslintrc.js
    npm notice 73B    babel.config.js
    npm notice 262B   examples/router/index.js
    npm notice 249B   packages/Button/index.js
    npm notice 710B   packages/index.js
    npm notice 15.4kB lib/ljtui.common.js
    npm notice 15.8kB lib/ljtui.umd.js
    npm notice 3.8kB  lib/ljtui.umd.min.js
    npm notice 278B   examples/main.js
    npm notice 403B   vue.config.js
    npm notice 752B   package.json
    npm notice 16.1kB lib/ljtui.common.js.map
    npm notice 16.6kB lib/ljtui.umd.js.map
    npm notice 19.6kB lib/ljtui.umd.min.js.map
    npm notice 317B   README.md
    npm notice 6.8kB  examples/assets/logo.png
    npm notice 420B   examples/App.vue
    npm notice 261B   examples/views/Home.vue
    npm notice 492B   packages/Button/src/index.vue
    npm notice === Tarball Details ===
    npm notice name:          ljtui
    npm notice version:       0.1.0
    npm notice package size:  23.0 kB
    npm notice unpacked size: 104.1 kB
    npm notice shasum:        41cdf9c4909116dc327c2ed2e7520b731e618b7d
    npm notice integrity:     sha512-qLMwviAdXXa0+[...]OTHh0DFz0DKXw==
    npm notice total files:   24
    npm notice
    npm ERR! code EPRIVATE
    npm ERR! This package has been marked as private
    npm ERR! Remove the 'private' field from the package.json to publish it.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\82506\AppData\Roaming\npm-cache\_logs\2020-12-22T03_07_35_597Z-debug.log

按照错误的大概意思，找到了package.json里面的"private": true，把这一属性删除或者改为false即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 5][]

再执行发布命令，就搞定了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 6][]

![20210409192942782.png][]

之后我们就可以通过如下方式使用了:

import ljtui from 'ljtui';
     
    import 'ljtui/lib/ljtui.css';
     
    Vue.use(ljtui);

关于npm相关的知识笔者在这里简单提一下,大家可以参考学习.

**1. .npmignore 配置文件**

.npmignore配置文件类似于 .gitignore 文件，如果没有 .npmignore，会使用.gitignore来取代他的功能。

**2. npm发包的版本管理**

npm的发包遵循语义化版本，一个版本号格式如下：Major.Minor.Patch，每一部分具体介绍如下:

*  Major 表示主版本号，做了不兼容的API修改时需要更新
 *  Minor 表示次版本号，做了向下兼容的功能性需求时需要更新
 *  Patch 表示修订号, 做了向下兼容的问题修正时需要更新

对应的npm也提供了脚本帮我们实现自动更新版本号，如下：

npm version patch
    npm version minor
    npm version major

[0_1]: https://mp.weixin.qq.com/s/yeXdZRh880e1tr5qaYxtfg
[vue-cli3]: http://mp.weixin.qq.com/s?__biz=MzU2Mzk1NzkwOA==&mid=2247483700&idx=1&sn=c588f93b56a1c72961d23e0c19830144&chksm=fc5318cfcb2491d93a947fa2a043e6715036e1c188170c6d24d36b7de88c3cd73defa51b6be2&scene=21#wechat_redirect
[vue]: http://mp.weixin.qq.com/s?__biz=MzU2Mzk1NzkwOA==&mid=2247484230&idx=1&sn=d380389dc9db924832f3c05b7142533d&chksm=fc531abdcb2493ab1c76d4dc3ca5ddf57a4b2c097067d2c368dfd143842238e77ecd83e2aa93&scene=21#wechat_redirect
[vue 1]: https://mp.weixin.qq.com/s/7piPzoSoaWMI88JwqG2lkw
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70]: /images/20221120/af053606d1574a18bb4bc7aac75484a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201222103229596.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201222104656725.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201222105131167.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201222105708743.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210409191607402.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201222111740430.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw,size_16,color_FFFFFF,t_70
[20210409192942782.png]: https://img-blog.csdnimg.cn/20210409192942782.png