前言：

目录：

一、将组件上传到NPM网站

1、搭建项目结构

使用vue-cli脚手架工具搭建好项目。在此不做工具的使用教程，请自行学习

2、写好自己的组件

项目搭建完成以后，就可以开始写自己的组件

项目目录如下，仅供参考

components：封装组件的文件夹

examples：组件本地测试文件夹

3、修改配置文件

3.1、webpack.base.conf.js文件下修改文件入口

entry：修改打包的入口文件

3.2、webpack.prod.conf.js文件下修改相关配置

output：修改输出文件到 dist下，生成文件名为yige-my-plugin.min.js

library：指定的就是你使用require时的模块名，这里便是require(“yige-my-plugin”)

libraryTarget：会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的

umdNamedDefine：会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define

3.3、修改css文件的生成名字

css文件名称修改成对于的名字

注释掉 HtmlWebpackPlugin模块，避免打包的时候生成html文件

3.4、修改package.json 文件

name：npm install 时安装的名字，并且不能与NPM上的重复

npm publish报错403：You do not have permission to publish “my-plugin”. Are you logged in as the correct user?

原因：所要publish的包的name和npmjs网上已经发布的包的名字重复，所以收你没有权限发布这个名字的包。（简单解释就是你想要的名字被别人抢先注册了）

解决方法：找到package.json文件，把name的值换掉，直到不报错为止

private:设置为false，因为npm都是公开的

main：入口地址

4、执行build命令

npm run build

5、NPM账号注册

到NPM官网注册账号，如果已有账号则跳过此步骤

6、执行npm login登陆账号

输入你的账号和密码，并验证邮箱地址，登陆成功后则可以发布到NPM网站了

7、发布到npm官网

npm publish --access public
看到如下提示以后，表明上传成功

二、NPM组件私有化

如果不想发布到NPM上，而仅供内部使用，可以执行如下命令

​

三、参考资料

参考项目：https://gitee.com/mr_fujing/my-plugin

参考链接
https://blog.csdn.net/mrchengzp/article/details/78358994
https://blog.csdn.net/y121500062/article/details/80925856