JavaScript

超轻量级php框架startmvc

Vue.js构建你的第一个包并在NPM上发布的方法步骤

更新时间:2020-08-24 22:00:01 作者:startmvc
本文我们将学习如何制作一个vue插件,并将其分发到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插件💪

来制作一个酷炫的按钮组件

作为一个有追求的前端,相信你们在公司开发项目时,肯定会想过,"要是公司有属于自己的一套UI组件库,那肯定很棒!"。 如果你有这个想法,那你认真看完这篇文章后,将会给你带来很多灵感和启发。

步骤 1:初始化插件目录结构

先创建一个空的项目文件夹,名字随意取,然后初始化生成package.json文件(文件的内容后面会介绍)


$ mkdir ku-button && cd ku-button
$ npm init
# 上面这个命令会提示一些问题,一直回车就行,然后最后会创建一个package.json文件

然后在项目根目录中创建一个src文件夹,里面新建一个KuButton.vue组件,这里你甚至可以通过vue的vue serve和vue build命令行来对单个*.vue文件进行快速原型开发,不过前提需要先额外安装一个全局的扩展


$ npm install -g @vue/cli
$ npm install -g @vue/cli-service-global

安装完成后,当你成功执行以下命令行后:


$ vue serve KuButton.vue

就可以直接在浏览器访问 http://localhost:8080/

Vue.js NPM发布包 Vue.js NPM包发布