使用vue创建一个组件并发布到NPM

最近做了一个公共的流程图组件，需要发布到公司自己的npm库，现在记录一下，以免下次忘记流程

创建项目

1、使用vue create flow-map命令行创建工程，选择框架版本

  我是用vue-cli创建的项目,大概样子长这样，（用的网上的图），我选择的是手动配置生成的，对应图中的第三项

2、构建组件

 3、在本地引用组件测试是否能够正常使用

4、正常能够使用之后，开始准备打包的工作了

准备发布工作

1、package下面新建一个index.js文件，便于将组件暴露出来，这样才能安装

// 引入自己封装的组件
import FlowMap from './FlowMap/FlowMap.vue' // 文件名为index可以省略
// 可以把封装的组件全部放在这个数组中
const coms  = [
	FlowMap
]
// 注册组件
const install = function (Vue) {
	coms .forEach((com) => {
		// name是给组件的名字
		Vue.component(com.name, com)
	})
}
// 将components中的所有组件定义为全局组件，在Vue.use的时候，install方法会被调用
export default install

 2、在package.json文件中添加一条指令，package。用的是vue-cli的构建方法

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "package": "vue-cli-service build --target lib ./src/package/index.js --name flow-map --dest flow-map"
  },

--target lib 关键字 指定打包的目录 

--name 打包后的文件名字

--dest 打包后的文件夹的名称

执行打包命令  npm run package,进行打包，打包后的文件目录如下

3、 在根目录下新建一个文件夹，这个文件夹是用来发布的。我的文件夹命名为package，将打包后生成的图片文件 img,.css文件，flow-map.umd.min.js等文件复制到package文件夹下

 4、使用cmd 进入到package文件夹（最好是用管理员身份）

cd D:\code\flowMap\flow-map\package

然后初始化package.json文件 用npm init  -y命令，配置好name、版本等

 最好新建一个README文件，用作说明，最终package文件夹结构如下

 发布

1、登录到npm库，先保证我的npm 源是我想发布的源路径

 2、执行npm login命令行，开始登录，要输入自己的Username 和Password和邮箱

3、登录完成之后执行，在需要发不到npm的文件夹下执行npm publish命令

 发布完成

如果需要删除包，则删除命令为 npm unpublish flow-map --force

进入npm库能找到发布的包

验证

在我的项目里面安装发布的包，npm install flow-map

在mian.js文件下面全局引用，样式也是需要单独引用

// main.js
import Vue from 'vue'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css'

//引入发布的包及样式
import 'flow-map/flow-map.css'
import FlowMap from 'flow-map'
Vue.use(FlowMap)

Vue.config.productionTip = false

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

然后在App.vue下面使用

 能够成功使用，证明发布的包是没问题的

ps:遇到的问题

1、最开始直接在打好的包里面发布，导致包很大，不能发布。最后查了很久，才知道要另外新建文件夹，将umd.min.js文件复制

2、如果是直接在包里面直接发布 发布不上去，因为里面包含cmd和umd格式的文件

3、有时候在本地能实现的click事件，发布之后不能点击；原来是不能用click.stop