从零开始编写一个vue插件
title: 从零开始编写一个vue插件
toc: true
date: 2018-12-17 10:54:29
categories:
- Web
tags:
- vue
- mathjax
写毕设的时候需要一个mathjax编辑器,因此直接写一个插件试一下。
准备账号
进入npm注册账号
初始化项目
vue init webpack-simple mathjax-toolbar
cd mathjax-toolbar
npm install
得到的项目内的/src
结构如下:
src/
├── assets
│ └── logo.png
├── App.vue
└── main.js
创建插件相关文件
- 在
src/
下创建插件文件夹plugin/
- 进入
plugin/
目录 - 创建插件的Vue组件文件
mathjaxToolbar.vue
- 创建插件的入口文件
index.js
创建后src/
目录为:
src/
├── assets
│ └── logo.png
├── main.js
├── App.vue
└── plugin
├── index.js
└── mathjaxToolbar.vue
编写插件入口文件index.js
'use strict';
import mathjaxToolbar from './mathjaxToolbar.vue'
const VueMathjaxToolbar = {
install (Vue) {
Vue.component('math-toolbar', mathjaxToolbar)
}
}
export default VueMathjaxToolbar
在src/main.js
中注册插件组件并使用
添加如下代码:
import mathjaxToolbar from './plugin/index.js'
Vue.use(mathjaxToolbar)
修改src/App.vue
<template>
<div id="app">
<mathjax-toolbar></mathjax-toolbar>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
}
}
}
</script>
<style>
</style>
编写插件组件mathjaxToolbar.vue
这里不再列出,有兴趣的可以在github查看代码:
mathjaxToolbar.vue
关于在Vue组件中跨域引入第三方js或cdn
如果想要引入第三方js,假设为https://xxx.js
在mounted
中添加:
const mScript = document.createElement('script')
mScript.type = 'text/javascript'
mScript.src = 'https://xxx.js'
document.body.appendChild(mScript)
更新package.json
删除"private": true
添加:
"main": "dist/mathjaxEditor.js",
"repository": {
"type": "git",
"url": "https://github.com/zmj97/mathjax-toolbar"
},
"keywords": [
"javascript",
"vue",
"mathjax",
"toolbar",
"html"
]
更新webpack.config.json
// 修改entry
entry: './src/plugin/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// 修改
filename: 'mathjaxEditor.js',
// 添加
library: 'mathjax-toolbar',
libraryTarget: 'umd',
umdNamedDefine: true
}
build与发布
npm run build
# 登录npm账号
npm login
# 发布
npm publish
更新包
# 更新版本号,如1.0.1
npm version 1.0.1
# 发布
npm publish
从零开始编写一个vue插件的更多相关文章
- vue-用Vue-cli从零开始搭建一个Vue项目
Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...
- 从零开始编写IntelliJ IDEA插件
写Java代码的时候,经常会涉及到重复性的操作,这个时候就会想要是有这样一个插件就好了,如果是大家都会遇到的场景,IDE或许已经提供了,再不然也有可能有人编写了相关的插件.要是这个操作是你们的编码环境 ...
- 如何开发和发布一个Vue插件
前言 Vue 项目开发过程中,经常用到插件,比如原生插件 vue-router.vuex,还有 element-ui 提供的 notify.message 等等.这些插件让我们的开发变得更简单更高效. ...
- 手把手从零开始---封装一个vue视频播放器组件
现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件. 作为一个老道的前端搬砖师,怎么可能会 ...
- 如何自己编写一个easyui插件续
接着如何自己编写一个easyui插件继续分享一下如何从上一节写的“hello”插件继承出一个“hello2”. 参考了combobox的源码中继承combo,当然我这个简单很多了.都是根据自己的理解来 ...
- 如何编写一个gulp插件
很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方 ...
- 第一个Vue插件从封装到发布
前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...
- 自己动手编写一个VS插件(五)
作者:朱金灿 来源:http://blog.csdn.net/clever101 继续编写VisualStudio插件.这次我编写的插件叫DevAssist(意思是开发助手).在看了前面的文章之后你知 ...
- 从零开始编写一个BitTorrent下载器
从零开始编写一个BitTorrent下载器 BT协议 简介 BT协议Bit Torrent(BT)是一种通信协议,又是一种应用程序,广泛用于对等网络通信(P2P).曾经风靡一时,由于它引起了巨大的流量 ...
随机推荐
- XCode下Swift – WebView IOS demo
简介 我今天用Mac升级了XCode到8.1,Swift版本应该到了swift3,按网上的demo写webview的例子,报一堆错,整了一天才搞定,不想其他人踩坑了! XCode8.1 ,swift3 ...
- python 从bulkblacklist信誉查询网站提交查询
import urllib import urllib2 #import webbrowser import re import socket def is_domain_in_black_list( ...
- Linux就该这么学 20181010(第十四章DHCP)
参考链接:https://www.linuxprobe.com DHCP动态地址分配协议 作用域:定义一个很大的网段地址池:真正为用户去分配的地址地址池要小于等于作用域排除范围:作用域-地址池租约-默 ...
- 如何让NSURLConnection在子线程中运行
可以有两个办法让NSURLConnection在子线程中运行,即将NSURLConnection加入到run loop或者NSOperationQueue中去运行. 前面提到可以将NSTimer手动加 ...
- MVC 全局异常处理(适用多人操作)
自定义特性: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...
- javascript在html直接传值
function getUrlParam(url, name) { var pattern = new RegExp("[?&]" + name + "\=([^ ...
- C语言文件操作函数之ferror & feof & clearerr
这些函数都是和文件读写时发生错误有关,下面一一分析: 1:ferror 原型:int ferror(FILE * fp) 作用:测试一个文件流是否被设置了错误标识符,如果是返回非 0 整数,否则返回 ...
- Sqlite基本命令集合(linux/fedora/ubuntu)
注:fedora自带sqlite3,无需安装,直接输入命令sqlite3即可. ------------Ubuntu在命令行输入sqlite3,确认没有安装在进行--- 1.安装sqlite3 ubu ...
- struts.xml里面子元素的配置
<struts> <!-- package:包,struts2使用package来组织模块 name属性:必须,用于其他的包引用当前包 extends:当前包继承哪个包,继承的,即可 ...
- MySQL · 答疑解惑 · 备库Seconds_Behind_Master计算
背景 在mysql主备环境下,主备同步过程如下,主库更新产生binlog, 备库io线程拉取主库binlog生成relay log.备库sql线程执行relay log从而保持和主库同步. 理论上主库 ...