创建项目

本地创建一个目录&执行初始化命令：

mkdir vue-componentcd vue-componentnpm init

安装依赖：

npm i rollupnpm i rollup-plugin-commonjsnpm i rollup-plugin-vuenpm i vue-template-compiler

在项目目录下面创建 src 目录并添加 index.js 文件和 vue-component.vue

vue-component.vue:

  1.   <template>
  2.       <div>
  3.         {{message}}
  4.       </div>
  5.   </template>
  6.   <script>
  7.   export default {
  8.       name: 'vue-component',
  9.       data() {
  10.           return {
  11.             message:'hello vue component & rollup!'
  12.           }
  13.       },
  14.   }
  15.   </script>
  16.   <style lang="less" scoped>

  18.   </style>
index.js:
  1.   import VueComponent from "./vue-component.vue"

  3.   export default {
  4.     install(Vue,options){
  5.       Vue.component("vue-component",VueComponent)
  6.     }
  7.   }
注：
  1. 这里注册的组件名字最好和项目名一致，以免别人或自己使用的时候混淆。
测试组件
vue serve ./src/vue-component.vue
注意上面的命令需要安装：
npm install -g @vue/cli-service-global
创建rollup.config.js文件：
  1.   import vue from 'rollup-plugin-vue'
  2.   import commonjs from 'rollup-plugin-commonjs';

  4.   export default {
  5.     input :"./src/index.js",
  6.     output:{
  7.       file:"./dist/index.cjs.js",
  8.       format:"cjs",
  9.     },
  10.     // ...
  11.     plugins: [
  12.       // ...
  13.       commonjs(),
  14.       vue(/* options */),
  15.     ],
  16.   } 
package.json添加到scripts：
"build": "rollup -c"
并且把main的字段值改为：
"main": "./dist/index.cjs.js"
构建
npm run build
在项目目录会多一个dist文件夹，里面包含index.cjs.js文件。
发布组件
发布到https://npmjs.com:
npm loginnpm publish
注：
  1. 确保有npmjs的账户，没有去注册一个
  2. 发布的项目名有可能被占用，修改后的项目名记得同步更改注册的组件名