初始化

在空目录下执行：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
发布长时间没反应？试试手机开个热点！

我发布的组件

最后

以上就是温柔紫菜最近收集整理的关于教你如何创建并发布一个打包后的npm组件初始化开始发布的全部内容，更多相关教你如何创建并发布一个打包后内容请搜索靠谱客的其他文章。