引入element-plus 失败
本帖最后由 bobo 于 2022-8-21 18:10 编辑我用了李恒道老哥的引入lelment-plus的代码，放在机子上，报了如下错误：
!(data/attachment/forum/202208/21/180325zg7li7l7lwynn254.png)
#### 兄弟们，这情况该咋办呢？代码如下：
```js
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");
} bobo 发表于 2022-8-21 18:27
#### 还是不行诶老哥
> 报错似乎还是原来的那个错误
!(data/attachment/forum/202208/21/182632qja1c ...
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @descriptiontry to take over the world!
// @author You
// @match https://www.baidu.com/
// @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"))
//debugger
unsafeWindow.eval(GM_getResourceText("ele").replace("typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :",""))
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");
})();
修改了一下代码 应该可以了 帖出来脚本代码看看 李恒道 发表于 2022-8-21 18:10
帖出来脚本代码看看
贴好啦老哥 你可以试试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
// @descriptiontry 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");
})();
``` steven026 发表于 2022-8-21 18:17
你可以试试resource+eval
https://bbs.tampermonkey.net.cn/forum.php?mod=redirect&goto=findpost&pti ...
#### 还是不行诶老哥
> 报错似乎还是原来的那个错误
!(data/attachment/forum/202208/21/182632qja1c35oaq0ois18.png) 百度网页有amd模块化
因为element-plus是umd引入
优先是exports-》amd-》window
导致没赋值到window，赋值上amd了
用相应模块指令拿到element-plus的函数，或者用unsafe+require引入都可以 李恒道 发表于 2022-8-21 18:35
百度网页有amd模块化
因为element-plus是umd引入
优先是exports-》amd-》window
我试了一下直接在devtools里引入或者eval都失败了
可能百度的页面和element-plus代码有冲突（我没用过element-plus不是很清楚，还在研究） 李恒道 发表于 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掉就行了 ...
突然想起来我之前运行也没成功可能也是因为这个问题...
页:
[1]
2