Vue插件开发，发布到npm并安装使用

我们可以先查看Vue的插件的开发规范

我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入，就像这样：

ps: 这里注意一下包的名字前缀是 ending ，组件的名字前缀是 end

import EndingUI from 'ending-ui';
// 或者 const CustomUI = require('ending-ui');
// 或者 <script src="..."></script>
Vue.use(EndingUI);
复制代码

构建一个 Vue 项目

开发组件我们使用 webpack-simple 模板:

vue init webpack-simple <project-name>
复制代码

ps: 这里我选择了 use sass 因为之后开发组件会用到

目录结构如图:

│── ending-ui/?????????????????????????? // 组件源码目录
│── │── packages/????????????????? // 组件目录
│── │── │── switch/??????????????? // 组件（以switch为例）
│── │── │── │── end-switch.vue??????? // 组件代码
│── │── │── │── index.js?????????????? // 挂载插件
│── src/?????????????????????????? // 源码目录
│── │── App.vue??????????????????? // 页面入口
│── │── main.js??????????????????? // 程序入口
│── │── index.js?????????????????? // （所有）插件入口
│── index.html???????????????????? // 入口html文件
复制代码

开发单个组件:

在 packages 文件夹下新建一个 switch 文件夹用来存放 switch 组件的源码，继续在 switch 文件夹中新建 end-switch.vue 和 index.js 文件

end-switch.vue 组件:

<template>
 <div class="end-switch">
 <div class="wrapper">
  <span><slot></slot></span>
  <div :class="[{closed: !checked}, 'switch-box']"
   @click="handleChange(value)">
  <span :class="{closed: !checked}"></span>
  </div>

  <input
  type="checkbox"
  @change="handleChange"
  :true-value="activeValue"
  :false-value="inactiveValue"
  :disabled="disabled"
  :value="value"/>
 </div>
 </div>

</template>

<script>
 export default {
 name: "EndSwitch",
 data() {
  return {};
 },
 props: {
  value: {
    type: [Boolean, String, Number],
    default: false,
  },
  activeValue: {
    type: [Boolean, String, Number],
    default: true,
  },
  inactiveValue: {
    type: [Boolean, String, Number],
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
 },
 computed: {
  checked() {
  return this.value === this.activeValue;
  },
 },
 methods: {
  handleChange(value) {
    this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
  },
 },
}
</script>
复制代码

index.js:

// EndSwitch 是对应组件的名字，要记得在 moor-switch.vue 文件中还是 name 属性哦
import EndSwitch from './EndSwitch.vue';
EndSwitch.install = Vue => Vue.component(EndSwitch.name, EndSwitch);
export default EndSwitch;
复制代码

组件开发基本完成了，但是为了将所有的组件集中起来，统一将他们放在一个文件这中便于管理所以在 App.vue 同级目录新建一个 index.js 文件

index.js

import EndSwitch from './packages/switch/index';
// ...如果还有的话继续添加

const components = [
 EndSwitch,
 // ...如果还有的话继续添加
]

const install = function (Vue, opts = {}) {
 components.map(component => {
 Vue.component(component.name, component);
 })
}

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

export default {
 install,
 EndSwitch,
 // ...如果还有的话继续添加
}
复制代码

好了到这里我们的组件就开发完成了；下面开始说怎么打包发布到 npm 上

发布到 npm

打包之前，首先我们需要改一下 webpack.config.js 这个文件;

// ... 此处省略代码
const NODE_ENV = process.env.NODE_ENV
module.exports = {
 // 根据不同的执行环境配置不同的入口
 entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
 output: {
    // 修改打包出口，在最外级目录打包出一个 index.js 文件，我们 import 默认会指向这个文件
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'ending-ui.js',
    library: 'ending-ui', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
    umdNamedDefine: true, // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
 },
 // ... 此处省略代码
}
复制代码

然后, 再修改package.json文件:

// 发布开源因此需要将这个字段改为 false
"private": false,
// 这个指 import ending-ui 的时候它会去检索的路径
"main": "dist/ending-ui.js",
复制代码

发布命令只有两步骤(国内开发者通常更换了本地源地址，npm login 会默认登录本地源地址导致登陆错误，所以添加 --registry参数，指定登录发布地址):

npm login --registry http://registry.npmjs.org // 登陆
npm publish --registry http://registry.npmjs.org // 发布
复制代码

完成之后我们就可以在项目中安装使用了

在项目中使用ending-ui

在自己的项目中使用ending-ui, 先从 npm 安装

npm install ending-ui -S
复制代码

在 mian.js 中引入

import EndingUI from 'ending-ui'
Vue.use(EndingUI)
复制代码

在组件中使用:

<template>
 <div id="app">
 <h1>{{msg}}</h1>
 <end-switch v-model="isSwitch">
  <span class="text">{{switchText}}</span>
 </end-switch>
 </div>
</template>

<script>
 export default {
 name: 'app',
 data() {
  return {
  msg: 'welecom to ending-ui',
  isSwitch: false,
  }
 },
 computed: {
  switchText() {
  return this.isSwitch ? '开' : '关';
  }
 },
 }
</script>
复制代码

注意: 在发布npm包之前要先修改 .gitignore 去掉忽略 dist, 因为我们打包的文件也需要提交；每次上到 npm 上需要更改版本号，package.json 里的 version 字段

作者：EndingJackson
链接：https://juejin.im/post/5ceb986c5188252a72407d33
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

yinxiangzhongqing

发布了40 篇原创文章 · 获赞 18 · 访问量 15万+

私信关注