借助vue-sfc-rollup发布自己的npm包

首先创建一个vue项目 vue create proj，简单选择默认就可以

在components下面建立自己的组件文件   

eg:vueTestNpm.vue   

<template>
  <a :href="link" target="_blank">{{text}}</a>
</template>

<script>
export default {
  props:{
    link:{
      type:String,
      default:''
    },
    text:{
      type:String,
      default:''
    }
  }
}
</script>
<style scoped>
a{
  text-decoration: none;
  color: '#eee'
}
</style>

在app.vue中调用

<template>
  <div id="app">
    <vue-test-npm href="https://www.baidu.com" text="百度一下"></vue-test-npm>
  </div>
</template>

<script>
import vueTestNpm from './components/vueTestNpm.vue'

export default {
  name: 'App',
  components: {
    vueTestNpm
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

看到效果：

 重头戏：发布我们的组件

安装  vue-sfc-rollup 

在github上面可以搜索看到详细的方式，注意：安装的时候要全局安装而且小管理员身份，不然会报错。

npm install -g vue-sfc-rollup

接着打包我们的组件sfc-init

然后按照提示输入相关信息

sfc-init

如图所示：eg:

 接着我们看到打包的文件夹

进入文件夹目录

在终端输入npm i 初始化，

接着npm run serve运行起来

接在修改src下面vue-test-npm.vue，将之前的文件拷贝过来

 再修改serve.vue中调用

 npm run serve 运行起来效果

打包发布

可修改版本，起初可将修改为最小0.0.1，最好在name中加上独有的标志防止重名会导致上传失败

首先一般会都配置淘宝镜像，需要切回来

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

登录npm,按照提示输入相关信息

npm adduser

输入完后，输入以下命令，即可成功上传组件

npm publish

去自己的npm package查看是否成功

验证组件是否上传成功且可以使用

在某一个项目中eg:

npm i vue-test-npm-sheldon

引入使用完整代码

<template>
  <div id="app">
    <vue-test-npm-sheldon href="https://www.baidu.com" text="百度一下test"></vue-test-npm-sheldon>
  </div>
</template>

<script>
import vueTestNpmSheldon from 'vue-test-npm-sheldon'
export default {
  name: 'App',
  components: {
    vueTestNpmSheldon
  }
}
</script>

<style>

</style>

 成功使用，效果图如下：

撒花！！！！！！！！！！！ 

参考博主