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文件