Vue.js - 构建你的第一个包并在NPM上发布
栏目: JavaScript · 发布时间: 6年前
内容简介:插件大大地提高了开发者的开发效率。我们的大多数项目都依赖于它们,因为它们能够以极快的速度发布新功能。正如官方Vue.js文档中所述,插件的范围没有限制。通常我们想实现的功能有下面5种:OK,现在你了解了vue插件是什么了,以及它可以满足哪些需求!
本文我们将学习如何制作一个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插件:muscle:
来制作一个酷炫的按钮组件
作为一个有追求的前端,相信你们在公司开发项目时,肯定会想过,"要是公司有属于自己的一套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快速原型开发的知识,你可以查看 官方文档
下面,我们开始完善 Button
按钮组件的代码,让它跑起来!
步骤 2: 完善组件代码,让按钮可配置化
这里我将模仿 ElementUI库
的 Button组件 ,给大家揭晓它的奇妙之处!
模板 Template
<template> <button :class="[ 'ku-button', 'ku-button--' + type, 'ku-button--' + size, { 'ku-button--round': round } ]" @click="onClick"> <slot></slot> </button> </template>
JavaScript
<script> export default { props: { type: { type: String, default: 'default', validator(type) { return ['default', 'primary', 'info', 'warning', 'danger'].includes(type) } }, round: { type: Boolean, default: false }, size: { type: String, default: "medium", validator(size) { return ["medium", "small", "mini"].includes(size) } }, }, methods: { onClick(event) { this.$emit("click", event); } } }; </script>
样式 Style
<style> .ku-button { display: inline-block; outline: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; user-select: none; cursor: pointer; line-height: 1; white-space: nowrap; background-color: #fff; border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: .1s; font-weight: 500; padding: 12px 20px; font-size: 14px; border-radius: 4px; } /*颜色*/ .ku-button--default { } .ku-button--primary { color: #fff; background-color: #409eff; border-color: #409eff; } .ku-button--success { color: #fff; background-color: #67c23a; border-color: #67c23a; } .ku-button--info { color: #fff; background-color: #909399; border-color: #909399; } .ku-button--warning { color: #fff; background-color: #e6a23c; border-color: #e6a23c; } .ku-button--danger { color: #fff; background-color: #f56c6c; border-color: #f56c6c; } /*大小*/ .ku-button--medium { padding: 10px 20px; font-size: 14px; border-radius: 4px; } .ku-button--small { padding: 9px 15px; font-size: 12px; border-radius: 3px; } .ku-button--mini { padding: 7px 15px; font-size: 12px; border-radius: 3px; } /*是否圆角*/ .ku-button--round { border-radius: 20px; } </style>
后续我们就可以像这样使用:
<ku-button type="success" size="mini" round>小按钮</ku-button>
虽然我将按钮模板进行了简化,但这里有几个学习点很重要:
- 使用了BEM规范。(更改关于BEM的知识,可 查看这里 )
- 通过props配置接收3个参数(按钮类型,按钮大小,按钮是否为圆角),这样方便使用者随时切换不同主题的按钮。
- 使用了slot插槽,这样我们就可以这样使用<ku-button>按钮文本</ku-button>
- 定义了@click事件,当点击组件时会触发$emit
Step 3: 写一个Install方法
文章前面提到了 Vue.use()
方法,调用时它将会执行 install
方法,这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。
下面,我们在 src
中创建一个 index.js
文件,然后再里面写:
import KuButton from "./KuButton.vue" export default { install(Vue, options) { // 注册全局组件 // https://cn.vuejs.org/v2/guide/components-registration.html Vue.component("ku-button", KuButton) } }
到这里,一个完整的插件就差不多啦! :clap:
Step 4: 完善根目录的package.json文件
打开刚刚 npm init
创建的package.json文件
{ "private": false, "name": "ku-button", "version": "1.0.0", "description": "A niubility button", "author": "sugars", "license": "MIT", "main": "./dist/index.umd.js", "scripts": { "dev": "vue serve KuButton.vue" }, "files": [ "dist" ], "devDependencies": { "bili": "^4.7.3", "rollup-plugin-vue": "^5.0.0", "vue-template-compiler": "^2.6.10" } }
说明:
-
private
属性为false时代表你的包不是私有的,所有人都能查看并npm install使用 -
name
属性指后续发布在npm时的包名,请确保你的包名未被注册 -
version
属性指包的版本号,在你每次发布更新到npm时,都需要增加版本号。你可以查看更多 语义化版本号 的知识 -
description
属性指包的描述信息,写上去好让大家知道你这个包是干嘛用的 -
main
属性指定了包加载的入口文件,require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。 -
scripts
属性指定了运行脚本命令的npm命令行缩写,比如build指定了运行npm run build时,所要执行的命令。 -
files
属性可以指定哪些文件需要被发布到npm上,比如这里指定了dist文件夹里的所有文件
你可以在 npm官方文档 查看更多关于 package.json
的知识
打包
打包 工具 这里我使用的是 Bili ,一个强大的速度快,零配置的打包工具。
开始安装打包工具:
$ npm install --save-dev bili $ npm install --save-dev rollup-plugin-vue $ npm install --save-dev vue-template-compiler
然后在项目根目录下创建一个 bili.config.js
配置文件,配置如下:
module.exports = { banner: true, output: { extractCSS: false, format: ['umd'], moduleName: 'KuButton' }, plugins: { vue: true } }
完成后,你只需要执行一个命令就打包完成,就这么简单:
$ bili
打包成功后,在项目根目录下会生成一个 dist
文件夹,里面有个 index.umd.js
文件
在npm上分享你的成果
到这里,你的vue插件就开发完成了。剩下最后一步,就是在 npmjs 上发布你的插件!
但前提是你需要有一个npmjs账号,如果没有的话需要去 注册 一个,有的话可以跳过这一步。
打开终端,输入:
$ npm login // 回车后,输入你注册npmjs时填写的用户名,密码和邮箱 // 登录成功后,会提示:Logged in as <username> on https://registry.npmjs.org/.
查看当前npm用户登录情况:
$ npm whoami // 如果登录成功,输出的是登录的用户名
检查以上步骤都没问题后,进入刚刚完成的 ku-button
项目目录,开始发布:
$ npm publish
执行成功后,你的插件就正式发布成功了!!:tada:
后续如果要更新插件,只需要增加 package.json
里的 version
版本号,然后再次执行 npm publish
发布更新就可以了!
项目中使用刚发布的插件
你可以像安装其他插件一样:
$ npm install --save ku-button 或者 $ yarn add ku-button
接着,在 main.js
引用:
import KuButton from "ku-button" import Vue from "vue" Vue.use(KuButton)
最后,在你的页面中这样:
<ku-button round type="success" size="small">真酷!!</ku-button>
到这里就结束啦!记得给个赞哦!:+1:
如转载本文请注明文章作者及出处!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 自动化构建工具 Gradle 4.5 RC1 发布,改进构建缓存
- Gradle 6.7 发布,增量构建改进
- Gradle 3.3 发布,Groovy构建工具
- CMake 3.17.1 发布,开源构建系统
- Cmake 3.16.6 发布,开源构建系统
- Gradle 3.3 发布,Groovy构建工具
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Out of their Minds
Dennis Shasha、Cathy Lazere / Springer / 1998-07-02 / USD 16.00
This best-selling book is now available in an inexpensive softcover format. Imagine living during the Renaissance and being able to interview that eras greatest scientists about their inspirations, di......一起来看看 《Out of their Minds》 这本书的介绍吧!
JSON 在线解析
在线 JSON 格式化工具
图片转BASE64编码
在线图片转Base64编码工具