---

title: 從零開始編寫一個(gè)vue插件
toc: true
date: 2018-12-17 10:54:29
categories:

• Web

tags:

• vue
• mathjax

---

寫畢設(shè)的時(shí)候需要一個(gè)mathjax編輯器，因此直接寫一個(gè)插件試一下。

準(zhǔn)備賬號(hào)

進(jìn)入npm注冊(cè)賬號(hào)

初始化項(xiàng)目

vue init webpack-simple mathjax-toolbar cd mathjax-toolbar npm install

得到的項(xiàng)目?jī)?nèi)的/src結(jié)構(gòu)如下：

src/ ├── assets │?? └── logo.png ├── App.vue └── main.js

創(chuàng)建插件相關(guān)文件

• 在src/下創(chuàng)建插件文件夾plugin/
• 進(jìn)入plugin/目錄
• 創(chuàng)建插件的Vue組件文件mathjaxToolbar.vue
• 創(chuàng)建插件的入口文件index.js

創(chuàng)建后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中注冊(cè)插件組件并使用

添加如下代碼：

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

關(guān)于在Vue組件中跨域引入第三方j(luò)s或cdn

如果想要引入第三方j(luò)s，假設(shè)為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與發(fā)布

npm run build # 登錄npm賬號(hào) npm login # 發(fā)布 npm publish

更新包

# 更新版本號(hào)，如1.0.1 npm version 1.0.1 # 發(fā)布 npm publish

轉(zhuǎn)載于:https://www.cnblogs.com/zmj97/p/10180690.html

總結(jié)

以上是生活随笔為你收集整理的从零开始编写一个vue插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。