main.js和App.vue位于同级目录。
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' //引入之后就可以直接new Vue({ })使用了
import App from './App' //引入主组件
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App }, //App是上面import引入的App；
template: '<App/>'
})
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</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>标签即模板，里面都是html标签
引入其他的组件，可以在<script>标签中引入，关键字import
然后再实例化对象里componts组件里给子组件自定义名称，在<template>使用
个人总结：
1、html文件中基本不写什么东西，只是写一个组件标签。
2、入口的main.js文件引入vue框架 和 App.vue主组件，然后实例化vue对象，在components属性中定义组件名（把引入App.vue主组件定义一个名字，返给html文件运用）
3、App.vue主组件，里面集合了html、js、css语法，在此主组件文件中，也可以引用其他子组件，引用时在script标签所在的js中，用import引入，然后在实例化vue对象中的components中定义名字，然后在template所在的html中运用。
4、子组件在components文件中，一般此文件夹中放置的都是子组件，被App.vue主组件引用。
引用：
