vue-cli3自定义组件发布npm包

创建项目

使用vue create xxx命令创建一个default类型的项目

修改目录

• 把src 改为 examples
• 添加一个新目录 packages
  

修改配置

• 添加vue.config.js 并修改为：
  

开发组件

1. 在packages下创建progress目录和index.js文件，progress目录下创建index.js和main.vue

2. main.vue中编写组件代码，注意：组件的name一定要写，将来是使用时的标签名(我这里是GradientProgress)

3. progress中的inde.js文件内容如下：

import progress from './main.vue'

progress.install = function(Vue){
	Vue.component(progress.name,progress)
}
export default progress

4. packages中的index.js文件内容如下：

import progress from './progress/index'
const components = [
	progress
]

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

export default{
	install,
	...components
}

---

到这里开发就完成了，接下来可以先在本地引入测试一下，在本地examples下的main.js中：

import GradientProgress from '../packages/index'
Vue.use(GradientProgress)

在App.vue中

<GradientProgress ...></GradientProgress>

如果可以正常使用那就可以发布啦~~~

---

发布的准备工作

1. 首先先要打包，在package.json的scripts中添加lib命令：

主要需要四个参数：
* target: 默认为构建应用，改为 lib 即可启用构建库模式
* name: 输出文件名
* dest: 输出目录，默认为 dist，这里我们改为** lib**
* entry: 入口文件路径，默认为 src/App.vue，这里改为 packages/index.js

"lib":"vue-cli-service build --target lib --name gradient-progress --dest lib packages/index.js"

2. 执行npm run lib命令，编译组件，完成后会多一个lib文件夹

3. 准备发布，在package.json中添加一些组件信息：
   name: 包名，该名不能和已有的名称冲突；*
   version: 版本号，不能和历史版本号相同；*
   description: 简介；
   main: 入口文件，应指向编译后的包文件；(lib/xxx.umd.min.js) *
   keyword：关键字，以空格分割；
   author：作者；
   private：是否私有，需要修改为 false 才能发布到 npm；*
   license：开源协议。

   以下是我的配置：
   

4. 添加一个.npmignore文件，可以把不需要上传的文件忽略掉，需要上传的只有lib,package.json,ReadMe.md
   

发布到npm

1. 首先需要先注册一个npm账号，可以直接在npmjs.com官网注册，也可以使用命令注册；
2. 第一次发布需要先登录，使用命令npm login,输入用户名，密码，邮箱
3. 使用npm publish 发布，注意：更新内容时记得更改package.json的版本号

---

使用

1. npm install xxxx
2. main.js中全局引入
3. 组件中使用

---

ps:这个流程走下来发现局部使用时有问题，会报错

还请路过的大佬指教一下，不胜感激~~~