记录：封装Vue组件并发布到npm.js

1、在vue项目中写一个组件（保证组件能正常使用）

<template>
  <div>
    <div>{{ text }}</div>
  </div>
</template>
<script>
export default {
  name: "TestUi",
  props: {
    text: {
      type: String,
      default: () => '我是文本'
    }
  },

2、在组件同级目录下创建index.js文件，内容如下：

 3、打包npm包配置,在package.json中配置打包脚本

"buildnpm": "vue-cli-service build --target lib ./src/myComponents/index.js --name test-ui --dest test-ui"

–target lib： 启动文件的路径
–name：打包后生成的文件名
–dest： 打包后生成的文件夹名

4、执行命令 npm run buildnpm, 会生成test-ui的文件夹，里面有打包好的各种文件

 npm run buildnpm

 5、进入test-ui文件夹，执行 npm init -y 生成局部的package.json，自己定义组件库名称 name，版本号 version（每次修改需更新版本号）

npm init -y

6、修改源，如果之前有修改过npm的源需要改回来

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

7、在src/test-ui目录里 执行 npm publish 推送，如果没有配置过用户会提示你进行用户密码等校验；或者提前输入 npm adduser 配置用户信息,配置完继续执行npm publish

npm publish

8、推送成功后就可以去npm仓库去看自己上传的组件了， 直接搜索组件名即可,比如

9、使用：

npm install testhuanhuan-ui

在main.js中引入

import TestUi from 'testhuanhuan-ui'
Vue.use(TestUi )

在界面中

<TestUi text="我是测试文本" />