vue-cli4.0 + vue + element 打包成lib 发布至npm

参考文档地址

vue-cli 官网 构建目标
项目加入element

vue项目初始化构建（vue-cli4.0）

vue create hwq-custom-ui-package  // 手脚架构建项目

vue add element   // 加入element UI 组件

看一下完整的文件目录：

先看看项目主要文件

package.json文件

{
  "name": "hwq-custom-ui-package",  // 项目名称
  "version": "0.1.5", //  版本号  每次发布至npm不能相同
  "author": "hwq888_ok@163.com",  //作者 
  "keywords": [  // 关键字
    "测试"
  ],
  "description": "测试研究专用，别下载",  // 描述
  "homepage": "https://github.com/hwq888/hwq-custom-ui-package",  // 主页链接
  "files": [  //需上传至npm的文件
    "lib/",
    "README.md",
    "package.json"
  ],
  "repository": {  //git地址
    "type": "git",
    "url": "git+https://github.com/hwq888/hwq-custom-ui-package"
  },
  "bugs": {  // bug提交地址
    "url": "https://github.com/hwq888/hwq-custom-ui-package/issues"
  },
  "main": "./lib/hwq-custom-ui-package.umd.min.js",  // 入口文件
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:lib": "vue-cli-service build --target lib --name hwq-custom-ui-package --dest lib ./src/index.js",  // 打包入口index.js文件成lib文件
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "element-ui": "^2.4.5",
    "vue": "^2.6.11",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-cli-plugin-element": "~1.0.1",
    "vue-template-compiler": "^2.6.11"
  }
}

src目录下index.js文件：

// 导入单个组件
import Dialog from './components/Dialog'
import Message from './components/Message'

// 以数组的结构保存组件，便于遍历
const components = {
  Dialog,
  Message
}

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  install.installed = true
  // 遍历并注册全局组件
  components.map(component => Vue.component(component.name, component))
}

// 对于那些没有在应用中使用模块化系统的用户，他们往往将通过 <script> 标签引用你的插件，并期待插件无需调用 Vue.use() 便会自动安装 。
// 你可以在插件最后添加如下几行代码来实现自动安装：
// 判断是否是直接引入文件，如果Vue是全局对象自动安装插件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 组件列表
  ...components
}

组件文件(\src\components\Dialog\src\index.vue)

<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="closeDialog">
      <span>{{dialogData.msg}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="closeDialog">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Dialog',
  props: {
    dialogVisible: {
      type: Boolean
    },
    dialogData: {
      type: Object
    }
  },
  data () {
    return {
      // visible: this.dialogVisible
    }
  },
  watch: {
    async dialogVisible (val, oldVal) {
      // type 1: 申请 2：审核 3:查看
      // this.visible = val
      if (val) {
        console.log('弹窗可见')
      } else {
        console.log('弹窗不可见')
      }
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    closeDialog () {
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>

组件安装文件（\src\components\Dialog\index.js）

import Dialog from './src/index'

/* istanbul ignore next */
Dialog.install = function (Vue) {
  Vue.component(Dialog.name, Dialog)
}

export default Dialog

打包 （ npm run build:lib）

"build:lib": "vue-cli-service build --target lib --name hwq-custom-ui-package --dest lib ./src/index.js",

如何在本地测试我们打的包可不可正常使用呢？

有一个简单的方法来检查。 从项目根目录下的命令行执行以下命令

npm link

执行npm link命令会在全局npm node_modules文件夹(与安装我们的全局npm依赖node_modules文件夹相同)中为当前包创建一个符号链接。

因此，现在您可以在任何项目中使用创建的npm包。

现在，按照上面的项目初始化流程重新生成一个项目(例如：hwq-custom-ui-package-demo），项目正常启动之后，执行代码：

npm link hwq-custom-ui-package

正常引入 hwq-custom-ui-package 文件夹的内容至node_modules目录下面

然后调用组件：

import {
  Dialog,
  Message
} from 'hwq-custom-ui-package'

Vue.use(Dialog)
Vue.use(Message)

然后看看能不能正常使用，起码我这边是正常使用的了

如何把代码发布至npm

1、登录注册npm
2、上传代码至npm

第一步：登录
npm login

第二步：发布（注意：版本不能相同）
npm publish

发布成功，可以访问试一下：立即访问

注意：npm发布的包是完全公共的，也就是所有使用npm的人都可以在npm仓库里下载你发布的包，但是实际项目中，部门间公用的包可能涉及到商业机密，那么就不能在npm上发布了，公司需要搭建自己的私有包管理仓库，这时cnpm就隆重登场了。