---

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插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。