Загрузочный проект Vite с использованием шаблона корневого элемента из смонтированного элемента

Вопрос: Используя процесс vite / typescript по умолчанию, как использовать HTML корневого элемента в качестве шаблона, поскольку он очищается при монтировании?

Я понимаю, что в v3 процесс установки приложения отличается ( https://v3.vuejs.org/guide/migration/mount-changes.html#_3-x-syntax), но, вообще говоря, должен быть способ монтировать и использовать innerHTML для смонтированного элемента.

В фоновом режиме приложение vue3 будет подключено к существующей CMS, поэтому на странице будет HTML. т.е.

      <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 корневого элемента, либо использовать его как своего рода слот по умолчанию. Я не могу сделать это СПА.

package.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"
  }
}

Если я включу vue 3 с компакт-диска, он фактически скомпилирует #app шаблона элемента и, похоже, работает нормально, но я не могу определить, как заставить его работать с процессом сборки машинописного текста / vite.

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

app.mount('#app')

0 ответов

Другие вопросы по тегам