前言
现在前端开发基本离不开npm插件包，有的时候自己写了一个组件在多个项目中都有用到，简单粗暴的做法就是CV大法啦。不过这种不系统，不易维护的做法我们是不在这里讨论的。这里我以实际开发项目做的一个vue组件来陈述。
开发环境
vue-cli3.x+ （2.x的也差不多）
首先创建项目这个一张图描述了
创建项目
更改项目结构
其实呢改不改都无所谓的，只不过改了看上去更牛逼些。我们把src目录改成example模块，在根目录下新增一个packages目录。新增一个vue.config.js文件、新增一个.npmignore文件
目录结构
packages 目录说明
这里是存放我们要发布的组件，可能你要发布多个组件这里以组件名区分开，不过个人不建议把多个npm组件弄在一起，除非你是想做大工具库API，我个人推荐一个项目一个组件当然这个组件是独立的
packages结构
// package/vue-aliplay-player/index.js // 抛出 vue-aliplay-player
import vueAliplayer from './src/player.vue'
/**
* 预览做全局组件使用，按需加载组件可以不需要这个install
*/
vueAliplayer.install = function(vue) {
Vue.component(vueAliplayer.name, vueAliplayer)
}
export default vueAliplayer
// packages/index.js // 抛出所有组件，做多个组件使用
import vueAliplayer from './vue-aliplay-player'
const components = [
vueAliplayer
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) {
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
...components
}
打包前开发测试
按需加载
按需加载
全局：main.js
全局注册
重点 打包
根目录下的package.json scripts 新增一个命令
"lib": "vue-cli-service build --target lib --name vue-aliplay-player --dest lib packages/vue-aliplay-player/index.js"
新增命令
打包后的效果查看
npm run lib
会在根目录下多个lib文件
lib文件里面的内容
打包后测试调用
按需加载
按需加载
全局：main.js
全局注册
发布前调整
1、更改根目录的package.json 信息
package信息调整
2、.npmignore 过滤发布文件
.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
发布
注意： npm 源 一定要是 https://registry.npmjs.org/
查看源： npm config get registry
更改源： npm set registry https://registry.npmjs.org/
1、 npm login
2、 npm publish
总结 【多实践多学习】
1、npm发布vue组件包不难，甚至都可不基于vue构建项目（项目构建只是为了方便调试、构建、管理）， 只需如下结构
不是有vue项目构建
2、网上发布vue npm包的贴很多，但是大都是CV【真是坑爹】，或者是较老的用法还有就是没有讲到核心；
3、前端入门很快，进阶很难，别以为看了两篇教程就自以为功夫满级可以肉抗了。
