npm上传vue组件

用vue也有一段时间了,是时候简单做几个组件了。

初始化

使用脚手架初始化一个vue项目:
vue init webpack-simple myComponent

修改目录结构

1
2
3
4
5
6
7
8
9
├── README.md
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── HelloWorld.vue // => 组件
│ ├── index.js // => 打包入口文件
│ └── main.js
└── webpack.config.js

index.js打包入口文件代码

1
2
3
4
5
import myComponent from './my-component.vue'
export default myComponent
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.component('my-component', myComponent)
}

修改webpack.config.js打包文件

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
entry: './src/index.js', // 打包入口文件修改
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'my-component.min.js', // 修改出口文件名
library: 'my-component', // 库的名称
libraryTarget: 'umd', // 支持CMD、AMD和全局window的导出方式
umdNamedDefine: true // 在UMD库中使用命名的AMD模块
},
}

修改pagkage.json文件

1
2
3
4
5
6
{
...
"main": "dist/my-component.min.js",
"private": false
...
}

打包&上传

npm run build打包文件

npm官网注册账号

使用npm login命令登录账号(ps:登陆后可以使用npm howami查看登录情况)

npm publish上传插件

npm unpublish删除插件
npm unpublish@1.0.0删除插件1.0.0版本
(ps:删除后24小时内禁止再次上传)

附赠

我的npm插件地址,目前上传了两个插件,喜欢的可以下载试试,有时间我会慢慢扩充组件库的

坚持原创技术分享,您的支持将鼓励我继续创作!