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. dns tunnel C&C

    通过DNS控制主机以及执行命令 我的ubuntu 安装过程 1854 mkdir dns_tunnel_tool 1855 cd dns_tunnel_tool/ 1856 ls 1857 git c ...

  2. Node.js:连接 MySQL

    ylbtech-Node.js:连接 MySQL 1.返回顶部 1. Node.js 连接 MySQL 本章节我们将为大家介绍如何使用 Node.js 来连接 MySQL,并对数据库进行操作. 如果你 ...

  3. $.ajax 和$.post的区别

    https://blog.csdn.net/weixin_39709686/article/details/78680754

  4. tomcat配置一个服务监听两个端口

    <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" ...

  5. SQL Server 查询所有包含某文本的存储过程、视图、函数

    •  方法一:查询所有包含某文本的存储过程.视图.函数 SELECT * from sysobjects o, syscomments s where o.id = s.id AND text LIK ...

  6. ORM框架——Dapper的应用

    常见的ORM框架有EF,Dapper,NHibernate 参考:http://shuai7boy.iteye.com/blog/2357339 http://www.cnblogs.com/Sint ...

  7. python学习——正则表达式

    正则表达式                        正则表达式的主要作用就是对字符串进行匹配,通过匹配,进行筛选,选择出符合规则的字符串.其实正则表达式的作用就像是一个过滤器一样.你输入好自己的 ...

  8. gdb usage

    list stack of all threads thread apply all bt

  9. [置顶] openHAB 体系结构与编程模型 (1) --- 术语

    openHAB 术语 Item : 对硬件设备属性的抽象 ( Items are objects that can be read from or written to in order to int ...

  10. java中的string trim具体有什么用处。。。

    去掉字符串首尾空格 防止不必要的空格导致错误public class test{ public static void main(String[] args) { String str = " ...