引入element-plus 失败

bobo

本帖最后由 bobo 于 2022-8-21 18:10 编辑

我用了李恒道老哥的引入lelment-plus的代码，放在机子上，报了如下错误：

兄弟们，这情况该咋办呢？代码如下：

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");
}

steven026

bobo 发表于 2022-8-21 18:27
[md]#### 还是不行诶老哥
> 报错似乎还是原来的那个错误
!(data/attachment/forum/202208/21/182632qja1c ...

1. // ==UserScript==
   
2. // @name         New Userscript
   
3. // @namespace    http://tampermonkey.net/
   
4. // @version      0.1
   
5. // @description  try to take over the world!
   
6. // @author       You
   
7. // @match        https://www.baidu.com/
   
8. // @resource vue https://cdn.jsdelivr.net/npm/vue@next
   
9. // @resource ele https://unpkg.com/element-plus
   
10. // @resource ele_css https://cdn.jsdelivr.net/npm/element-plus/dist/index.css
    
11. // @grant        unsafeWindow
    
12. // @grant        GM_getResourceText
    
13. // @grant        GM_addStyle
    
14. // @run-at       document-end
    
15. // ==/UserScript==
    
16. 
    
17. (function() {
    
18.     'use strict';
    
19.     unsafeWindow.eval(GM_getResourceText("vue"))
    
20.     //debugger
    
21.     unsafeWindow.eval(GM_getResourceText("ele").replace("  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :",""))
    
22.     GM_addStyle(GM_getResourceText("ele_css"));
    
23.     let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;width: 100px;height: 100px;">
    
24.            <el-button>{{ message }}</el-button>
    
25.     </div>`
    
26. 
    
27.     var el=document.createElement('div')
    
28.     el.innerHTML=text;
    
29.     document.body.append(el)
    
30.     const App = {
    
31.         data() {
    
32.             return {
    
33.                 message: "Hello Element Plus",
    
34.             };
    
35.         },
    
36.     };
    
37.     const app = Vue.createApp(App);
    
38.     app.use(ElementPlus);
    
39.     app.mount("#app");
    
40. })();

复制代码

修改了一下代码 应该可以了

李恒道

帖出来脚本代码看看

bobo

李恒道 发表于 2022-8-21 18:10
帖出来脚本代码看看

贴好啦老哥

steven026

你可以试试resource+eval
https://bbs.tampermonkey.net.cn/forum.php?mod=redirect&goto=findpost&ptid=1084&pid=30632

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://bbs.tampermonkey.net.cn/
// @resource vue https://cdn.jsdelivr.net/npm/vue@next
// @resource ele https://unpkg.com/element-plus
// @resource ele_css https://cdn.jsdelivr.net/npm/element-plus/dist/index.css
// @grant        unsafeWindow
// @grant        GM_getResourceText
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';
    unsafeWindow.eval(GM_getResourceText("vue"))
    unsafeWindow.eval(GM_getResourceText("ele"))
    GM_addStyle(GM_getResourceText("ele_css"));
    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");
})();

bobo

steven026 发表于 2022-8-21 18:17

[md]你可以试试resource+eval
https://bbs.tampermonkey.net.cn/forum.php?mod=redirect&goto=findpost&pti ...

还是不行诶老哥

报错似乎还是原来的那个错误

李恒道

百度网页有amd模块化
因为element-plus是umd引入
优先是exports-》amd-》window
导致没赋值到window，赋值上amd了
用相应模块指令拿到element-plus的函数，或者用unsafe+require引入都可以

steven026

李恒道 发表于 2022-8-21 18:35
百度网页有amd模块化
因为element-plus是umd引入
优先是exports-》amd-》window

我试了一下直接在devtools里引入或者eval都失败了
可能百度的页面和element-plus代码有冲突（我没用过element-plus不是很清楚，还在研究）

steven026

李恒道 发表于 2022-8-21 18:35
百度网页有amd模块化
因为element-plus是umd引入
优先是exports-》amd-》window

GGNB 下了个断点看了一下，果然是amd的问题，eval的时候把这行判断replace掉就行了

李恒道

steven026 发表于 2022-8-21 19:29
GGNB 下了个断点看了一下，果然是amd的问题，eval的时候把这行判断replace掉就行了 ...

突然想起来我之前运行也没成功可能也是因为这个问题...