Tampermonkey VUE快速开发脚本

支持本地调试开发vue版本的Tampermonkey插件。

脚本文件

// ==UserScript==
// @name         qs
// @namespace    com.quick
// @version      0.1
// @match        https://abc.com/*
// @require      https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js
// @require      https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/lodash.js/4.17.21/lodash.min.js
// @resource     page   file:///C:\workspace\page.html
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @grant        GM_getResourceText
// ==/UserScript==
let d = document.createElement("div");
d.id = "xapp";
d.innerHTML = GM_getResourceText("page");
document.body.appendChild(d);
GM_addStyle(document.querySelector("#xcss").innerText);
eval(document.querySelector("#xjs").innerText);

资源文件page.html

<style id="xcss">
  .container {
    position: absolute;
    top: 10px;
    right: 10px;
  }
</style>
<div class="container">
  <h1 class="mh">{{text}}</h1>
</div>
<script id="xjs">
  new Vue({
    el: "#xapp",
    data() {
      return {
        text: ""
      };
    },
    mounted() {
      this.text = "abc";
    }
  });
</script>