分析vue脚手架

执行流程：

执行npm run serve。找到了main.js文件，之后引入Vue、App等等。后来找到App组件，发现里面用到了组件School，于是执行School组件，最终汇总到App组件。通过main.js的render函数将App组件放入容器。然后找到index.html就放到里面创建的容器app

 

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       </div>
 8 </template>
 9 <!--App组件交互-->
10 <script>
11 <!--引入School组件，新建的组件放components文件夹-->
12 import School 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;}

 

index.html

 1 < !DOCTYPE html>
 2 <htmL Lang="en">
 3    <head>
 4         <meta charset="utf-8"> 
 5 <!--针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面-->
 6         <meta http- equiv= "X -UA- Compatible" content="IE=edge">
 7 <!--开启移动端的理想视口-->
 8         <meta name="viewport" content= "width=dev ice-width, initial-scale=1.0">
 9 <!--配置页签图标-->
10         <link rel="icon" href="<%= BASE_ URL %> favicon. ico">
11   <!--配置网页标题。不用过分关注-->
12         <title> <%= htmLWebpackPlugin. options.title %></title>
13        
14    </head>
15    <body>
16    <!--当浏览器不支持js时noscript中的元素就会被渲染-->
17          <noscript>
18                 <strong>We're sorry but <%= htmLWebpackPlugin.options.title %> doesn't work.................</strong>
19          </noscript>
20 <!--容器-->
21          <div id="app"></div>
22          <!-- built fi les will be auto injected -->
23   </body> 
24 </html>

 

posted @ 2021-10-23 10:51  曲奇酸奶  阅读(81)  评论(0)    收藏  举报