Загрузочный проект 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')