npm 包 发布 vue 插件

版权声明：无需声明 https://blog.csdn.net/Sun_Shydeo/article/details/89343286

1、注册npm账号

• npm 官网
• 验证邮箱
• 顺便查一查是否有重名插件，否则不能发布

2、webpack-simple 初始化 vue插件项目

vue init webpack-simple 插件项目名

vue init webpack-simple state-button


? Project name state-button
? Project description A Vue.js project
? Author Sun 
? License MIT
? Use sass? No

   vue-cli · Generated "state-button".

   To get started:

     cd state-button
     npm install
     npm run dev

cd state-button        //进入项目

初始化组件

npm install

3、项目启动基本配置

主要 package.json 文件

{
  "name": "state-button",                //插件名
  "description": "A Vue.js project",     //介绍
  "version": "1.0.2",                    //版本号，每次npm publish 修改，大于上次版本
  "author": "Sun ",                      //作者相关
  "license": "MIT",                      //许可证
  "private": false,                      //修改为false ，发布npm包
  "main":"dist/state-button.js",         //import xxx from "state-button", dist下的文件
  "scripts": {
    "start": "npm run dev",              //修改启动 命令为 npm start
    //去掉 --open,否则启动后默认打开 ie预览
    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot", 
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "bugs": {
    "url": "https://github.com/maleSun/npm/issues"    //github社区bug 记录
  },
  "homepage": "https://github.com/maleSun/npm/state-button"    //插件github位置
}

.gitignore文件删除 /dist/， 防止推送github时忽略 dist文件夹

4、插件开发

4.1、整体目录结构

|—— state-button
   —— node_modules
   —— src
      —— assects
      —— lib                 //插件目录位置
         —— index.js         //插件发布文件，之后打包文件入口
         —— state.vue        //vue插件
      —— App.vue
      —— main.js
   —— .gitignore
   —— package.json
   —— README.md
   —— webpack.config.js      //打包配置文件

4.2、state-button 插件本身

<template>
  <div class="state">
    <div class="oval" :class="flag == true ? 'oval-checked' : ''">
      <div class="circle" :class="flag == true ? 'circle-checked' : ''" :data-id="sid" @click="changeState"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'state-button',        //index.js 中组件注册name
  props:['stateId','stateBit'],
  data() {
    return {
    	sid:this.stateId,
    	flag:this.stateBit
    }
  },
  created(){
  	
  },
  methods:{
  	changeState(e){
  		var id = e.currentTarget.getAttribute('data-id');
  		this.flag = this.flag == false? true:false;
  		this.$emit('changeState', this.flag, id);
  	}
  }
}

</script>
<style scoped>
	.oval {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 1.6em;
  height: 1.6em;
  line-height: 0;
  background: #ccc;
  z-index: 666;
  transition: all 1.2s;
}
.oval::before,
.oval::after,.circle {
  position: absolute;
  display: block;
  top: 0;
  height: 1.6em;
  width: 1.6em;
  border-radius: 50%;
  transition: all .6s;
  z-index: 1;
}
.oval::before,
.oval::after {
  content: '';
  background: #ccc;
  z-index: 0;
  transition: all 1.2s;
}
.circle{
	background: #f40;
	left:-.8em;
}
.oval::before {
  left: -.8em;
}

.oval::after {
  right: -.8em;
}

.oval-checked,.oval-checked::before,
.oval-checked::after {
  background: #f40;
}
.circle-checked {
  left: .8em;
  background:#fff;
}
</style>

4.3、 lib/index.js 配置

import StateBtn from './state-button.vue'

//注册组件
const vueStateBtn = {
  install(Vue, options) {
    Vue.component(StateBtn.name, StateBtn)  //此处name 对应组件中的 name
  }
}

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(vueStateBtn);
}

//导出
export default vueStateBtn

4.4、本地测试

main.js 引入

import Vue from 'vue'
import App from './App.vue'

