Vuejs2 如何在vue cli应用程序中显示基本的autodesk forge viewer？_Vuejs2_Autodesk Forge_Vue Cli_Autodesk Viewer

Vuejs2 如何在vue cli应用程序中显示基本的autodesk forge viewer？

vuejs2 autodesk-forge

Vuejs2 如何在vue cli应用程序中显示基本的autodesk forge viewer？,vuejs2,autodesk-forge,vue-cli,autodesk-viewer,Vuejs2,Autodesk Forge,Vue Cli,Autodesk Viewer,我试图将基本查看器示例代码转换为一个简单的vue.js查看器应用程序。当我尝试运行“npm run serve”（vue cli）时，一切都得到了正确的呈现，我在控制台中获得了所有控制台日志但即使在执行脚本之前，eslint loader也会显示Autodesk未定义错误。但是我可以看到查看器在后台加载了文档。我将在这里附上它的屏幕截图有人能告诉我创建简单vue.js应用程序的基本查看器的代码吗 /public/index.html <html lang="en"> <

我试图将基本查看器示例代码转换为一个简单的vue.js查看器应用程序。当我尝试运行“npm run serve”（vue cli）时，一切都得到了正确的呈现，我在控制台中获得了所有控制台日志

但即使在执行脚本之前，eslint loader也会显示Autodesk未定义错误。但是我可以看到查看器在后台加载了文档。我将在这里附上它的屏幕截图

有人能告诉我创建简单vue.js应用程序的基本查看器的代码吗

/public/index.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- Autodesk Forge Viewer files -->
    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>


很抱歉，如果未启用JavaScript，则无法正常工作。请使其继续。

/src/App.vue

 <div id="forgeViewer"></div>
</template>

<script>


export default {
  mounted(){
    var viewer;
    var options = {
        env: 'AutodeskProduction',
        api: 'derivativeV2',  // for models uploaded to EMEA change this option to 'derivativeV2_EU'
        getAccessToken: function(onTokenReady) {
            var token = 'eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJzY29wZSI6WyJidWNrZXQ6Y3JlYXRlIiwiYnVja2V0OnJlYWQiLCJkYXRhOnJlYWQiLCJkYXRhOndyaXRlIl0sImNsaWVudF9pZCI6Ikp2Vk40bzdBQ0V0ZE81TVpnZ21QMk9WM1RoNFJnRW54IiwiYXVkIjoiaHR0cHM6Ly9hdXRvZGVzay5jb20vYXVkL2p3dGV4cDYwIiwianRpIjoiMXBQcVhxOFBZVVU0WmtpTURsaGpUSUxCM3I1UEpBWk9kbTY4dTY2R1ZjajhDY3VzYjB3VFVId0E3emZPVk5JRCIsImV4cCI6MTU4ODIzNDEwOX0.zmY_BFmoZgL4TbtSVyTWKlrFdImEKbQTUsfQxBjsPV4';
            var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
            onTokenReady(token, timeInSeconds);
        }
    };
    Autodesk.Viewing.Initializer(options, function() {   
    var htmlDiv = document.getElementById('forgeViewer');
    viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
    var startedCode = viewer.start();
    if (startedCode > 0) {
        console.error('Failed to create a Viewer: WebGL not supported.');
        return;
    }

    console.log('Initialization complete, loading a model next...');

});
var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZmFjaWxpb25ld2NsaWVudGJ1Y2tldC9yYWNfYWR2YW5jZWRfc2FtcGxlX3Byb2plY3QucnZ0';
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
}

  },
  methods:{
    onDocumentLoadSuccess:function(viewerDocument){
      var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
    viewer.loadDocumentNode(viewerDocument, defaultModel);
    viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=>{

})
    },
    onDocumentLoadFailure:function(){
          console.error('Failed fetching Forge manifest');
    }
  }
}
</script>

<style>

</style>


导出默认值{
安装的（）{
变量查看器；
变量选项={
环境：“AutodeskProduction”，
api:'derivativeV2'，//对于上传到EMEA的模型，将此选项更改为'derivativeV2_-EU'
getAccessToken:函数（onTokenReady）{
2.2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 3VZyjb3vvid0e3emzpvk5jrcisimv4cci6mtu4odizndewox0.zmY_bfmozgl4btsvytwklrfdimekbqtusfqbxbjspv4'；
var timeInSeconds=3600；//使用Forge身份验证（OAuth）API提供的值
onTokenReady（令牌，timeUnseconds）；
}
};
Autodesk.Viewing.Initializer（选项，函数（）{
var htmlDiv=document.getElementById（'forgeViewer'）；
查看器=新的Autodesk.Viewing.GuiViewer3D（htmlDiv）；
var startedCode=viewer.start（）；
如果（起始代码>0）{
console.error（'未能创建查看器：不支持WebGL'）；
返回；
}
log（'初始化完成，下一步加载模型…'）；
});
var documentId='urn:dxjuomfkc2sub2jqzwn0czpvcy5vymply3q6zmfjawxpb25ld2nawvudgj1tldc9yyywnfywr2yw5jzwrfc2ftcgxlxbyb2ply3qucnz0'；
Autodesk.Viewing.Document.load（documentId、onDocumentLoadSuccess、onDocumentLoadFailure）；
}
},
方法：{
onDocumentLoadSuccess:函数（viewerDocument）{
var defaultModel=viewerDocument.getRoot（）.getDefaultGeometry（）；
loadDocumentNode（viewerDocument，defaultModel）；
viewer.addEventListener（Autodesk.Viewing.SELECTION_CHANGED_事件，事件=>{
})
},
onDocumentLoadFailure:函数（）{
console.error（'获取伪造清单失败'）；
}
}
}

您必须逐一修复Eslint错误

1.-将autodesk声明为.eslintrc中的全局

"globals": {
    "Autodesk": true
}

2.-声明查看器

const viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);

3.-如果未使用事件监听器或仅

console.log（事件）

或者，您可以禁用

eslint

，但我不建议这样做。

在此处查看这些工作示例：

在main.js中，您可以添加：

Vue.prototype.$Autodesk = window.Autodesk;

并在vue组件中使用它，如下所示：

this.$Autodesk