从零开始编写一个vue插件
2024-10-01 15:26:10
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
最新文章
- @Autowired
- Oracle之常见问题诊断方法
- hdu1269迷宫城堡(判断有向图是否是一个强连通图)
- POJ 2559
- 学习C# XmlSerializer 序列化反序列化XML
- vmware lan map
- QT 焦点事件（4种方式的解释，还有委托焦点）
- Effective C++学习笔记：初始化列表中成员列出的顺序和它们在类中声明的顺序相同
- MySQL和MsSQL实时自动同步---SyncNavigator 数据库同步软件
- Java FX入门
- WebSocket解析
- Leetcode 215. 数组中的第K个最大元素 By Python
- extern介绍
- 微信小程序精品demo
- [leetcode]27. Remove Element删除元素
- Aop笔记
- Cena评测系统在win10中测评cpp程序
- android自己定义换行居中CenterTextView
- HDU 3746：Cyclic Nacklace（KMP循环节）
- MYSQL错误：You can't specify target table for update in FROM clause