论坛 › 脚本开发 › [油猴脚本开发指南]油猴脚本调用element plus

李恒道 发表于 2021-9-26 09:22:27

[油猴脚本开发指南]油猴脚本调用element plus

# 前言

我们还有现成的组件库可以使用，那么这节课我们尝试使用vue+element的组合，还是先以网页版直接注入script标签这个方式调用。


我们查看官方文档发现引入一个element css文件，一个vue文件，一个element-plus的js文件，那么我们先引入vue吧

```javascript
let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = "https://cdn.jsdelivr.net/npm/vue@next";
document.documentElement.appendChild(script);
```

然后上去再引入一套css

```javascript
let link= document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.href= "https://unpkg.com/element-plus/dist/index.css";
document.documentElement.appendChild(link);
```

再上去引入一套element-plus的js!

```javascript
let elscript= document.createElement('script');
elscript.setAttribute('type', 'text/javascript');
elscript.src = "https://unpkg.com/element-plus";
document.documentElement.appendChild(elscript);
```

接下来查看官方例子，在vue初始化的时候我们需要use一下

```
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
```

然后就可以直接使用啦！

并且把之前的代码改成(el-button相当于一个自己创建的标签)

```javascript
    <div id="app">
      <el-button>{{ message }}</el-button>
    </div>
```


代码如下

```javascript
// ==UserScript==
// @name         组合使用Vue+Element plus
// @namespace    http://tampermonkey.net/
// @version      0.1
// @descriptiontry to take over the world!
// @author       You
// @match      https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=1030
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
// @grant      none
// @run-at document-start
// ==/UserScript==

let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = "https://cdn.jsdelivr.net/npm/vue@next";
document.documentElement.appendChild(script);
let link= document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.href= "https://unpkg.com/element-plus/dist/index.css";
document.documentElement.appendChild(link);
let elscript= document.createElement('script');
elscript.setAttribute('type', 'text/javascript');
elscript.src = "https://unpkg.com/element-plus";
document.documentElement.appendChild(elscript);
window.onload=()=>{
let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;width: 100px;height: 100px;">
         <el-button>{{ message }}</el-button>
    </div>`

var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
      const App = {
      data() {
          return {
            message: "Hello Element Plus",
          };
      },
      };
      const app = Vue.createApp(App);
   app.use(ElementPlus);
      app.mount("#app");
}
```

gafish 发表于 2021-9-26 13:53:11

有意思，哪天我用我擅长的React玩下

李恒道 发表于 2021-9-26 14:13:35

gafish 发表于 2021-9-26 13:53
有意思，哪天我用我擅长的React玩下

哥哥可以试一下
理论React require进来很大概率也要魔改一下
出个教程！

王一之 发表于 2021-9-26 14:29:42

出个webpack的！

李恒道 发表于 2021-9-26 23:36:32

王一之 发表于 2021-9-26 14:29
出个webpack的！

在准备了，这些讲完+css讲完
我想教webpack打包+webpack原理了

maxinimize 发表于 2023-1-20 21:36:28

大佬，可以问个问题吗？

我把这个案例代码复制到我的tampermonkey里，将@match的url换成了https://store.steampowered.com/*，其它代码不变。打开页面后，控制台提示Vue和Element Plus因为CSP都无法加载。想问下这种情况还有办法直接注入script标签来引入vue/element吗？



userscript.html?name…b48-7ea05954e566:17 Refused to load the script 'https://cdn.jsdelivr.net/npm/vue@next' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://store.st.dl.eccdnx.com/ https://store.st.dl.eccdnx.com/ *.google-analytics.com https://www.gstatic.com https://recaptcha.net https://www.gstatic.cn/recaptcha/ https://www.youtube.com/ https://s.ytimg.com https://steamcommunity-a.akamaihd.net". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

李恒道 发表于 2023-1-20 23:27:52

maxinimize 发表于 2023-1-20 21:36
大佬，可以问个问题吗？

我把这个案例代码复制到我的tampermonkey里，将@match的url换成了https://store.s ...

用我的另外一种方式试试
那个没有script插入

李恒道 发表于 2023-1-20 23:28:34

maxinimize 发表于 2023-1-20 21:36
大佬，可以问个问题吗？

我把这个案例代码复制到我的tampermonkey里，将@match的url换成了https://store.s ...

[油猴脚本开发指南]修改Vue3代码兼容油猴
https://bbs.tampermonkey.net.cn/thread-1035-1-1.html
[油猴脚本开发指南]魔改Element plus
https://bbs.tampermonkey.net.cn/thread-1039-1-1.html

maxinimize 发表于 2023-1-22 18:12:31

李恒道 发表于 2023-1-20 23:28
[油猴脚本开发指南]修改Vue3代码兼容油猴
https://bbs.tampermonkey.net.cn/thread-1035-1-1.html
[油猴 ...

多谢大佬指点。我试了一下，发现Vue2和Element的cdn直接通过@require引入没有问题（element的css是用这篇帖子创建link标签的方式引入的，不然会有字体问题导致图标缺失）。再次感谢大佬这几篇帖子提供的思路。

李恒道 发表于 2023-1-22 18:22:16

maxinimize 发表于 2023-1-22 18:12
多谢大佬指点。我试了一下，发现Vue2和Element的cdn直接通过@require引入没有问题（element的css是用这篇 ...

没事的
哥哥加油
没事可以来论坛玩

查看完整版本: [油猴脚本开发指南]油猴脚本调用element plus