Giters

element-plus / element-plus

🎉 A Vue.js 3 UI Library made by Element team

Home Page:https://element-plus.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

是否有在完整的vue项目中使用cdn的方式

lichencc opened this issue · comments

commented

Bug Type: Other

Environment

  • Vue Version: 3.4.19
  • Element Plus Version: 2.5.1
  • Browser / OS: Chrome 121.0.6167.185
  • Build Tool: Vite

Reproduction

Related Component

  • N/A

Reproduction Link

https://codesandbox.io/p/devbox/wizardly-wescoff-pzxddd?file=%2Fsrc%2Fmain.ts%3A8%2C1&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clvunaekt0007356iux8fhag3%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clvunaekt0002356ic29mh284%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clvunaekt0004356ihosd9z7q%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clvunaekt0006356ir5hidz3i%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B58.26598921386956%252C41.73401078613044%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clvunaekt0002356ic29mh284%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvunaeks0001356i2i61wu9c%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A15%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A15%252C%2522endColumn%2522%253A1%257D%255D%257D%252C%257B%2522id%2522%253A%2522clvunwx100002356i7khd145h%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A4%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A4%252C%2522endColumn%2522%253A1%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fpages%252FIndex.vue%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clvvr9aam0002356jk8le8aco%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A8%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A8%252C%2522endColumn%2522%253A1%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fmain.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clvunaekt0002356ic29mh284%2522%252C%2522activeTabId%2522%253A%2522clvvr9aam0002356jk8le8aco%2522%257D%252C%2522clvunaekt0006356ir5hidz3i%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvunaekt0005356ib753ac8p%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2523%252F%2522%257D%255D%252C%2522id%2522%253A%2522clvunaekt0006356ir5hidz3i%2522%252C%2522activeTabId%2522%253A%2522clvunaekt0005356ib753ac8p%2522%257D%252C%2522clvunaekt0004356ihosd9z7q%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvunaekt0003356ivlzvnmhx%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522clvunaekt0004356ihosd9z7q%2522%252C%2522activeTabId%2522%253A%2522clvunaekt0003356ivlzvnmhx%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to reproduce

!

What is Expected?

在main.ts中引入ElementPlus

What is actually happening?

无法引入

Additional comments

(empty)

commented

what you up to？

commented

@lichencc Please modify the content according to the specification, otherwise the issue will be closed.

commented

what you up to？

我想在完整的项目中（可参考发布的codesandbox），用cdn的方式替代之前npm包的使用方式，该如何做呢

commented

你想做什么？

我想在完整的项目中（可参考发布的codesandbox），用cdn的方式替代npm包之前的使用方式，来做呢

https://staging.element-plus.org/zh-CN/guide/installation.html

commented

你想做什么？

我想在完整的项目中（可参考发布的codesandbox），用cdn的方式替代npm包之前的使用方式，来做呢

https://staging.element-plus.org/zh-CN/guide/installation.html

这仍然是在html中使用，在完整项目的index.html中引入这两个cdn，我无法在我的vue文件中使用element-plus组件。是否有使用cdn，并类似在main.js中app.use（ElementPlus）的使用示例呢

commented

你想做什么？

我想在完整的项目中（可参考发布的codesandbox），用cdn的方式替代npm包之前的使用方式，来做呢

https://staging.element-plus.org/zh-CN/guide/installation.html

这仍然是在html中使用，在完整项目的index.html中引入这两个cdn，我无法在我的vue文件中使用element-plus组件。是否有使用cdn，并类似在main.js中app.use（ElementPlus）的使用示例呢

不太清楚，可以这样用么？

commented

你想做什么？

我想在完整的项目中（可参考发布的codesandbox），用cdn的方式替代npm包之前的使用方式，来做呢

https://staging.element-plus.org/zh-CN/guide/installation.html

这仍然是在html中使用，在完整项目的index.html中引入这两个cdn，我无法在我的vue文件中使用element-plus组件。是否有使用cdn，并类似在main.js中app.use（ElementPlus）的使用示例呢

不太清楚，可以这样用么？

难道cdn只能在单html文件中使用吗，那项目中就无法使用cdn了？

commented

Bug Type: Other

Environment

  • Vue Version: 3.4.19
  • Element Plus Version: 2.5.1
  • Browser / OS: Chrome 121.0.6167.185
  • Build Tool: Vite

Reproduction

Related Component

  • N/A

Reproduction Link

https://codesandbox.io/p/devbox/wizardly-wescoff-pzxddd?file=%2Fsrc%2Fmain.ts%3A8%2C1&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clvunaekt0007356iux8fhag3%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clvunaekt0002356ic29mh284%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clvunaekt0004356ihosd9z7q%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clvunaekt0006356ir5hidz3i%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B58.26598921386956%252C41.73401078613044%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clvunaekt0002356ic29mh284%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvunaeks0001356i2i61wu9c%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A15%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A15%252C%2522endColumn%2522%253A1%257D%255D%257D%252C%257B%2522id%2522%253A%2522clvunwx100002356i7khd145h%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A4%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A4%252C%2522endColumn%2522%253A1%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fpages%252FIndex.vue%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clvvr9aam0002356jk8le8aco%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A8%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A8%252C%2522endColumn%2522%253A1%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fmain.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clvunaekt0002356ic29mh284%2522%252C%2522activeTabId%2522%253A%2522clvvr9aam0002356jk8le8aco%2522%257D%252C%2522clvunaekt0006356ir5hidz3i%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvunaekt0005356ib753ac8p%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2523%252F%2522%257D%255D%252C%2522id%2522%253A%2522clvunaekt0006356ir5hidz3i%2522%252C%2522activeTabId%2522%253A%2522clvunaekt0005356ib753ac8p%2522%257D%252C%2522clvunaekt0004356ihosd9z7q%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvunaekt0003356ivlzvnmhx%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522clvunaekt0004356ihosd9z7q%2522%252C%2522activeTabId%2522%253A%2522clvunaekt0003356ivlzvnmhx%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to reproduce

!

What is Expected?

在main.ts中引入ElementPlus

What is actually happening?

无法引入

Additional comments

(empty)

示例没有权限访问
image

commented

在html中的head标签中引入cdn之后，在main.js中拿到ElementPlus变量，然后app.use(ElementPlus)应该就可以吧

commented

，在main.js中拿到ElementPlus变量，然后app.u

em我试了下拿不到ElementPlus变量，window上有，但只是个空对象

commented

可以重新发一个分享的链接吗，你发的那个没有打开权限

commented

可以重新发一个分享的链接吗，你发的那个没有打开权限

那就是一个codesandbox中vue3+vite5项目的空白模版，其中main.ts中挂载了app

commented

here is a sample using cdn

https://github.com/yzqtpl/element-cdn-sample.git

大佬，你这个sample是生产环境读取cdn，我想要开发环境也读取cdn可以实现吗