😶 NPM 是随同 NodeJS 一起安装的 javascript 包管理工具，能解决 NodeJS 代码部署上的很多问题
发布前的准备
注册一个 npm 账号
前往 NPM 官网进行注册
初始化项目
这里用的是webpack-simple,可以理解为精简版的vue-cli。
如果没有全局安装 vue 的话，需要先安装
cnpm i -g @vue/cli-init
然后再初始化 vue 项目，我们要写的是一个简单的 vue 组件，不需要依赖那么多而庞大的配置，所以，这里我们用简介版本的 webapck 配置模板
vue init webpack-simple 项目名（最好去npm官网搜一下，防止重复)
创建之后的基本目录
创建 vue 插件并发布
举个例子：封装一个返回顶部的小组件
既然是封装组件，那我们在 src 下面创建一个 plugins 文件放我们的插件，但是考虑到万一要写很多个的情况，当前组件的相关文件下创建一个 returnTop 文件夹，下面创建 returnTop.vue 和 index.js 先，结构变成下面这样：
切换到当前根目录，安装依赖，启动项目
cnpm installcnpm run dev
示例代码
returnTop.vue
<template><div class="right-return-top"><div class="return-top" @click="returnTop" v-show="topShow"><imgsrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAAHdbkFIAAAACXBIWXMAAAsSAAALEgHS3X78AAADGUlEQVR4nO2aT2vTYBzHv0/S9aKw7rJz34E5mP6zrRmOjeFgKozBcFAZwkAc6sHrttNgUBBPA5HNi5eBsJPX1k1XT9p3UF/B+g4iadI2ydI0T9P0SfX3hZDmeZI8n9/3efL8acJ0XYefJN/cICckHEfLGR3zCWB+BqjWWSfNYHBsT/O6/diZuaSamW/KvZPCRzEBH5wnPMnp2Ck5y3SE+TiruH2ZAOTQIkKXMM03WM4onYoz5K48m/4BE6kdxOEGCc/UBVXHLQmd7bYM6/cBDmv77lMjrsaNvI7t4u/RbrCaNdDmANzBbnnwTW6MDsam3W3rDzOp3vHLku55XpBec5ioJY6hIYVV6AgIYOoBvLvDQTK6ySQDZhgc+6TkTvPsOr005U/BRl7BVsG3ux6m0RxYzSpIsl+uKmji+EKJFmBBtRc8hy+Ndi/PmMCZbaCJaj04yKBxZuC2pKa4r/HZqCsmAOEA1AgJgAAIgACmaFasqftIsL3+NMxrdmz9PrL+mw0gGoymvBFuFtqo3EuJAVjPG1PyWQDXeF4cGWI0gLVct/A/Vso1XpRGguAHWMl2C2/i8480gGc9iNdlbgg+gMVMv/CzK3P1c/r91AHx9j4XRHAATVV6hZ83nEuvD5d2iHc8AHxLqQdq2jf/VenGCxhamhEAARAAAQyT8J5QtITXgGiRATFgECoyIAYMQkUGxIBBqMiAGDAIFd9L+6DS1DQY0pAZIBs2W3vZtpdcx55pjmtbOKy1xo0ajQFABcDemO95ACDQlxA8orVADBiESqwBm4U0tgqh/t4OKzGPwHpegYQaZDZrdXBNyEzDx8t2gKvHqskasJZTIFuBe48CphHHFxMzYjIGrGT7gfeHQTNYGY8gsxPXMGjmvf8WuRHRGrCYMQOXbIF3gzu7cga3XaxAwolrHtCExDRU65EZEY0BxqsUZqtxyRb4ecM/mJ1SBbLNiO61Rxxfw3EouhZgfOYnsxpktDq1+PUnXy3ulk0jJPYJ1XolGkiaCNFEiAyIAYNQkQExYBAqMiAGDEJFBsSAQaj+bwMA/AVQMPelPAquSAAAAABJRU5ErkJggg=="/></div></div>
</template>
<script>export default {name: "ToolReturnTop", //决定引用组件的名称data() {return {scroll: 0,topShow: false,};},mounted() {window.addEventListener("scroll", this.scrolls);},methods: {returnTop() {window.scroll(0, 0);},scrolls() {this.scroll =document.documentElement &&document.documentElement.scrollTop + document.body.scrollTop;if (this.scroll > window.innerHeight / 2) {this.topShow = true;} else {this.topShow = false;}},},};
</script>
<style scoped>/* 返回顶部 */.right-return-top {position: fixed;left: 0;right: 0;bottom: 20px;z-index: 9;margin: auto;}/* .return-top {width: 0.63rem;height: 0.63rem;z-index: 9;margin: 0 auto;background-color: #f9f9f9;box-shadow: 0 0.01rem 0.05rem 0 rgba(0, 0, 0, 0.2) !important;-webkit-box-shadow: 0 0.01rem 0.05rem 0 rgba(0, 0, 0, 0.2) !important;border-radius: 1rem;} */.return-top {width: 40px;height: 40px;z-index: 9;margin: 0 auto;background-color: #f9f9f9;box-shadow: 0 0.01rem 0.05rem 0 rgba(0, 0, 0, 0.2) !important;-webkit-box-shadow: 0 0.01rem 0.05rem 0 rgba(0, 0, 0, 0.2) !important;border-radius: 1rem;-webkit-animation: show 350ms ease-out forwards 1;animation: show 350ms ease-out forwards 1;}.return-top img {width: 100%;height: 100%;}@-webkit-keyframes show {0% {-webkit-transform: rotate(0deg);}25% {opacity: 0.5;-webkit-transform: rotate(-3deg) translateY(-0.2rem);}75% {-webkit-transform: rotate(3deg);}100% {opacity: 0.9;-webkit-transform: rotate(0deg);}}@keyframes show {0% {transform: rotate(0deg);}25% {opacity: 0.5;transform: rotate(-3deg) translateY(-0.2rem);}75% {transform: rotate(3deg);}100% {opacity: 0.9;transform: rotate(0deg);}}
</style>
编辑 returTop／index.js 文件，目的：将该组件作为 Vue 插件
// sumFunction 插件对应组件的名字
import returnTop from "./returnTop";// Vue.js 的插件应当有一个公开方法 install 。第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
// 此处注意，组件需要添加name属性，代表注册的组件名称，也可以修改成其他的
returnTop.install = (Vue) => Vue.component(returnTop.name, returnTop); //注册组件// 标签的方式引入
//const install = function(Vue, opts = {}) {
// Vue.component(sumFunction.name, sumFunction);
//}/* 支持使用标签的方式引入 Vue是全局变量时，自动install */
//if (typeof window !== 'undefined' && window.Vue) {
// install(window.Vue);
//}export default returnTop;
此处需要注意的是 install。 Vue 的插件必须提供一个公开方法 install，该方法会在你使用该插件，也就是 Vue.use(yourPlugin)时被调用。这样也就给 Vue 全局注入了你的所有的组件。
在src目录下创建index.js文件,用来统一管理组件
import Vue from 'vue';
import ReturnTop from './plugins/returnTop/index.js';//返回顶部
// ...如果还有的话继续添加
const components = [ReturnTop,
]
//循环遍历注册组件，就可以向其他ui组件库那样，使用Vue.use()来全局使用
const install = function (Vue, opts = {}) {components.map(component => {Vue.component(component.name, component);})
}/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {install(window.Vue);
}export default {install,ReturnTop, //在这里多写一次可以单独调用，例如：Vue.use(vueutils.ReturnTop)
}
修改 package.json
{"name": "km-vue-utils","description": "vue常用工具合集","version": "0.0.1","author": "SuperKM","license": "MIT", // 开源协议// 采用commonJs入口文件，如果不配置，我们在其他项目中就不用import XX from XX来引用了，只能以包名作为起点来指定相对的路径"main": "dist/index.js","jsnext:main": "src/index.js", // 采用es6模块化入口"private": false, // 因为组件包是公用的，所以private为false"scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot","build": "cross-env NODE_ENV=production webpack --progress --hide-modules"},
// 指定代码所在的仓库地址"repository": {"type": "git","url": "https://github.com/superliebe/vueTools.git"},
// 提交bug的地址"bugs": {"url": "https://github.com/superliebe/vueTools/issues"},// 项目官网的url"homepage": "https://github.com/superliebe/vueTools","keywords": ["vue","component","tools","superkm"], // 指定关键字"dependencies": {"vue": "^2.5.11"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"],"devDependencies": {...}
}
因为要用 dist 文件夹，所以在.gitignore 文件中把 dist/去掉。
// 原
module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: 'build.js'}
...
}
// 新
const NODE_ENV = process.env.NODE_ENV
module.exports = {entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: 'index.js',libraryTarget: 'umd', // 指定输出格式umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define}
...
｝
❗ 发布 npm 之前必须做两件事情。
❤️ - 必须 npm run build 打包一下。
❤️ - 必须 修改 package.json 中的版本号。
发布包到 npm
- 已经注册过 npm 账号，首先登陆，登陆过一次之后，就可以直接发布
npm login --registry http://registry.npmjs.org
//适用于使用了淘宝镜像加速的//或者npm login //未采用镜像加速过输入账号-密码-邮箱后，提示 Logged in as *** on http://registry.npmjs.org/. 就是登陆成功了
- 然后直接发布
npm publish --registry http://registry.npmjs.org
发布成功后提示，前往自己的 npm 库中就可以查看到刚刚发布的 npm 包
npm 库中
- 如果想删除发布的包
npm unpublish km-vuetools --force --registry http://registry.npmjs.org
- 409 Conflict
npm login 或者 npm adduser 时 输入完账号密码邮箱后 提示 E409 Conflict 报错 一般因为淘宝镜像的原因
解决方案,直接 registry 镜像源
npm login --registry http://registry.npmjs.org
- npm ERR! 403
可能是包名已经存在，或者是邮箱未认证
使用自己发布的包
使用 cnpm 安装依赖
cnpm i km-vue-utils -S
在 main.js 文件 或者想要引入的文件导入
import utils from "km-vue-utils";
Vue.use(utils);
在想要引用的.vue 文件中直接写
<!-- 该名称由封装组件中的name属性决定 -->
<tool-return-top></tool-return-top><!-- 如果想引用组件中包含的方法，给Vue.prototype属性Vue.prototype.$utils = utils;在需要调用的地方直接写this.$utils.方法文件.方法名;-->
😜😜😜
---------------------
作者：superKM
来源：CSDN
原文：https://blog.csdn.net/superKM/article/details/107096256
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：CSDN,CNBLOG博客文章一键转载插件
![[置顶]tcpflow 抓包](https://img-blog.csdn.net/20170221100511253?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGVvbnpob3V3ZWk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
