- 如果登录的 NPM 账号没有验证邮箱，运行命令之后会报错
you must verify your email before publishing a new package，所以注册之后记得去邮箱里面验证一下，验证之后可以再次运行发布命令，如果还报这个错误可以重新登录一下NPM账号:
dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm publish npm notice npm notice 📦 dzmtest@1.0.0 ...... npm ERR! code E403 // 主要是这行错误 npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/dzmtest - you must verify your email before publishing a new package: https://www.npmjs.com/email-edit npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy. npm ERR! A complete log of this run can be found in: npm ERR! /Users/dengzemiao/.npm/_logs/2020-07-22T03_27_19_859Z-debug.log
- 如果出现这个错误，意思是需要修改
package.json中的version版本号，一般是版本已经存在，新项目发布应该不会报这个错误。
dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm publish npm notice npm notice 📦 dzmtest@1.0.0 ...... npm ERR! code E403 // 主要是这行错误 npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/dzmtest - You cannot publish over the previously published versions: 1.0.0. npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy. npm ERR! A complete log of this run can be found in: npm ERR! /Users/dengzemiao/.npm/_logs/2020-07-23T03_32_29_970Z-debug.log
You cannot publish over the previously published versions: 1.0.0.这个错误是版本已经存在，需要修改一个新版本号在上传，这种问题一般在后续版本迭代中出现，忘记修改版本号就直接提交。- 下面是
version字段版本格式（这里只是建议这么写，不在意可以随意）
1、版本格式：主版本号、次版本号、修订号 2、版本号递增规则如下：（例如：我原本的项目是 1.0.0 版本的话） 主版本号：当你做了不兼容的 API 修改，此情况版本应该为 1.0.1 次版本号：当你做了向下兼容的功能性新增，此情况版本应该为 1.1.0 修订号：当你做了向下兼容的问题修正。此情况版本应该为 2.0.0 3、通过 npm version <update_type> 自动改变版本 update_type 为 patch、minor,、major 其中之一，分别表示补丁，小改，大改。 例如: $ npm version minor v2.0.0
- 如果有这个错误，可以修改一下
package.json中的version为1.0.1版本，然后再次执行发布命令
{ "name": "dzmtest", "version": "1.0.1", }
- 再次执行发布命令
$ npm publish
dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm publish npm notice npm notice 📦 dzmtest@1.0.0 npm notice === Tarball Contents === npm notice 130B index.js npm notice 114B test.js npm notice 202B package.json npm notice === Tarball Details === npm notice name: dzmtest npm notice version: 1.0.0 npm notice package size: 471 B npm notice unpacked size: 446 B npm notice shasum: fc4453748f8b0ca687a2ddea8f650ab75b4c5bec npm notice integrity: sha512-V+RHefgSXWB/Q[...]Qm/FP3BNcaL9g== npm notice total files: 3 npm notice + dzmtest@1.0.0 dengzemiaodeMacBook-Pro:DZMTest dengzemiao$
- 这样就发布成功了！！！
五、使用刚发布的包
1)、创建一个vue项目，并运行起来。
$ vue create npm-test
2)、在新建的 npm-test 项目中导入 dzmtest 包，npm 命令使用介绍以及区别。
$ npm i dzmtest
dengzemiaodeMacBook-Pro:npm-test dengzemiao$ npm i dzmtest + dzmtest@1.0.0 added 1 package and audited 1170 packages in 6.872s 41 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
这样就导入成功了！！
之前在编写 NPM 项目的时候内部文件是这样的：
导入到其他项目之后文件内部是这样的，在 node_modules 文件目录下：
这样就很清楚明白该怎么去编写 NPM 项目了，它是直接整个导入进来了之前的 NPM 项目。
3)、导入成功之后，支持使用
需要在新建的 npm-test 项目里面找到 main.js 全局导入一下 dzmtest
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' // 如果不是很明白这两种导入方式，可自己百度一下 // JS是这样导入 import DZMTest from 'dzmtest' Vue.prototype.$dzmtest = DZMTest // 如果是自定义UI组件，就需要这样使用，这样就可以直接支持全局使用 // import DZMTest from 'dzmtest' // Vue.use(DZMTest) Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
导入成功之后，可以在任何页面中去使用 $dzmtest 这个属性了，这里是新建的项目，就直接在 Home 页面测试一下就行了
<template> <div class="home"> </div> </template> <script> export default { mounted () { this.$dzmtest.indexTest() } } </script>
然后运行项目就会输出成功了
$ npm run serve
上传自定义组件到 NPM 到这里就完成了！！！！！！
Vue 扩展内容
六、Vue 如何自定义 UI 组件上传并使用
1)、先看看 Vue 自定义全局UI组件 怎么编写
2)、根据上面文章写好插件之后，通过新建一个 npm 项目，将自定义组件 custom 文件里面的放到新建的 npm 项目中：
3)、index.js 导入方式介绍 (选其一即可，看自己需求调整)
- 方式一：
// 导入单个组件 import CustomView from './custom.vue' // Vue 直接导入 const Custom = { install: function (Vue) { Vue.component('Custom', CustomView) } } // 导出 export default Custom
- 方式二：
// 导入单个组件 import Test from './test/index.js' // 以数组的结构保存组件，便于遍历 const components = [ Test ] // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册 const install = function (Vue) { // 判断是否安装 if (install.installed) return install.installed = true // 遍历并注册全局组件 components.map(component => Vue.component(component.name, component)) } // 对于那些没有在应用中使用模块化系统的用户，他们往往将通过 <script> 标签引用你的插件，并期待插件无需调用 Vue.use() 便会自动安装 。 // 你可以在插件最后添加如下几行代码来实现自动安装： // 判断是否是直接引入文件，如果Vue是全局对象自动安装插件 if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } export default { // 导出的对象必须具有 install，才能被 Vue.use() 方法安装 install, // 组件列表 ...components }
4)、然后发布即可，使用也是跟 Vue 自定义全局UI组件 文件一样的使用 Vue.use() 进行使用，唯一区别就是可以删除原文件 custom 文件，并且通过 npm i <包名> 导入即可。
5)、Vue 自定义插件上传 NPM 到这也结束了！！！！
