vue脚手架cli运行一个项目的原理流程是什么?
在简单学习了vue脚手架开发项目后,对于一个完整的项目运行原理不清楚
main.js->APP.vue->index.html 是如何按照一定顺序去渲染页面的呢?
Vue脚手架cli运行一个项目时的文件运行顺序和运行原理是什么?
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- 木卯彳亍 2023-08-04 13:36关注
(1) index.html的body体内只有一个div标签
,其id为app,
通过这个id连接到main.js的内容
(2) 在main.js中新建了一个vue实例,vue通过js渲染dom结构,在vue构造函数时,需要配置一个el属性,如果没有el属性时,可以用.$mount('#app')进行挂载。这里面的 render: h => h(App) 是下面代码的缩写:render:function(createElement){ return createElement(App); }
实际渲染出来会是这样的
new Vue({ el:'#app', template:'<App><App>', components:{ App } })
就是使用el:#app链接到index.html中的app,并使用template引入组件
(3) 接下来看一下App.vue的内容,里面有个<router-view/>
标签,它会将路由相关内容渲染在这个地方,路由内容就是router文件夹的index.js
(4) 在index.js中将组件发布为路由,到这里,页面的加载渲染过程就结束了。
(5)总结:
①页面的加载过程就是:index.html->main.js->App.vue->index.js->xxx.vue
②main.js通过实例化 vue,把组件和入口页面联系起来本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥100 求懂行的大ge给小di解答下!
- ¥15 pcl运行在qt msvc2019环境运行效率低于visual studio 2019
- ¥15 MAUI,Zxing扫码,华为手机没反应。可提高悬赏
- ¥15 python运行报错 ModuleNotFoundError: No module named 'torch'
- ¥100 华为手机私有App后台保活
- ¥15 sqlserver中加密的密码字段查询问题
- ¥20 有谁能看看我coe文件到底哪儿有问题吗?
- ¥20 我的这个coe文件到底哪儿出问题了
- ¥15 matlab使用自定义函数时一直报错输入参数过多
- ¥15 设计一个温度闭环控制系统