编写组件，发布到npm并使用

项目目录

创建项目

vue create 项目名

代码部分

新建存放组件的目录

这里我起的是com，再里面书写组件
hello.vue

<template>
  <div>
    hello
  </div>
</template>
<script>
export default {
  name: "hello",
  data() {
    return {
   
    };
  },

};
</script>
<style scoped>

</style>

这里只写了hello来测试

index.js

import hello from "./src/com/hello.vue";//引入组件

const components = [
  hello,
  // ...如果还有的话继续添加
];
console.log(components);
const install = function(Vue) {
  components.map((component) => {
    Vue.component(component.name, component);
  });
};

/* 支持使用标签的方式引入 */
if (typeof window !== "undefined" && window.Vue) {
  install.use(window.Vue);
}

export default {
  install,
};

main.js 引入一下

import Vue from 'vue'
import App from './App.vue'
import hello from '../index'
Vue.config.productionTip = false
Vue.use(hello)

new Vue({
  render: h => h(App),
}).$mount('#app')

这时可以测试一下

app.vue直接使用

执行成功后开始配置打包

webpack.js

var path = require("path");
module.exports = {
  entry:process.env.NODE_ENV=='development'?'./src/main.js':'./src/com/hello.vue', //
  output: {
  // 修改打包出口，在最外级目录打包出一个 index.js 文件，我们 import 默认会指向这个文件
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: "hello.js",
    library: "hello", // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
    umdNamedDefine: true // // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
}

修改一下package.json文件

“private”: false,

npm publish

打包的时候我起的文件名无法通过 所以改了其他名字hhhzzz

在main.js里面引入

再把组件写入