从零开始编写一个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

转载于:https://www.cnblogs.com/zmj97/p/10180690.html

总结

以上是生活随笔为你收集整理的从零开始编写一个vue插件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。