javascript - vue引入3Dmol包时出现问题怎样解决?
vue引入3Dmol包时出现问题
This dependency was not found: * !!babel-loader!https://3Dmol.csb.pitt.edu/build/3Dmol-min.js in ./src/App.vue To install it, you can run: npm install --save !!babel-loader!https://3Dmol.csb.pitt.edu/build/3Dmol-min.jsError from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp' 报这个错，之后我这样执行
$ npm install --save !!babel-loader! https://3Dmol.csb.pitt.edu/build/3Dmol-min.jsnpm install --save npm run devbabel-loader! https://3Dmol.csb.pitt.edu/build/3Dmol-min.jsnpm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR! errno UNABLE_TO_VERIFY_LEAF_SIGNATUREnpm ERR! request to https://3dmol.csb.pitt.edu/build/3Dmol-min.js failed, reason: unable to verify the first certificatenpm ERR! A complete log of this run can be found in:npm ERR! C:\software\node.js\node_cache\_logs\2024-01-08T10_25_07_189Z-debug-0.log我的代码如下
<template> <div id = "container-01" class = "mol-container"> <div v-is="'script'"> let element = document.querySelector('#container-01'); let config = { backgroundColor: 'orange' }; let viewer = $3Dmol.createViewer( element, config ); viewer.addSphere({ center: {x:0, y:0, z:0}, radius: 10.0, color: 'green' }); viewer.zoomTo(); viewer.render(); viewer.zoom(0.8, 2000); </div> </div></template><script src="https://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script><style>.mol-container { width: 60%; height: 400px; position: relative;}</style>共有1个答案
把 cdn 放到 index.html 当中，别放到 .vue 组件的 script 标签里面
index.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>oc</title> </head> <body> <div id="app"></div> <script src="https://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script> <script type="module" src="/src/main.ts"></script> </body></html>App.vue
<template> <div id = "container-01" class = "mol-container"> </div></template><script setup>import { nextTick, onMounted } from 'vue'onMounted(() => { nextTick(() => { let element = document.querySelector('#container-01'); let config = { backgroundColor: 'orange' }; let viewer = $3Dmol.createViewer( element, config ); viewer.addSphere({ center: {x:0, y:0, z:0}, radius: 10.0, color: 'green' }); viewer.zoomTo(); viewer.render(); viewer.zoom(0.8, 2000); })})</script><style>.mol-container { width: 60%; height: 400px; position: relative;}</style>-
H5 页面通过cdn引入 Vue3 在低版本安卓手机 7,8 下，oppo、小米手机中会出现样式错乱，页面白屏问题，这种要怎么解决呢？
-
本文向大家介绍解决vue 引入子组件报错的问题，包括了解决vue 引入子组件报错的问题的使用技巧和注意事项，需要的朋友参考一下 错误信息： 源码： 原因： vue里面不允许使用 Html已有的标签作为自定义标签 修改方案： 修复结果： ok！ 以上这篇解决vue 引入子组件报错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍Vue框架下引入ActiveX控件的问题解决，包括了Vue框架下引入ActiveX控件的问题解决的使用技巧和注意事项，需要的朋友参考一下 最近参与了山东某一公司的呼叫中心系统的开发项目，我负责的模块是在公司已有的前端Vue框架下集成他们的软电话条功能。从开始到结束所遇到的几个问题如下： 1.如何将ActiveX控件引入Vue，并且在页面上成功渲染； 2.如何调用ActiveX已提供的
-
本文向大家介绍vue-cli怎么解决跨域的问题？相关面试题，主要包含被问及vue-cli怎么解决跨域的问题？时的应答技巧和注意事项，需要的朋友参考一下 vue-cli 主要在本地通过本地服务器拦截转发请求的模式解决跨域问题。 步骤： config中设置proxy，这步决定哪种命名规则（比如'/abc/'开头的请求）的请求将被拦截（个人以为是通过改造XMLHttpRequest对象）到本地跨域服务器
-
本文向大家介绍解决python2.7用pip安装包时出现错误的问题，包括了解决python2.7用pip安装包时出现错误的问题的使用技巧和注意事项，需要的朋友参考一下 最近在使用pip安装包的的时候出现下面错误 查询资料后发现原因是pip安装python包会加载用户目录，用户目录恰好是中文的，ascii不能编码 打开对应的安装目录路径 D:\Python27\Lib\site-packages 新