文章目录
main.js引入文件
https://www.cnblogs.com/chenleideblog/p/10484554.html
https://blog.csdn.net/bujiongdan/article/details/81416100
app.vue是一个根组件,main.js 是一个入口文件,index.html是项目入口
index.html有的时候放在public文件夹下
app.vue里实际上就是定义了一个可以操作的vue模板区域,export default实际上就是把这个根组件暴露出去的意思,也可以在里面定义一下组件的名字
main.js里从app.vue里引入app,从vue的js文件里引入vue,之后写new vue,el里是要操作的组件的id,组件里写App,就是app.vue这个根组件的意思
实际上,浏览器访问的第一个文件是index.html,里面有一个id为app的挂载点,之后vue的根实例挂载在上面
main.js里新建一个vue实例,里面使用el声明要挂载的对象的id
实例components: {App }注册了一个局部的组件–App,局部组件实际上是来自于app.vue,template: ''表示起模板是组件app.vue里的template里的内容
所以main.js这个文件就是先把App.vue引入为App对象,之后新建一个vue实例把App.vue作为一个组件注入到index.html里的id为app的元素里,使用app里的模板也就是template里的内容取代元素内容
所以实际上项目运行的时候,main.js是项目的入口文件,运行时通过它找到实例需要挂载的位置,一开始是显示挂载点的内容,之后立刻使用实例注入的组件里的模板的内容取代
main.js里一般会把路由传进去
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
import Vue from 'vue'
import router from './router'
import store from './store'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#ap