前端发布npm包

仅用于个人记录开发工作中遇到的一些日常
1、vue init webpack-simple first-npm-practice 初始化项目
尽量使用webpack-simple，用vue init webpack first-npm-practice创建项目会生成很多配置项，我们其实用不到。
创建成功后，npm install 安装依赖 npm run dev跑起来
2、在src下面新建components文件夹，里面新建index.vue(名字不重要，自己取),在src同级目录下新建index.js文件。
index.vue文件中编写我们要使用的组件，这里仅仅作为演示作用，所以没有书写具有功能性的代码

/* index.vue */
<template>
  <div>
    <div>{{msg}}</div>
    <div>{{propData}}</div>
  </div>
</template>

<script>
export default {
  name: 'g-progress',
  components: {},
  props: {},
  data() {
    return {
      msg: 'heheh',
      propData: '哈哈哈'
    };
  },
  computed: {},
  watch: {},
  created() { },
  methods: {
  }
};
</script>

<style  scoped></style>

特别注意此处的name，是需要填写的。

index.js入口文件

import Gprogress from './src/components/index.vue';


const components = [Gprogress]
/*
*  install的固定写法
*/
const install = (Vue) => {
  if (install.installed) return   // 判断是否安装注册过
  components.forEach(component => Vue.component(component.name, component)) // 遍历并注册组件
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue) // window中有Vue时去install()
}

export default {
  install
}

3、修改package.json文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/ee3dd5d397754425b49ec907fc59e813.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA54Gw5LiO,size_20,color_FFFFFF,t_70,g_se,x_16

  "name": "g-progress",  //名称，不要和别人的重名
  "description": "A Vue.js project", //描述
  "version": "1.0.1", //版本
  "author": "xxx",   //作者
  "license": "MIT",  //协议
  "main": "index.js", //入口，
  "private": false, //默认是true，我们需要修改成false或者把此行删除

4、npm run build打包
5、在NPM网站创建账号
6、npm login
依次输入用户名、密码（密码不会显示出来，但是实际上是已经输入了的）、邮箱（发布npm包成功后会给邮箱发邮件）
此处我遇到一个报错

原因是之前使用淘宝镜像改变了原本的地址，需要通过npm config set registry https://registry.npmjs.org/命令换成原本的镜像地址。
7、成功后显示
8、npm publish发布即可
9、npm网站可搜索到发布的包

9、当修改版本后想重新上传，需要修改package.json中version版本，手动修改报了错

然后使用命令npm version patch 修改会自动将版本升级，再npm publish成功升级版本。