Vue封装组件并发布npm

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

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

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

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

第 1 章：组件封装

使用方法如下：

• 在项目 / 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文件夹，如图：

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

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

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

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

第 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 '原因描述'