从零开始开发一个vue组件打包并发布到npm

第一步：使用vue init webpack-simple yyl-npm-practice 初始化项目

提示：不要用vue init webpack npm-practice 初始化项目，因为我们就开发个组件，不需要那么多配置，配置多了修改起来也麻烦，webpack-simple足够了。
初始完项目，按照提示输入项目信息即可，然后npm install,npm run dev让项目跑起来，如下图：

image.png

第二步：修改文件目录

1.在src目录下新建packages文件夹，然后在此文件夹下建立switch文件夹，然后在此文件夹下建立LjzSwitch.vue文件
2.LjzSwitch.vue同级目录下新建index.js文件，index.js是把LjzSwitch.vue文件暴露出去的出口。
修改完之后的文件目录如下，标红的就是新增的内容：

image.png

第三步：修改文件内容，配置

1.LjzSwitch.vue内容如下(注意name):

<template>
      <div class="container">
        <p>我是测试</p>
      </div>
</template>
<script>
export default {
    name:'ljz-switch',
    data(){
        return {}
    },
    props:{},
    computed:{},
    methods:{},
}
</script>

2index.js内容如下:

import LjzSwitch from './LjzSwitch.vue'
 
// 这一步判断window.Vue是否存在，因为直接引用vue.min.js， 它会把Vue绑到Window上，我们直接引用打包好的js才能正常跑起来。
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.component('LjzSwitch', Main)
}
//这样就可以使用Vue.use进行全局安装了。
LjzSwitch.install = function(Vue){
Vue.component(LjzSwitch.name, Main)
}
export default LjzSwitch

3.修改package.json
package.json需要修改private字段(private是true的时候不能发布到npm，需设置成false);并增加main字段，main字段是require方法可以通过这个配置找到入口文件

image.png

4.修改webpack.config.js
其实就是修改entry和output，截图如下：

image.png

说明：入口会根据开发环境，生产环境切换，main.js是npm run dev的入口，就是App.vue，用于调试/测试我们开发的组件；index.js是Main.vue,就是我们开发的组件。
5.打包该项目，npm run build
到此组件就开发完了，打包下看看，npm run build dist下生成了俩文件，如下：

image.png

第四步：发布到npm

1.去npm官网注册个账号
https://www.npmjs.com/
2.在该组件根目录下的终端，运行npm login,会提示输入个人信息，Email是发布成功后，自动给这个邮箱发送一个邮件，通知发布成功，输入完，登录成功。
3.最后就可以发布了，npm publish,发布成功。
4.如何更新npm包

当你包的内容修改之后，那我们需要npm version <update_type>
update_type就是版本号的意思，会自动更新package.json里面的版本号，然后重新npm publish,更新就会完成

5.npm上删除已发布的npm包

npm unpublish --force //强制删除，这个是撤销24小时发布的包，有些包发布久了，这个方法不会再管用了。
npx force-unpublish package-name '原因描述' // 是删除已发布好的包

最后编辑于：2020.10.19 18:17:02