0

问题：使用默认的 vite/typescript 进程如何使用根元素的 HTML 作为模板，因为它在安装时会被清除？

我了解应用程序安装过程在 v3 ( https://v3.vuejs.org/guide/migration/mount-changes.html#_3-x-syntax) 中有所不同，但一般来说，应该有一种方法能够安装和使用 innerHTML 来安装元素。

在后台，vue3 应用程序将被挂载到现有的 CMS，因此页面上有 HTML。IE

<div id="app">
  <div class="navigation"> <!-- this is from the cms -->
  </div>
  <div class="content">
  </div>
</div>

Vite 打字稿默认引导程序：

import { createApp } from 'vue'
import App from './App.vue'
import "./style.css"


createApp(App).mount('#app')   // App doesn't have a template

已安装的元素被清空，因此 CMS 结构丢失，因此尝试确定能够编译根元素的 innerHTML 或将其用作某种默认插槽的最佳方法。我不能把它变成一个 SPA。

包.json

{
  "name": "alpha-frontend",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.3.2",
    "@tailwindcss/typography": "^0.4.0",
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@tailwindcss/jit": "^0.1.18",
    "@vitejs/plugin-vue": "^1.2.1",
    "@vue/compiler-sfc": "^3.0.5",
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.9",
    "tailwindcss": "^2.1.1",
    "tailwindcss-responsive-embed": "^1.0.0",
    "typescript": "^4.1.3",
    "vite": "^2.1.5",
    "vue-tsc": "^0.0.15"
  }
}

如果我从 cdn 中包含 vue 3，它实际上会编译#app元素的模板并且似乎工作正常，但我无法确定如何让它与 typescript/vite 构建过程一起工作。

 const app = Vue.createApp({
  el: '#app',
  
  data() {
    return {
        
    }
  },
  created() {
  
  },
});

app.mount('#app')
4

0 回答 0