教你如何创建并发布一个打包后的npm组件

文中所有的 “执行” 除 初始化 外均为在新建的项目路径执行，即初始化完成后生成的目录

初始化

在空目录下执行：vue init webpack-simple [name]

得到如下结构：

开始

1.（可选）删除App.vue中无用内容，此文件不影响打包结果，可用于测试自己的组件。

2.（可选）安装element-ui
执行：npm i element-ui
然后在main.js中注册：
代码放在new Vue之前

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3.修改webpack.config.js

此操作可以区分打包和调试的入口

4.新建index.js（上一步设置的入口)

放出自己的组件

5.修改打包后的文件名：

6.配置npm install 后 5 中的入口

版本信息version自己修改，每次发布需要比上次大

7.编写说明

8.修改调试入口

9.放入自己的组件

路径与4中index.js中匹配.

10.编写发布时忽略的文件

.*
*.md
*.yml
build/
node_modules/
static/
/index.html
config/
src/
test/
gulpfile.js
/index.js
/webpack.config.js

(以上内容不会上传)

11.(可选）通过app.vue测试自己组件

执行：npm run dev

12.打包成.js文件
不打包.map

执行：npm run build

13.静态文件（图片，静态数据）问题
打包成js后暂未找到好用的静态资源引用方式，现在提供两种方式
对小的图片可以使用以下方式打包成base64：
1.执行 npm install url-loader

以上组合会将1m以内png jpg gif svg编译成base64
数据：json数据使用require
let data=require("*.json")
此方法可正常使用，但数据量较大时会导致打包后的js文件太大
大量数据目前我采用的方式是：上传public，让用户自己赋值
如下：

（region-selection为我发布的组件名）

发布

1.注册账号，进npm官网注册账号，需要邮件激活。邮件需要在电脑网页打开。
2.执行：npm login；按提示输入用户名，密码，邮箱
3.执行：npm publish
4.（可选）撤销发布 npm unpublish --force
注意事项：
package.json中的name为你要发布的组件名，不能和现有组件重复；
版本控制：3和4中的命令配合package.json中的version即可完成；
如想要取消1.0.3版本的发布：先修改package.json中的version为1.0.3然后执行npm unpublish
更新则将版本号调高，再执行npm publish
发布长时间没反应？试试手机开个热点！

我发布的组件