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-link和router-view， router-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：'/'的页面，浏览器显示。完成。

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