Vue中的UI组件发布至npm流程

本文提供的方式是将组件直接引入，不需要使用Vue.use()，即没有给组件添加install方法。

步骤一

注册npm账号，用于发布组件。

// 注册后
npm adduser // 添加用户（填写注册的用户名，密码，邮箱）
npm whoami // 查看当前注册的用户

附：

注册npm需要确认邮箱，邮箱确认后需要重新登录npm，否则会一直提示邮箱未确认。

步骤二

构建一个vue项目

vue init webpack-simple my-ui

// 修改package.json
"name": "my-ui",
"main": "index.js",
"private": false,
"repository": {
	"type": "git",
    "url": "https://github.com/.../.git"
},

添加组件信息，目录结构如下图：

// index.js(将需要使用的组件导出)
import Test from './src/components/Test'
export {
  Test
}

// components/Test.vue
<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      msg: 'this is a test for my-ui'
    }
  }
}
</script>
<style scoped>
</style>

步骤三

将项目上传至github（原因：在使用npm install 将从github上下载）。

步骤四

发布：

npm login // 登录

/**如果登录发现以下信息：
Logged in as ... on https://registry.npm.taobao.org/.
需要修改当前的镜像：
输入：npm config set registry https://registry.npmjs.org/
*/

npm publish // 发布至npm

安装

npm i -d my-ui

// 使用
...
<test></test>
...
import { Test } from 'my-ui'
export default {
	components: {
		Test
	}
}

附：

1.修改后重新上传至npm时需要修改package.json中的version字段，否则会上传失败。
2.每次修改后需要重新将代码上传至github上。