import StateButton from './lib/index.js'
//全局使用
Vue.use(StateButton)

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue

<template>
  <div id="app">
    <div class="wrapper">
      <state-button :stateId="fid" :stateBit="wflag" @changeState="changeState"></state-button>
    </div>
    <!-- <router-view/> -->
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      fid:1,
      wflag:true
    }
  },
  components:{
    
  },
  methods:{
    changeState(flag, id){
      this.wflag = flag;
      console.log(id)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.wrapper{
  width:200px;
  height:200px;
  margin:0 auto;
}
</style>

5、打包插件

5.1、webpack.config.js配置

module.exports = {
  // entry: './src/main.js',
  entry: './src/lib/index.js',    //修改打包入口
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    // filename: 'build.js'
    filename:'state-button.js',    //自定义插件名
    library: 'state-button', // library指定的就是你使用require时的模块名，这里便是require("vshare")
    libraryTarget: 'umd', //libraryTarget会生成不同umd的代码也可以只是通过script标签引入的。
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
  }
}

执行命令 

    npm run build

6、npm包发布

6.1、登陆 

npm login

Username: 填写用户名
Password: 密码，不显示
Email: (this IS public) 邮箱
Logged in as sun_sky on http://registry.npmjs.org/.

6.2、发布 

npm publish


npm notice
npm notice package: [email protected]
npm notice === Tarball Contents ===
npm notice 1.0kB   package.json
npm notice 72B     .babelrc
npm notice 147B    .editorconfig
npm notice 265B    index.html
npm notice 327B    README.md
npm notice 2.0kB   webpack.config.js
npm notice 107.1kB dist/build.js
npm notice 925.0kB dist/build.js.map
npm notice 6.8kB   dist/logo.png
npm notice 6.9kB   dist/state-button.js
npm notice 53.9kB  dist/state-button.js.map
npm notice 877B    src/App.vue
npm notice 6.8kB   src/assets/logo.png
npm notice 321B    src/lib/index.js
npm notice 1.5kB   src/lib/state-button.vue
npm notice 100B    src/main.js
npm notice === Tarball Details ===
npm notice name:          state-button
npm notice version:       1.0.1
npm notice package size:  329.7 kB
npm notice unpacked size: 1.1 MB
npm notice shasum:        5661e370effa0b8618cb42b1974721aedcfab3b6
npm notice integrity:     sha512-xACPhWPcIOEbj[...]UAxYcEBsZm9Ng==
npm notice total files:   16
npm notice
+ [email protected]

显示 + [email protected] 成功

显示 + [email protected] 成功

6.3、更新

修改 package.json 的 "version" 更高版本

"version": "1.0.2",



npm publish

不修改错误提示如下： 400

npm ERR! publish Failed PUT 400
npm ERR! code E400
npm ERR! Cannot publish over previously published version "1.0.0". : state-button

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Sun\AppData\Roaming\npm-cache\_logs\2019-04-18T11_43_07_552Z-debug.log

6.4、撤销已经发布包

npm unpublish 包名

撤销权限报错 使用 --force

npm unpublish 包名 --force

其他npm publish错误

In most cases you are behind a proxy or have bad network settings

去除代理 proxy

npm config set proxy null

npm publish报错403：You do not have permission to publish "***". Are you logged in as the correct user? 

原因：所要publish的包的name和npmjs网上已经发布的包的名字重复，修改自己的包名

7、其他Vue项目中使用

npm install state-button --save

main.js全局引入

import StateBtn from 'state-button'

Vue.use(StateBtn)

任意组件中 使用

<state-button :stateId="fid" :stateBit="wflag" @changeState="changeState"></state-button>
<state-button :stateId="f2id" :stateBit="!wflag" @changeState="changeState"></state-button>

export default {
  name: 'App',
  data(){
    return{
      fid:1,
      f2id:2,
      wflag:false
    }
  },
  components:{
    
  },
  methods:{
    changeState(flag, id){
      console.log(flag, id)
    }
  }
}