vue3这个代码运行后，为什么没显示
0
[已解决问题]
解决于 2023-06-20 16:48
<template>
<div class="hello">Hello {{who}}</div>
</template>
<script>export default{
name: "abc",
data: function() {
return {
who: 'world'
}
}
}
</script>
<style>
.hello {
background-color: #ffe;
}
</style>
上面存为my-component.vue
<!doctype html> <html lang="en"> <head> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/http-vue-loader"></script> </head> <body> <div id="my-app"> <my-component></my-component> </div> <script type="text/javascript"> Vue.createApp({ components: { 'my-component': httpVueLoader('my-component.vue') } }).mount('#my-app') </script> </body> </html>
上面存为index.html
打开浏览器后 面页什么都没有显示。
后来看了例子：要查看页面引入vue组件的效果不能直接在本地打开index.html，会有跨域问题，可以在本地配置一个nginx转发
于是我启动了nginx，浏览http://localhost:port/index.html
还是什么都没有
这是为什么？？？
最佳答案
0
我建议你初学呢就不要管他的 单文件组件，就是后缀名叫 .vue 的文件，你直接这样全部写到 HTML 里面
<!doctype html>
<html lang="en">
<head>
<style>
.hello {
background-color: #ffe;
}
</style>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="my-app">
<div class="hello">Hello {{who}}</div>
</div>
<script type="text/javascript">
const app = {
name: "abc",
data: function() {
return {
who: 'world'
}
}
}
Vue.createApp(app).mount('#my-app')
</script>
</body>
</html>
奖励园豆：5
