Vue框架项目实战整理:3、Vue项目执行流程分析(一)
声明:本教程不收取任何费用,欢迎转载,尊重作者劳动成果,不得用于商业用途,侵权必究!!!
目录
二、回顾项目启动
三、执行流程分析
1、打开项目
2、执行流程分析
一、前言
上两篇讲了 Vue框架项目实战整理:1、开发工具介绍、快速启动Vue 和 Vue框架项目实战整理:2、Vue环境搭建,今天应该到Vue项目执行流程分析的时候了,为什么会有这方便的研究呢?因为接触Android开发也将近7年了,根据编程经验当时的想法是整个项目的执行流程都清晰了,到时候如果有机会自己搭建Vue项目架构就会得心应手、独挡一面了,毕竟语言是相通的......好了,绕的有点远开始干货。。。
二、回顾项目启动
指定项目目录
cd 项目路径 ,
如:cd /Users/luminal/Documents/LuminalCode/Luminal_Web_H5/vue_project/demodemoyyh
启动项目
npm run dev
demodemoyyh文件下面的目录:
命令行界面:
显示效果界面:
三、执行流程分析
1、打开项目
首先把项目demodemoyyh用工具sublime Text 或Visual Studio Code、idea 打开展示
2、执行流程分析
项目创建成功,启动后会在浏览器中打开,接下来我们来分析下它的执行流程
(1)进入页面首先加载index.html
(2)main.js文件中给id="app"的div创建一个Vue的实例
(3)这个Vue的实例,Vue在调用render方法时,会传入一个createElement函数作为参数,
也就是这里的h的实参是createElement函数,然后createElement会以App为参数进行调用。
然后跳转到App.vue
(3)跳转到App.vue进行加载,然后显示页面
Hi竹子: 重新安装node,那你在nvm中安装的不使用吗?
CSDN-Ada助手: 推荐 网络 技能树:https://edu.csdn.net/skill/network?utm_source=AI_act_network
普通网友: 这篇文章真是一篇佳作!作者运用了生动有趣的语言,将枯燥的理论知识娓娓道来,让人如沐春风。【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】
普通网友: 优质好文,细节很到位!【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】
普通网友: 这篇文章真是一篇佳作!作者运用了生动有趣的语言,将枯燥的理论知识娓娓道来,让人如沐春风。【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】