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插件的更多相关文章

  1. vue-用Vue-cli从零开始搭建一个Vue项目

    Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...

  2. 从零开始编写IntelliJ IDEA插件

    写Java代码的时候,经常会涉及到重复性的操作,这个时候就会想要是有这样一个插件就好了,如果是大家都会遇到的场景,IDE或许已经提供了,再不然也有可能有人编写了相关的插件.要是这个操作是你们的编码环境 ...

  3. 如何开发和发布一个Vue插件

    前言 Vue 项目开发过程中,经常用到插件,比如原生插件 vue-router.vuex,还有 element-ui 提供的 notify.message 等等.这些插件让我们的开发变得更简单更高效. ...

  4. 手把手从零开始---封装一个vue视频播放器组件

    现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件. 作为一个老道的前端搬砖师,怎么可能会 ...

  5. 如何自己编写一个easyui插件续

    接着如何自己编写一个easyui插件继续分享一下如何从上一节写的“hello”插件继承出一个“hello2”. 参考了combobox的源码中继承combo,当然我这个简单很多了.都是根据自己的理解来 ...

  6. 如何编写一个gulp插件

    很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方 ...

  7. 第一个Vue插件从封装到发布

    前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...

  8. 自己动手编写一个VS插件(五)

    作者:朱金灿 来源:http://blog.csdn.net/clever101 继续编写VisualStudio插件.这次我编写的插件叫DevAssist(意思是开发助手).在看了前面的文章之后你知 ...

  9. 从零开始编写一个BitTorrent下载器

    从零开始编写一个BitTorrent下载器 BT协议 简介 BT协议Bit Torrent(BT)是一种通信协议,又是一种应用程序,广泛用于对等网络通信(P2P).曾经风靡一时,由于它引起了巨大的流量 ...

随机推荐

  1. XCode下Swift – WebView IOS demo

    简介 我今天用Mac升级了XCode到8.1,Swift版本应该到了swift3,按网上的demo写webview的例子,报一堆错,整了一天才搞定,不想其他人踩坑了! XCode8.1 ,swift3 ...

  2. python 从bulkblacklist信誉查询网站提交查询

    import urllib import urllib2 #import webbrowser import re import socket def is_domain_in_black_list( ...

  3. Linux就该这么学 20181010(第十四章DHCP)

    参考链接:https://www.linuxprobe.com DHCP动态地址分配协议 作用域:定义一个很大的网段地址池:真正为用户去分配的地址地址池要小于等于作用域排除范围:作用域-地址池租约-默 ...

  4. 如何让NSURLConnection在子线程中运行

    可以有两个办法让NSURLConnection在子线程中运行,即将NSURLConnection加入到run loop或者NSOperationQueue中去运行. 前面提到可以将NSTimer手动加 ...

  5. MVC 全局异常处理(适用多人操作)

    自定义特性: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

  6. javascript在html直接传值

    function getUrlParam(url, name) { var pattern = new RegExp("[?&]" + name + "\=([^ ...

  7. C语言文件操作函数之ferror & feof & clearerr

    这些函数都是和文件读写时发生错误有关,下面一一分析: 1:ferror 原型:int ferror(FILE * fp) 作用:测试一个文件流是否被设置了错误标识符,如果是返回非 0 整数,否则返回 ...

  8. Sqlite基本命令集合(linux/fedora/ubuntu)

    注:fedora自带sqlite3,无需安装,直接输入命令sqlite3即可. ------------Ubuntu在命令行输入sqlite3,确认没有安装在进行--- 1.安装sqlite3 ubu ...

  9. struts.xml里面子元素的配置

    <struts> <!-- package:包,struts2使用package来组织模块 name属性:必须,用于其他的包引用当前包 extends:当前包继承哪个包,继承的,即可 ...

  10. MySQL · 答疑解惑 · 备库Seconds_Behind_Master计算

    背景 在mysql主备环境下,主备同步过程如下,主库更新产生binlog, 备库io线程拉取主库binlog生成relay log.备库sql线程执行relay log从而保持和主库同步. 理论上主库 ...