手把手教你封装 Vue 组件，并使用 npm 发布

源码地址，若是对你有帮助的话但愿不要吝啬你的 Star

本文主要记录一下如何基于 Vue 开发组件，并在 npm 上发布。废话很少说，进入正题

Vue 开发插件

开发以前先看看官网的 开发规范

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

// 这里注意一下包的名字前缀是 custom ，组件的名字前缀是 moor
// 这是由于那个名字发布包的时候被占用了（我作实验的时候叫 moor-ui）如今改为了custom-ui，可是组件的前缀懒得改
import CustomUI from 'custom-ui';

// 或者 const CustomUI = require('custom-ui');

// 或者 <script src="..."></script>

Vue.use(CustomUI);
复制代码

构建一个 Vue 项目

开发组件咱们使用 webpack-simple ：

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

PS: 这里我选择了 use sass 由于，以后开发组件会用到

开发组件的文件结构以下，参考了一下 element 不过咱们这个是简易版，仅供分享和本身使用

.
├── src/                           // 源码目录
│   ├── packages/                  // 组件目录
│   │   ├── switch/                // 组件（以switch为例）
│   │   ├── moor-switch.vue        // 组件代码
│   │   ├── index.js               // 挂载插件
│   ├── App.vue                    // 页面入口
│   ├── main.js                    // 程序入口
│   ├── index.js                   // （全部）插件入口
├── index.html                     // 入口html文件
.
复制代码

好了，到这里准备工做作好了，咱们能够开始开发组件了，接着上面的例子，下面开始开发一个 switch 组件。

开发单个组件

先看一下目标效果：

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

moor-switch.vue

这个文件是组件源码，我这里就不放源码了，这里就说一下我我的认为最重要的点吧，这也是封装表单类组件最为重要的点：

自定义组件绑定 v-model，官网地址

使用：

<!-- 使用父组件的值绑定 -->
<!-- isSwitch = false -->
<moor-switch v-model="isSwitch">开关:
</moor-switch>

<!-- 子组件必需要有 input 来处理对应的值 -->
<!-- 其中最重要的就是须要 :value="value" 用来绑定值 -->
<!-- @change="$emit('input', $event.target.value)" 事件触发改变值 -->
<input type="checkbox" @change="$emit('input', $event.target.value)" :true-value="activeValue" :false-value="inactiveValue" :disabled="disabled" :value="value">

<!-- 固然还须要使用 props 来接受这个 value -->
<script> // ... 此处省略代码  props: { value: { type: [Boolean, String, Number], default: false } } // ... 此处省略代码  </script>    
复制代码

index.js

这个文件没什么好说的就是将该组件做为 Vue 插件，代码就三行这里就放在这吧：

// MoorSwitch 是对应组件的名字，要记得在 moor-switch.vue 文件中仍是 name 属性哦
import MoorSwitch from './moor-switch';

MoorSwitch.install = Vue => Vue.component(MoorSwitch.name, MoorSwitch);

export default MoorSwitch;
复制代码

好了基本完成了，可是为了将全部的组件集中起来好比我还有 select、 input、 button 等组件，那么我想要统一将他们放在一个文件这中便于管理

因此在 App.vue 同级目录我新建了一个 index.js 文件，内容也没啥好说的看看就懂了：

import HelloWorld from './packages/hello-world/index.js';
import MoorSwitch from './packages/switch/index.js';
// ...若是还有的话继续添加

const components = [
  HelloWorld,
  MoorSwitch
  // ...若是还有的话继续添加
]

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,
  HelloWorld,
  MoorSwitch
  // ...若是还有的话继续添加
}
复制代码

本地运行经过 <script/> 标签的方式使用，修改 index.html 文件：

<!-- 省略部分代码 -->
<div id="app">
  <moor-hello-world :color="color" :msg="msg"></moor-hello-world>
  <moor-switch v-model="lightSwitch">开关:</moor-switch>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="/dist/custom-ui.js"></script>
<script> new Vue({ el: '#app', data() { return { color: 'red', msg: 'hello world!', lightSwitch: false } } }) </script>
复制代码

而后运行 npm run dev 你就能够看到效果了:

好了到这里咱们的组件就开发完成了；下面开始说怎么打包发布到 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: 'custom-ui.js',
    library: 'custom-ui', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // libraryTarget会生成不一样umd的代码,能够只是commonjs标准的，也能够是指amd标准的，也能够只是经过script标签引入的
    umdNamedDefine: true // 会对 UMD 的构建过程当中的 AMD 模块进行命名。不然就使用匿名的 define
  },
  // ... 此处省略代码 
}
复制代码

修改 package.json 文件：

// 发布开源所以须要将这个字段改成 false
"private": false,

// 这个指 import custom-ui 的时候它会去检索的路径
"main": "dist/custom-ui.js",
复制代码

发布命令其实就是两句话

// 这里须要你有一个 npm 的帐号，文章开头有官网连接
npm login   // 登录 
npm publish // 发布
复制代码

完成以后咱们就能够在项目中安装使用了

npm install custom-ui -S 
复制代码

在 main.js 中引入插件

import CustomUI from 'custom-ui'
Vue.use(CustomUI)
复制代码

在组件中使用：

<!-- 直接使用脚手架的HelloWorld组件 -->
<!-- 此处有省略代码，看对地方加入代码哦 -->
<div class="moor-item">
  <label>Input: </label>
  <moor-input v-model="input1" placeholder="请输入信息">
  </moor-input>

  <moor-input v-model="input2" placeholder="请输入信息">
  </moor-input>

  <moor-input placeholder="输入框禁用" :disabled="inputDisabled">
  </moor-input>
</div>

<div class="moor-item">
  <label>Switch: </label>

  <moor-switch v-model="lightSwitch">开关(开):</moor-switch>

  <moor-switch v-model="switchLight">开关(关):</moor-switch>
</div>

<script> export default { name: 'HelloWorld', data () { return { // HelloWorld msg: 'Welcome to moor UI!', color: 'red', // input input1: '', input2: '这是默认值', inputDisabled: true, // switch lightSwitch: false, switchLight: true } }, watch: { lightSwitch: newValue => console.log('开关：', newValue), } } </script>

<style scoped> .moor-select, .moor-btn, .moor-switch, .moor-input { margin: 10px 6px; } .moor-item { display: flex; align-items: center; } .moor-item label { width: 100px; display: inline-block; } </style>
复制代码

预览效果以下:

PS: 修改 .gitignore 去掉忽略dist,由于咱们打包的文件也须要提交；每次上到npm上须要更改版本号，package.json 里的 version 字段

写的比较简单，主要仍是提供思路。用习惯了开源的组件本身总得了解一下嘛，有的时候在开发的过程当中咱们找不到合适的开源组件就须要本身开发了，这个时候咱们把本身写的一些精致的小插件开源出来挺好的...

最后但愿你给个 Star 源码地址

哦，对了README，不想写了...哈哈