npm包 - 发布vue组件

一. 环境准备

npm install -g @vue/cli

二. 创建项目

vue create vue-page-card-drag

本文使用vue2

三. 开发组件/加入组件

可以将已经编写好的组件移动到components目录下，或者新建一个vue组件，步骤是一样的。
例如我这里新建了一个HelloWorld.vue组件，需要注意的是，组件必须有name，这将会是用户使用的组件名称

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

<style scoped>
.hello {
  width: 200px;
  height: 150px;
  border: 1px solid red;
}
</style>

然后修改App.vue

<template>
  <div id="app">
    <HelloWorld msg="App pp pack" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

<style scoped>
</style>

运行 npm run serve

在src文件夹下新建index.js文件

import HellowWorld from "@/components/HellowWorld.vue";

const components = [HellowWorld];

const install = (Vue, options) => {
  if (install.installed) return;
  install.installed = true;
  components.forEach((component) => {
    Vue.component(component.name, component);
  });
};
// 如果是直接引入的vue.js方式，则会挂到window下
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}
export default {
  // 使用Vue.use必须具有install方法
  install,
  ...components,
};

修改配置文件

将项目根目录下的package.json文件：

 scripts修改start和build命令：

"scripts": {
    "serve": "vue-cli-service serve",
    "start": "vue-cli-service build --target lib --name vue-link-demo --dest lib src/index.js --watch",
    "build": "vue-cli-service build --target lib --name vue-link-demo --dest lib src/index.js",
    "build:app": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

引用：https://blog.csdn.net/lingliu0824/article/details/125764527