当前位置: 网站首页 > 大宝娱乐

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

2019-07-19来源:大宝娱乐

Vue 开发插件

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

我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入,就像这样:ps: 这里注意一下包的名字前缀是 unisoft ,组件的名字前缀是 uni

import UniSoftUI from "unisoft-ui";// 或者 const CustomUI = require("unisoft-ui");// 或者 <script src="{随机图片URL}"></script>Vue.use(UniSoftUI);

构建一个 Vue 项目

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

vue init webpack-simple <project-name>

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

目录结构如图:

├── src/ // 源码目录│ ├── packages/ // 组件目录│ │ ├── switch/ // 组件(以switch为例)│ │ ├── uni-switch.vue // 组件代码│ │ ├── index.js // 挂载插件│ ├── App.vue // 页面入口│ ├── main.js // 程序入口│ ├── index.js // (所有)插件入口├── index.html // 入口html文件

开发单个组件:

先看一下目标效果:

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

<template> <div > <div > <span><slot></slot></span> <div :switch-box"]" @click="handleChange(value)"> <span :></span> </div> <input type="checkbox" @change="handleChange" :true-value="activeValue" :false-value="inactiveValue" :disabled="disabled" :value="value"/> </div> </div></template><script> export default { name: "UniSwitch", 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:

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

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

所以在 App.vue 同级目录我新建了一个 index.js 文件

import UniSwitch from "./packages/switch/index";import UniSlider from "./packages/slider/index";import UniNumberGrow from "./packages/number-grow/index";import "./common/scss/reset.css"// ...如果还有的话继续添加const components = [ UniSwitch, UniSlider, UniNumberGrow // ...如果还有的话继续添加]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, UniSwitch, UniSlider, UniNumberGrow // ...如果还有的话继续添加}

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