vue npm组件制作方式
参考资料：
https://www.cnblogs.com/max-tlp/p/9338855.html
https://segmentfault.com/a/1190000018782716
前言，最近负责vue组件，开始只是零碎的，但渐渐的多了起来，所以考虑做一套组件库发npm上，但是查看资料，基本都是缺胳膊少腿，没有一个是跑完全部流程的demo，所以自己参考资料以后做了一套上传、检测和使用的笔记供需要的参考。
（备注：还是不清楚的可以查看视频教程。地址：）
标题：npm 如何发布和使用自定义组件
1. 创建组件
（1）搭建简单版项目
vue init webpack-simple
（2）安装依赖，运行项目
npm install
npm run dev
（3）创建目录及文件，这里我就只创建两个组件，分别是table和table-col，目录结构如下
index.js：
// 抛出组件
import xTable from './x-table.vue'; // 对应组件文件
xTable.install = Vue => Vue.component(xTable.name, xTable);// .name就是开始说的vue文件暴露出来的name名，ldcPagination整个组件
export default xTable
x-table.vue 和 x-table-col.vue 写入自己的组件代码
demo代码下载位置：https://download.csdn.net/download/weixin_35773751/14020487
lib 同级 index.js 文件导出全部组件：
// 导入所有组件
import xTable from './table/index.js'
import xTableCol from './table-col/index.js'
const components = [xTable, xTableCol]
const install = function(vue) {
if (install.installed) return; // 已安装
components.map((component) => {
vue.component(component.name, component); //component.name 此处使用到组件vue文件中的 name 属性
});
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
};
export default {
install,
xTable,
xTableCol
}
修改配置文件 webpack.config.js：
// ...
const NODE_ENV = process.env.NODE_ENV;
// 根据不同的执行环境配置不同的入口
entry: NODE_ENV == 'development' ? './src/main.js' : './src/lib/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js'
filename: "npm-zujiandemo.js", // 这里是打包后的文件名
library: "npm-zujiandemo", // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // 指定输出格式
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
修改 package.json 文件:
"private": false,
"main": "dist/npm-zujiandemo.js",
为方便组件本地测试，你还需要改一下index.html文件：
<div id="app"></div>
<script src="/dist/npm-zujiandemo.js"></script>
好了，打包
npm run build
如果没有报错，那就制作压缩插件包测试
npm pack
产生一个压缩文件：
复制文件路径，使用npm命令安装到测试vue-demo上
npm install 组件项目打包后的本地绝对路径和文件全名
确认安装好组件：
引入插件：
import npmZujiandemo from 'npm-zujiandemo'
Vue.use(npmZujiandemo)
最后，测试模块上测试组件效果
ok，一个完整并测试好的组件完成了。
2. 上传组件
（1）申请npm账号：https://www.npmjs.com/
（2）进入组件目录，并登陆组件
（3）确定上传组件：
npm publish // 进行发布
3. 删除包
npm unpublish --force 包名
4. npm登陆报账号密码错误
解决办法：需要删除本地的~/.npmrc文件
原因：https://segmentfault.com/q/1010000038738684
