vue.js入门（17）介绍src文件流程及根组件

public/index.html为入口文件，然后进入main.js

<!--main.js-->
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

new Vue({
    el:'#app',
     template:'<App/>',
    components:{ App }
})

由于已经引入了vue文件，所以就可以直接new vue对象，这个就类似于当时用script引入

template是模板，（根标签），里面可以给对应的div，或者是现在这个，组件对应调用标签

components组件，要想模板可以调用组件，需要在components里面注册一下这个组件这个APP在上面也引入了.

所以这个时候和APP.vue文件产生了关联，所以接下来进入APP.vue文件

APP.vue里面包含三个部分，1.模板html结构 2.行为，处理逻辑 3.样式css

//APP.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>


<script>
import HelloWorld from './components/HelloWorld'
export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>


<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

template，用它包起来，并且里面有且只能有一个根标签

import HelloWorld from './components/HelloWorld'这个路径是components下对应的helloworld.vue文件

HelloWorld是一个组件，可以理解成事一个功能的页面，要产生关联，需要在components里面进行注册

要是让两个组件产生关联，首先要import，然后components里面注册，接着就可以在template里面调用了

然后进入helloworld.vue文件

vue.js入门（17）介绍src文件流程及根组件

猜你喜欢