我从Vue和Vue 3开始在Google Apps Script上编写应用程序。
我正在学习Vue Mastery教程，我还发现了@brucemcpherson关于Vue 2应用程序在GAS上工作的惊人例子，但对我来说太难理解某些部分了。
https://ramblings.mcpher.com/vuejs-apps-script-add-ons/
GitHub：https://github.com/brucemcpherson/bmVuetemplate
不知怎么的，GAS和Vue在处理组件时有些棘手，我需要一些帮助。
这是我的文件：
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<h1>{{ product }}</h1>
</my-component></my-component>
</div>
<script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
<?!= include("main-js"); ?>
<?!= include("my-component"); ?>
<script>
const mountedApp = app.mount('#app')
</script>
</body>
</html>
utils.gs
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
main js.html
<script>
const app = Vue.createApp({
data() {
return {
product: 'Socks'
}
}
})
</script>
my component.html
<script>
app.component('my-component', {
template: `<div>My component content</div>`,
data() {
return {
product: 'Boots'
}
}
})
</script>
我在控制台上收到警告：
dropping postMessage.. was from host https://script.google.com but expected host https://n-jogxx7ovu3afq6djr4pskwjsglfwozzlkf5baay-0lu-script.googleusercontent.com
在这两种情况下，都没有发生任何事情：当index.html收费时，我看不到我的组件。
你知道可能是什么问题吗？谢谢
您必须首先启动vue，然后安装应用程序。不确定这是否是你的问题，但这里有一个工作代码笔。此外，我已经在中导入了vue-libhttps://codepen.io/tzknc/pen/PopbOWW
<div id="app">
<h1>{{ product }}</h1>
<my-component/>
</div>
<script>
// create the vue instance
const app = Vue.createApp({
data() {
return {
product: 'Socks',
}
}
});
// add the component
app.component('my-component', {
template: `
<div>
My component content | {{product}}
</div>`,
data() {
return {
product: 'Boots'
}
}
})
// mount it
const mountedApp = app.mount('#app')
</script>