如何使用Vue-cli4.5.x创建Vue3.0多组件并发布到npm(完整教程）

闭坑教程开始：

1、安装vue-cli的最新版本，或者用 npm view @vue/cli versions 看看自己想要的版本安装。

npm i @vue/cli -g

2、创建自己的工程

vue create my-project

在空工程里，基于vue2.x的项目和vue3.x最大的区别就在于一个是new Vue，一个是createAPP的方法。在这里我们选择vue3.x.x和使用独立的配置文件，因为后面我们使用vue.config.js，其他的按照自己的需要选择。

3、配置工程目录：

        将src改为examples，创建packages文件夹用来放自己的组件代码，根目录创建vue.config.js最后目录结构如下：

4、配置package.json，需要注意一下几点，我标注到注释里：

{
  "name": "vue3-scrollbar", //不能和现有npm项目重名，你可以去npm官方搜索看看
  "version": "0.1.9",
  "private": false, //这里必须是false，否则无法发布到npm
  "author": {
    "name": "Your Name",
    "email": "youremail@qq.com"
  },
  "main": "lib/component.umd",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name component --dest lib packages/index.js" //这行比较重要，别人使用你的插件就是引用这个库里的内容来启动
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.1.4", //这个需要安装一下，用来生成lib库
  }
}

5、如果你要在你的examples里给别人一个可以看的demo，那就需要配置vue.config.js，同时修改examples里的main.js

//vue.config.js

module.exports = {
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html',
    },
  },
};

//examples/main.js

import { createApp } from 'vue';
import App from './App.vue';

import mycomp from '../packages/index';

createApp(App)
  .use(mycomp)
  .mount('#app');

6、编写组件代码，首先在packages里新建index.js文件，我这里给大家提供的是组件kit的方案，如果你只是写一个单一功能组件，可以自行修改我的代码：

import my-first-comp from './my-first-comp/index';
import my-second-comp from './my-second-comp/index';

const components = [my-first-comp, my-second-comp];

const install = function(Vue) {
  if (install.installed) return;
  install.installed = true;
  components.map((component) => {
    Vue.component(component.name, component);
  });
};

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  my-first-comp,
  my-second-comp
};

 然后再packages里建立my-first-comp和my-second-comp的文件夹，里面都新建index.js和对应的first.vue、second.vue文件，下面我只给出一个例子：

//index.js

import my-first-comp from './first'; //这个first，就是指的同目录下的first.vue文件
my-first-comp.install = (Vue) => Vue.component(my-first-comp.name, my-first-comp); //注意这里几个地方都是你的组件名
export default my-first-comp; //这里也是

//first.vue
<template>
    <div class="">My first vue3.0 component</div>
</template>
<script>
export default{
    name: 'my-first-comp'  //这个非常重要，就是未来你放到其他项目中，组件标签的名字，比如：<my-first-comp></my-first-comp>
}
</script>

7、回到刚才的package.json里，在默认基础上不是添加了一个lib命令？那么我们在发布到npm前，需要生成一下lib库："npm run lib"，这样就在根目录下生成了一个lib文件夹，里面是插件启动代码，我们的main参数指向的，就是这个里面的umd文件。如果报错，看看自己的DevDependencies里有没有@vue/compiler-sfc。

好了，一切搞定！

这就是一个最简单的使用vue-cli4.5创建Vue3.0插件的方法，如何发布到npm上呢？网上有的是教程，你去搜索下吧，无非就是注册然后npm publish，非常简单，可能唯一需要注意的是一些人要把npm源从taobao换成官方npm源。

好了，试试吧，我的第一个vue3插件叫vue3-scrollbar，欢迎大家试用哟