我嘗試使用 Symfony 應用程式學習 vuejs。我有一個我不明白的問題...
使用“正常”檔案 products.js
import { createApp, h } from 'vue';
const template = '<h1>Hello {{firstName }}! </h1>'
const app = createApp({
data() {
return {
firstName: 'test',
}
},
template: template
}).mount('#app')
window.app = app;
上面的代碼在我的 index.html.twig 中顯示了“Hello test”
我想在單檔案組件中做，因為我喜歡它，但是使用下面的代碼，它什么也沒顯示。警告是：
[Vue warn]: Component is missing template or render function. at <Products> at <App>
產品.js
import { createApp, h } from 'vue';
import { createWebHashHistory, createRouter } from "vue-router";
// components
import App from './pages/products';
const app = createApp({});
app.component('products', App);
// Router
const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: "/", component: App },
],
});
app.use(router);
app.config.devtools = true
app.mount('#app')
頁面/products.vue
<template>
<h1>Hi !</h1>
</template>
<script>
export default {
name: 'Products',
};
</script>
uj5u.com熱心網友回復：
匯入模板時嘗試添加vue擴展：
import App from './pages/products.vue';
uj5u.com熱心網友回復：
即使用一種簡單的方式來展示一些東西。
import { createApp } from 'vue';
// components
import App from './pages/products.vue';
const app = createApp({})
app.component('products', App)
app.mount('#app')
要不就
import { createApp } from 'vue';
// components
import App from './pages/products.vue';
createApp(App).mount('#app')
我有同樣的警告，它在我的瀏覽器中什么也沒顯示
uj5u.com熱心網友回復：
有用 ！
我只是洗掉了loader: 'vue-loader'我的 webpack（我有.addLoader({test: /\.vue$/,})）配置中的行，然后我就可以看到我的模板了！（但我不明白為什么......）
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/441569.html