阅读 595

vue-cli 3.0脚手架,从入门到放弃(三)-运行

vue-cli 3.0脚手架,从入门到放弃(二)

我太难了! 写不动了。

运行项目

ps: huilderx 和vscode 都有自己的快速启动,省了自己手动输入。

启动命令:npm run serve

上面是vscode的 快捷启动,编译完成会生成可访问地址,就是那 蓝色的地址。↑ 将其复制到浏览器。

这个时候会出现这个页面,那么问题来了,为什么访问localhost:8080会打开这个页面。如果你能想到这个问题,说明还是个爱思考的孩纸的哦o(* ̄︶ ̄ *)o

启动流程

(以下都是各人思考的,有不对请指出)

在编译后,首先找到index.html页面,在这个页面,会加载我们的配置,比如link之类,meta等,然后找到body里的id=“app”的div

在这里,你会发现,它会跳转到APP.vue这个文件去。但是一般看不到index.html的加载过程(会一闪而过),就会让人觉得没走index.html这个文件。这个时候会把首页加载到<div id="app"> </div>这个里面来。

ok,再看看app.vue这个文件,

这个文件呢,我们一般情况下,什么都不写的,但官方案例会自动创建内容。 里面有个路由跳转,会跳转至两个地方,也就是加载两个页面, home和about。那怎么加载那两个页面的呢? 通过路由配置,router-linkrouter-viewrouter-link里to代即将要进入的目标页面。

看看router.js这个文件 ↓ 关于路由介绍官网 router.vuejs.org/zh/

(我们所有自己创建的 .vue 文件,都要配置到这里来,不然编译器找不到你创建的页面。我们的页面都是由 router路由控制跳转的。) 通过上图↑ routes.js里配置的第一个路径,

{
      path: '/',
      name: 'home',
      component: Home
    },
复制代码

可以看到它的path:'/',代表app.vue里加载的第一个页面,'/'在这里代表首页,它同级的component指向哪个页面,那么首页打开的就是哪个页面。 由于在这个页面上部写了import Home from './views/Home.vue' 也就是给这个路径起了个名字,叫Home,所以下面的component只要写Home就可以了。你也可以直接写成 component: () => import('./views/Home.vue')进行导入。

接下来我们更改下首页看看,先创建个.vue文件,命名 test.vue

然后在router.js 里添加路由,并把home的删掉,test的path改为'/':

然后运行:

这个时候发现,我们的主页被修改了,不是之前的那个hello页面了。

总结

来总结下流程, 从我们npm run serve 开始,打开 localhost:8080 端口,首先会加载index.html。然后去app.vue 里查找路由组件,这是会调动 router.js里的配置,选择首先要打开哪个文件,找到我们的那个 path:'/'的页面,浏览器显示。完成。


写在最后的话, 学习....呵,多么可笑。