Vue封装组件并发布npm

布满荆棘的人生 2022-11-10 01:12 221阅读 0赞

`install` `Vue`的插件必须提供一个公开方法`install`，该方法会在你使用该插件，

也就是 `Vue.use(yourPlugin)`时被调用。这样也就给`Vue`全局注入了你的所有的组件。

`你为什么要二次封装el组件?`

*  提供开发效率
 *  提供组件的复用性（组件逻辑较为复杂的时候，封装可以让下次复用更简单）

## 第 1 章：组件封装 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70]  
使用方法如下：

*  在项目 / main.js

import ui2010 from 'ui-2010'; // 引入结构
    import 'ui-2010/styles/ui2010.css'; // 引入样式
    Vue.use(ui2010);

*  demo.vue 页面

<template>
      <div class="">
        <h1>demo页面</h1>
        <field-set :tel="tel">
          <h1>向slot插槽，填充内容</h1>
        </field-set>
      </div>
    </template>
    
    <script type="text/javascript">
    export default {
      data () {
        return {
          tel: '13213214'
        }
      },
    
    }
    </script>
    
    <style scoped>
    </style>

### 1.1 定义组件 ###

`src/components/ui-2010/field-set.vue`

<template>
      <fieldset>
        <legend>2021的组件</legend>
        <h1>今天下大雨了</h1>
        <h2>{
       { msg }}</h2>
        <h2>
          <b class="telColor">{
       { tel }}</b>
        </h2>
        <slot></slot>
      </fieldset>
    </template>
    
    <script type="text/javascript">
    export default {
      name: 'field-set',
      data () {
        return {
          msg: '首次封装组件'
        }
      },
      props: {
        tel: {
          type: Number,
          default: () => {
            return 13245678492
          }
        }
      }
    }
    </script>
    
    <style scoped>
    .telColor {
      color: red;
    }
    </style>

### 1.2 构建install函数 ###

`src/ui-2010/index.js`

import fieldSet from '../components/ui-2021/field-set.vue'
    
    // Vue的插件模式需要暴露一个install的方法
    const install = (Vue) => { 
      Vue.component(fieldSet.name, fieldSet)
    }
    
    export default install;

### 1.3 在package.json配置打包路径 ###

模仿build打包命令：手动指定打包目录 和 打包的文件名称 `项目/package.json`

"scripts": { 
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build", // 将src目录下的所有内容进行打包
        "lint": "vue-cli-service lint",
        "ui-2010": "vue-cli-service build --target lib ./src/ui-2010/index.js --dest u2010 --name ui2010" // 指定打包路径、打包的名称
      },

*  `--target lib` 关键字 指定打包的目录
 *  `--name` 打包后的文件名字
 *  `--dest` 打包后的文件夹的名称

在 项目根目录运行命令：`npm run ui-2010` 或者 `yarn ui-2010`

接着你会发现：在项目 / 自动创建 `u2010文件夹`，如图：

![在这里插入图片描述][20210316004043714.png]

然后在项目/`新建packages文件夹`

拷贝 `u2010文件夹` 的文件：`xxx.umd.js` 和 `xxx.css` 放入 `新建的packages文件夹`

然后在`packages`路径下，运行命令：`npm init -y`

最后修改文件的命名，如下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70 1]

## 第 2 章：发布到 npm ##

### 2.1 到npm上注册一个账号 ###

### 2.2 将源切换成npm官方源 ###

nrm ls       如果没有nrm 使用 npm install nrm -g
    
    nrm use npm  将源切换成npm官方源

### 2.3 登录 ###

npm login     接着输入：用户名 密码  邮箱
    npm publish   发布到远程仓库(npm)上

### 2.4 删除远程仓库的包 ###

npx force-unpublish package-name '原因描述'

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70]: /images/20221023/aecef4773f9a4ec5b0a26db4301b9d6e.png
[20210316004043714.png]: /images/20221023/a618a78975084eb795c093a656df9d19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70 1]: /images/20221023/1a0d6b7afa4c4bb498082056c5bd4382.png