首页 新闻 搜索 专区 学院

vue3这个代码运行后,为什么没显示

0
[待解决问题]
<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

还是什么都没有

 

这是为什么???

还没有的主页 还没有 | 小虾三级 | 园豆:527
提问于:2022-04-11 23:04
< >
分享
所有回答(1)
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>
by.Genesis | 园豆:2666 (老鸟四级) | 2022-04-13 09:44
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册