Vue.js - 构建你的第一个包并在NPM上发布
本文我们将学习如何制作一个vue插件,并将其分发到npm上,能够让其他人安装使用.
插件大大地提高了开发者的开发效率。我们的大多数项目都依赖于它们,因为它们能够以极快的速度发布新功能。
正如官方Vue.js文档中所述,插件的范围没有限制。通常我们想实现的功能有下面5种:
- 添加全局方法或者属性 (如: vue-custom-element)
- 添加全局资源:指令/过滤器/过渡等 (如:vue-touch)
- 通过全局 mixin 方法添加一些组件选项 (如:vue-router)
- 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现 (如:vue-axios)
- 一个库,提供自己的 API,同时提供上面提到的一个或多个功能(如:vue-router)
OK,现在你了解了vue插件是什么了,以及它可以满足哪些需求!
如何在vue项目中使用插件
通过npm install
或yarn add
安装插件后,你需要在main.js文件中导入它并调用Vue.use()
全局方法。
注意:在new Vue() 前,必须先实例化所有插件.
import Vue from "vue"; import MyPlugin from "myplugin"; Vue.use(MyPlugin); new Vue({ // [...] })
如果插件包支持cdn方式引用的话,也可以通过以下方式引用:
<script src="https://cdn.xxx.cn/npm/myplugin@latest/dist/myplugin.min.js"></script>
另外,在你调用Vue.use()时,想对插件做一些自定义配置,你可以这么做:
Vue.use(MyPlugin, { option1: false, option2: true })
举个例子,比如在引入热门的Element UI库时,它支持传入一个全局配置对象
import Element from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Element, { // size 用于改变组件的默认尺寸,zIndex 设置弹框的初始 z-index(默认值:2000) size: 'small', zIndex: 3000 });
现在让我们进入正题!开始构建你的第一个vue插件
相关推荐
bowean 2020-07-05
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10