开发个vue组件并打包发布到npm

小鱿鱼爱吃鱿鱼

2021-01-24 309 阅读2分钟

初始化项目

使用 vue init webpack-simple npm-practice, 我们不需要很多配置，webpack-simple足够了

修改文件目录

在src目录下新建components文件夹，然后在此文件夹下建立Main.vue文件，和index.js文件，index.js是把Main.vue文件暴露出去的出口

修改文件内容，配置

Main.vue 内容如下：

<template>
  <div class="container">
    <div>{{propData}}</div>
  </div>
</template>

<script>
export default {
  name: 'npm-practice',
  data () {
    return {
    }
  },
  props: {
      propData: {
          type: String,
          default: '我是默认值'
      }
  }
}
</script>
<style lang="scss">
.container{
    text-align: center;
}
</style>

App.vue 内容如下：

<template>
  <div id="app">
    <Main :propData='initData'/>
  </div>
</template>

<script>
import Main from './components/Main'
export default {
  name: 'app',
  components:{
    Main
  },
  data(){
      return {
        initData: 'hello 你好'
      }
  }
}
</script>
<style lang="scss">
</style>

index.js内容如下：

import Main from './Main'
import _Vue from 'vue'

Main.install = Vue => {
  if (!Vue) {
    window.Vue = Vue = _Vue
  }
  Vue.component(Main.name, Main)
}

export default Main;

修改package.json package.json需要修改private字段(private是true的时候不能发布到npm,需设置成false)

并增加main字段， main字段是require方法可以通过这个配置找到入口文件

修改 webpack.config.js 入口会根据开发环境，生产环境切换， main.js 是npm run dev 的入口，就是App.vue，用于调试/测试我们开发的组件;
index.js是npm run build 的入口，打包到生产环境打包就只是单纯的 npm-practice 组件

同时去掉生产环境的source-map

修改index.html的js引用路径，因为我们修改了output 的 filename，所以引用文件的名字也得变
新建一个文件，名为.npmignore，是不需要发布到npm的文件和文件夹，规则和.gitignore一样

.*
*.md
*.yml
build/
node_modules/
src/
test/

发布到npm

去 npm 官网注册个账号 www.npmjs.com/
如果设置了淘宝镜像，需要还原

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

在该组件根目录下,运行npm login，会提示输入个人信息，输入账号密码进行登录
然后执行 npm publish
npm上删除已发布的npm包

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

可以去npm 官网上查看包是否发布成功