还是可以在Nuxt生成的站点中使用运行时DOM操作吗？

Question

我有一个Nuxt / Vue项目，我正在使用它通过generate命令来预渲染单个页面的网站（不是SPA，而是静态通用模式）。所有静态html都可以正确呈现，但是我想在runtime调用Google Sheets API，并使用收到的值更新DOM。 Nuxt生成后，Vue的反应性是否仍然存在？还是我必须使用原始的JavaScript Nuxt插件路线进行DOM操作？

我们将代码放入其中的系统是由Adobe Experience Manager提供的，因此遗憾的是Nuxt SSR毫无疑问。

Answer 1

我找到了一种对我有用的方法。通过nuxt.config的标头对象从CDN加载Vue：

script: [
  {src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js'}
],

将导致在运行时加载Vue。在进行运行时模板时，请记住将完整的软件包与编译器一起加载。现在，仅为客户端创建一个插件（将模式设置为“ client”或将您的文件命名为my-script.client.js）并将其放置在〜/ plugins目录中：

plugins: [
  {src: '~/plugins/my-script', mode: 'client' }
],

在my-script.js中，您可以创建一个新的Vue（），它将安装一个* .vue SFC：

import Vue from 'vue'; // Not sure if this is strictly required
import MyComponent from '@/components/MyComponent.vue';

new Vue({
  render: h => h(MyComponent)
}).$mount('#app');

显然，要使其正常工作，您需要在预渲染的代码中添加一个ID为#app的div。