(四)新建一个简单的vue程序

1：在main.js里面添加自定义的Test.vue页面,Test.vue建在components下面

import { createApp } from 'vue' //import App from './App.vue' import App from './components/Test' createApp(App).mount('#app1')    2：Test.vue的内容 <template>   <div id="sty1">     我来自Test.vue     <say-hi/>   </div> </template> <script> import SayHi from './SayHi.vue';   export default{     name: "TestNamesys",     components: {           SayHi     }   } </script> <style>   #sty1{     width: 200px;     height: 200px;     background-color: pink;   } </style>   3：SayHi.vue页面内容 <template>     <div class="sty2">         我来自SayHi.vue         <p>{{ message }}</p>         <button @click="show_my_value()">点击弹框</button>     </div> </template> <script> export default {     data() {         return {             message: 'Hello~俺是SayHi',             my_value : '弹出框内容'         }     },     methods: {         show_my_value: function(){             alert('yes  ' + this.my_value);         }     } } </script> <style>     .sty2{         width: 150px;         height: 100px;         background-color: rgb(177, 120, 231);         color: white;     } </style>

标签：vue,新建,App,程序,color,Test,import,SayHi
来源： https://www.cnblogs.com/yingxianqi/p/15950916.html