从零构建自己的npm包，并发布到npm

准备工作

1. 用vue-cli搭建一个项目。
2. 在npm上注册账号(账号、密码、邮箱)

创建组件

在components文件中创建自己的组件 field-sets.vue，内容如下：

<template>
  <fieldsets>
    <legend>我的组件</legend>
    <h1>今天好冷啊</h1>
    <h2>props:<b>{{tel}}</b></h2>
    <slot></slot>
  </fieldsets>
</template>

<script >
export default {
  name: 'field-sets',
  props: {
    tel: {
      type: Number,
      require: false,
      default: () => {
        return 18891911234
      }
    }
  }
}
</script>
<style lang="less" scoped>
.b{
  color: red;
}
</style>

在src下创建uiJs文件夹包含index.js文件，index.js内容如下

import filedSets from '../components/field-sets'
// import myButton from '../components/my-button'
// const components = [filedSets, myButton]
// vue的插件模式 需要暴露一个install的方法
const install = (Vue) => {
    Vue.component(filedSets.name, filedSets)
        // components.forEach(v => {
        //     Vue.component(v.name, v)
        // })
}
export default install

注意注释的地方为多组件写法

在package.json 文件中，脚本本添加

lib": "vue-cli-service build --target lib ./src/uiJs/index.js --dest uicommen --name ui"

在终端中运行 yarn lib, 完成后文件夹中会生成uicommen的文件夹

在根目录下创建packages文件夹，包含styles文件夹、index.js文件，并且在packages文件夹下初始化(npm init -y)package.json文件，内容如下

{
    "name": "my-ui-2022",
    "version": "1.0.2",
    "description": "增加按钮组件",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": ["vue", "js"],
    "author": "authorauthorauthor",
    "license": "ISC"
}

然后将刚才uicommen文件夹下面的ui.umd.min.js放入到packages中，重命名为index.js,将ui.css放入packages中的styles中

最后在packages中打开终端查看npm源 npm get registry(https://registry.npmjs.org/ 正常)，淘宝镜像或者其他的需要切换回来。

登录 npm(npm login),输入账号密码邮箱，邮箱收到验证码后在终端输入，最后再运行npm publish命令推送到npm上，等邮箱在收到一封完成的右键即可上传成功。

使用

1.main.js

npm i my-ui-2022
import myui2022 from "my-ui-2022"
const app = createApp(App)
app.use(myui2022)

2…vue文件中

<field-sets :tel="110"></field-sets>