main.js

 1 <!--该文件是整个项目的入口文件-->
 2 <!--引入Vue-->
 3 import Vue from 'vue'
 4 
 5  <!--引入App组件，它是所有组件的父组件-->
 6 import App from './App.vue'
 7 
 8 <!--关闭vue的生产提示-->
 9  Vue.config.productionTip = false
10   
11 <!--创建Vue实例对象-------vm-->
12 new Vue({
13         <!--将App组件放入容器【引入的Vue并非完整的，缺少模板解析器。所以用render】-->
14         <!--.$mount('#app')相当于el:'#app'-->
15         render: h => h(App),
16 }).$mount('#app')

 

App.vue

 1 <!--App组件结构-->
 2 <template>
 3       <div>
 4 <!--静态资源放assets文件夹-->
 5       <img alt="Vue logo" scr="./assets/logo.png">
 6       <School></School>
 7 </template>
 8 
 9 <!--App组件交互-->
10 <script>
11 <!--引入School组件，新建的组件放components文件夹-->
12 import HelloWorld from './components/School.vue'
13 
14 export default{
15        name:'App',
16        components:{
17           School
18         }
19 }
20 </script>
21 
22 /*App组件样式。根据需求写或不写样式
23 <style>
24 </style>
25 */

 

School.vue

 1 <!--template导入之后就没了，所以需要div包住里面的-->
 2 <template>     
 3       <div class="demo">
 4             <h2>学校名称：{{schoolName}}</h2>
 5             <h2>学校地址：{{address}}</h2>
 6             <button @click="showName">点我提示学校名</button>
 7       </div>
 8 </template>
 9 
10 <!-- name:'School'命名组件名为School。<script>中包含可以交互的。比如data、methods、watch、computed-->
11 <script>
12 <!--暴露结构以便导入-->
13       export default{      
14             name:'School',   
15             data(){
16                  return{
17                     schoolName:'尚硅谷',
18                     address:'北京'
19                   }
20               }
21          }，
22          methods:{
23               showName(){
24                  alert(this.schoolName)
25                }
26            }
27          }
28 </script>
29 
30 <!--可以没有style。如果不需要样式-->
31 <style>
32     .demo{
33         background-color:orange;}