vue项目结构详解

main.js 是项目的入口文件

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: ''
})

1.new Vue 定义了一个vue根实例，它挂载到一个el:"#app" id等于app的元素上,app我们在index.html上可以看到 
,所以说el:"#app"指的就是挂载在index.html上
的元素

index.html

2.查看index.html 


  
    
    
    
  
  
    

    
  

components: { App }

components: { App } 是一种es6的写法，实际是components: {App：App }的简写，在es6语法，如果key-value的键值一致的，可以简写，这段代码就是我们项目里面用了个局部组件App，然后在外层我们给这个组件的名字也取为App

template: ''

  template: '' 顾名思义是模版，意思就是把这个App组件给渲染出来，这个App从哪里来的呢，就是项目下的App.vue 这个组件，通过import App from './App'导入过来的

App.vue

App.vue 由,,三部分组成，当一个文件以vue结尾的话，我们管它叫做组件，单文件，组件的模版放中间，组件的逻辑放在中间，组件的样式放在标签之间