vue 插件发布到 npm 具体步骤详解

创建项目

1. 借助脚手架创建项目 vue init webpack ；
2. 在 src 创建 plugin 文件夹；
3. 在 plugin 文件夹自定义 button 和 msg 组件，；
4. 在 plugin 文件夹创建 index.js 文件，注册自定义组件；
5. 在 main.js 引入；
   
   
   

小编这里只做个简单的演示，实际工作中大家可根据需求自定义插件，到此插件封装步骤完成！

---

修改 package.json 的配置

{
    "name": "vue-component-start",
    "version": "0.1.0",
    "private": false,
    "description": "测试组件",
    "author": "aibujin",
    "email": "2230463263.com",
    "license": "MIT",
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lib": "vue-cli-service build --target lib --name vue-component-start --dest lib src/plugin/index.js"
    },
    "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^2.6.11"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^4.4.0",
        "@vue/cli-service": "^4.4.0",
        "vue-template-compiler": "^2.6.11"
    }
}

name: 组件名字
version: 版本号
private: 发布 npm 必须设置为false
scripts.lib: 打包命令

---

开始打包

npm run lib

打包成功之后会生成一个 lib 文件夹

---

发布 npm

如果没有 npm 账号可以先注册

官网地址：https://www.npmjs.com/

注意： 注册完成之后需要到邮箱验证，否者后面发布会不成功

打开 vscode 直接登录 npm

npm login

如果登录报错，是你在 .npmrc 中配置了 registry，登录时必须切回 npm.js 的源

npm ERR! code E500
npm ERR! 500 Internal Server Error - PUT https://registry.npm.taobao.org/-/user/org.couchdb.user:xxx

解决办法：

1. 配置npm包地址

npm config set registry https://registry.npmjs.org/

2. 检测地址

curl https://registry.npmjs.org/

3. 清除 npm 缓存

npm cache clean --force

然后重新登录

发布 npm 官网

npm publish 

发布成功之后，登录 npm 官网 就可以看到刚刚发布的插件

如果需要添加一下组件的说明，demo等，可以写在 README.md 文件中；

eg：

至此，封装 vue插件 并发布到 npm 就结束了，有需要的小伙伴可以参考一下。。。。