关于前端:发布vue组件到npm上的详细过程和npm-login失败的解决方案

9次阅读

共计 2144 个字符，预计需要花费 6 分钟才能阅读完成。

为了不便组件的应用，将 vue 组件打包并公布到 npm 上，或者间接利用到我的项目中引入应用

实现
利用脚手架创立我的项目 vue create demo
创立好之后在目录新建一个 packages 目录用于寄存组件，当然也能够在 src 中创立一个目录寄存

因为创立了 packages 目录在 src 内部，脚手架不会对该目录编译，因而须要配置 webpack 进行编译，在 vue.config.js 文件中配置

// vue.config.js
module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add('/packages')
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {return options})
  }
}

创立组件目录和组件入口，先在 packages 目录下创立一个 zlDemo 文件和一个 index.js 文件，用来配置该目录下的组件

// packages/index.js
import zlDemo from './zlDemo'

// 存储组件列表
const components = [zlDemo]

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

// 判断是否是间接引入文件
if (typeof window !== 'undefined' && window.Vue) {install(window.Vue)
}

export default {// 导出的对象必须具备 install，能力被 Vue.use() 办法装置
  install,
  // 以下是具体的组件列表
  zlDemo
}

创立组件，在 packages/zlDemo 目录下创立 index.js 和 index.vue 组件文件，代码如下

// packages/zlDemo/index.js
import zlToast from './index.vue'

zlToast.install = function (Vue) {Vue.component(zlToast.name, zlToast)
}

export default zlToast

// packages/zlDemo/index.vue
<template>
  <div class="zl-demo ceshi">
    这是一个 demo
  </div>
</template>

<script>
export default {name: 'zlDemo'}
</script>

<style>
</style>

配置打包命令，在 package.json 文件中增加 lib 命令用于打包

// package.json
"scripts": { // 配置打包命令
    "lib": "vue-cli-service build --target lib --name  zlDemo1 --dest lib packages/index.js"
  }
  "private": false, // 公开
  "name": "zlDemo", // 组件名称
  "version": "0.1.0", // 版本号
  "author": "zhanle_huang", // 作者

打包后能够间接引入“名称.umd.js”到雷同 vue 版本的我的项目应用，应用形式有两种

// 在 main.js 中引入
import zldemo from './zldemo.js'
app.use(zldemo)
// 在组件中引入
import zldemo from './zldemo.js'
// 这里须要留神了, 须要采纳这种形式进行注册
export default {
    components: {
    // 这里的 xxx 示意定义 packages/index.js 下定义的名称
        zldemo: zldemo.xxx 
    },

注册 npm 账号
地址：npm 官网.
注册好之后关上我的项目根目录执行 npm login
登录胜利之后再执行 npm publish 就会提醒实现（公布前能够 npm i 包名）看看有没有反复，有就改名字
登录失败的一个谬误解决方案 https://blog.csdn.net/ta_huang/article/details/122615787?spm=1001.2014.3001.5501.

依照上述步骤就能够打包一个属于本人的 npm 组件并公布到 npm 上，这是博主本人公布的一个测试包地址 https://www.npmjs.com/package/zl-democs1. 能够下载来看看，外面代码是残缺的
残缺我的项目地址：https://gitee.com/huang_zhan_…