vue 组件发布到npm

以vue组件为例

一. 代码开发过程

1.1 先创建一个空的vue项目

vue create npm-vue

1.2 新建组件

我这边直接用的components文件夹，最好是自己在新建一个文件夹比如叫 packages 专门用来存放组件

1.3 zl-title组件代码示例

• index.vue

<template>
  <div id="zl-title">
    <div class="title">{{ title }}</div>
  </div>
</template>
<script>
export default {
  name: 'zl-title',
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>
<style lang="scss">
#zl-title{
  .title{
    font-size: 14px;
    color: #666666;
    font-weight: 500;
    padding: 10px 15px;
    border-bottom: 1px solid #e5e5e5;
    margin: 15px 0 25px 20px;
    position: relative;
    width: 100%;
    font-weight: bold;
    &::before{
      content: "";
      position: absolute;
      width: 4px;
      height: 16px;
      background: #3296fa;
      left: 0px;
      top: 12px;
    }
  }
}
</style>

• index.js
• vue插件开发文档 https://cn.vuejs.org/v2/guide/plugins.html

/**
 * 以vue插件的方式注册
 */
import zlTitle from './index.vue'

zlTitle.install = Vue => Vue.component(zlTitle.name, zlTitle)

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

export default zlTitle

1.4 本地测试

• main.js 入口文件
• 按照下面的过程就可以在任意一个vue文件(子组件)里面使用了 <zl-title/>

import Vue from 'vue'
import App from './App.vue'
// 引入的是index.js 不是index.vue
import zlTitle from './components/zl-title/index'
Vue.use(zlTitle)
Vue.config.productionTip = false

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

1.5 打包一个类似 elemet-ui 库

• zlBox组件跟zlTitle过程类似，只不过组件的功能内容不一样而已

--------------- 我是一条华丽的分割线 ---------------
在components文件夹下面新建一个 index.js 文件

import zlTitle from './zl-title/index'
import zlBox from './zl-box/index'

// 数组里面存放的就是一个个对象，import导入的vue组件其实导入的就是一个对象而已，可以自己打印看一下
const components = [
  zlTitle,
  zlBox
]

const install = function (Vue, opts = {}) {
  // 循环挂载到全局组件
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

// 支持script方式引入
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  install,
  zlBox,
  zlTitle
}

现在可以在main.js里面引入测试一下

import Vue from 'vue'
import App from './App.vue'
// 重点看这里了
import zlUI from './components/index'
Vue.use(zlUI)
Vue.config.productionTip = false

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

二.打包命令

2.1 vue-cli3 构建目标

https://cli.vuejs.org/zh/guide/build-targets.html

2.2 package.json scripts 新增打包命令

• –dest 后面参数 lib 的意思是打包出来的文件夹为 lib 否则默认是 dist

"lib": "vue-cli-service build --target lib --name zlUI --dest lib src/components/index.js"

2.3 打包出来的文件

三. 发布到npm

首先你要有npm账号，官网注册即可

3.1 package.json 修改

• 添加 main 属性 主文件是哪一个

"main": "lib/zlUI.umd.min.js"

• private 属性设置为 false 因为我们没办法发布私有包，如果不设置可以使用以下命令发布

npm publish --access public

• 记住 name 里面要使用小写 不要用 ZLUI 这种写法

{
  "name": "zl-ui-ysy",
  "version": "0.1.0",
  "private": false,
  "main": "lib/zlUI.umd.min.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name zlUI --dest lib src/components/index.js"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "vue": "^2.6.10",
    "zl-ui-ysy": "^0.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

3.2 发布操作

以下操作都是在本项目执行的 cmd 命令

# 执行完会让你输入用户名 密码 邮箱 
npm login

# 发布 前提private设置为false
npm publish

3.3 发布过程中报错

• 可以参考以下这篇文章

https://blog.csdn.net/zhangjing1019/article/details/102896421
https://segmentfault.com/a/1190000017463371

3.4 版本控制

• 每次发布的时候 版本号version不能重复

四.查看

可以去npm官网搜一下自己的包 也就是package.json里面name对应的值