vue-cli3.x构建的项目的运行顺序

刚学vue表示彻底蒙圈,流程还是再来梳理一遍吧,如果项目是怎么运行的都不清楚的话,那学起来肯定是很蒙蔽的
 整个项目的结构我们再来看一遍
vue-cli3.x构建的项目的运行顺序_第1张图片
项目让你访问:http://localhost:8080

vue-cli3.x构建的项目的运行顺序_第2张图片
注意,重点来了这个不理解,项目可以不用学了
执行流程:入口文件main.js
main.js
vue-cli3.x构建的项目的运行顺序_第3张图片
解释:
vue被导入然后new一个实例,通过el:'#app'找到index.html里面的 id为app的标签
又因为这个实例中有template属性,因此,index.html里面id为app的内容整个将会被替换成
接着components:定义了一个组件App ,这个组件是通过import App from './App'中导入的
因为原本 index.html中的id为app的标签整个已经被替换成了 ,这相当于是在调用了这个组件
接着我们继续找到这个组件App.vue(如果你还是看不懂这段话,再去vue官网看看组件的定义和调用)
->App.vue
vue-cli3.x构建的项目的运行顺序_第4张图片
->接着就要回到main.js中查看是否引入了rooter
vue-cli3.x构建的项目的运行顺序_第5张图片
->去找到router
vue-cli3.x构建的项目的运行顺序_第6张图片
到这里整个项目流程算是走通了,我的乖乖,前端都那么牛叉了么,学的越多,知道的就越少,-_-||
 

你可能感兴趣的:(vue)