分两种情况---无路由和有路由

无路由

看到启动页面

在文件main.js( vue项目的入口文件)中

这里可以看到,生成了一个全局的vue实例,绑定在了#app上面,也就是在文件index.html中的那个div。
然后这个vue实例,使用的是 ./App这个组件,然后模板是:'<App/>',这就是说明是用App组件进行渲染的。

再看index.html文件

然后接着看App.vue

App.vue 这个组件中,模板中就是一个img,下面是一个的组件,在'./components/HelloWorld'中。
引用组件import HelloWorld from './components/HelloWorld' , 再看一下hello.vue这个组件,基本就是下面的各个链接了


有路由(重要)

文件index.html没有变化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>leyou-manage-web</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

入口文件main.js多了路由参数


import router from './router'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

App.vue文件多了router-view

<template>
<router-view></router-view>
</template> <script>
export default {
name:"App"
}
</script>

也就是说路由会替换掉这个router-view进行显示

再看router/index.js

也就是说‘/’默认路由会使用Helloword这个组件进行显示了,添加其他的路由再对应上相应的组件即可进行显示。

Vue学习手记08-vue-cli的启动过程的更多相关文章

  1. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  2. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

  3. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  4. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  5. day 80 Vue学习一之vue初识

    Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...

  6. vue学习笔记(三): 启动说明

    1.启动页面:index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. Vue学习手记02 - 路由

    1.项目  注意:项目在初始化的时候没有安装vue-router就需要进行安装 2.安装路由: 在项目中使用ctrl+`, 打开终端, 执行如下命令 npm i vue-router -S 或者 cn ...

  8. Vue学习记录-初探Vue

    写在开头 2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面. 从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative ...

  9. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  10. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

随机推荐

  1. SQL统计部门人数,人数为0的部门也要显示出来

    相同点:它们都以一张部门表(或类别表),其它表都有部门编号DepartmentID(类别编号) 案例一:一张表 select c.DepartmentID,c.DepartmentName, t.Nu ...

  2. python(字典函数/操作)

    一.字典操作 1.往字典中添加键值对 dict["key"] = "value" stu = {"} stu["sex"] = & ...

  3. Json序列化 总结

    案例总结:https://www.cnblogs.com/jsll/p/11855349.html public string Json_GetDepartment_Position(...)//st ...

  4. RestTemplate的GET与POST

    发送GET请求: //设置请求头HttpHeaders headers = new HttpHeaders(); headers.add("token",PostUtils.get ...

  5. Linux的环境配置文件----.bashrc文件(转)

    Linux的环境配置文件----.bashrc文件   .bashrc文件主要保存个人的一些个性化设置,如命令别名.路径等.也即在同一个服务器上,只对某个用户的个性化设置相关.它是一个隐藏文件,需要使 ...

  6. 迷你商城后台管理系统————stage3项目部署测试汇总

    系统测试 在项目部署到云服务器之前,已通过本机启动springboot程序,访问localhost:8080,输入登陆的账户等一系列操作测试:功能测试.健壮性测试,系统已满足用户规定的需求. 系统部署 ...

  7. Andrew Ng机器学习 五:Regularized Linear Regression and Bias v.s. Variance

    背景:实现一个线性回归模型,根据这个模型去预测一个水库的水位变化而流出的水量. 加载数据集ex5.data1后,数据集分为三部分: 1,训练集(training set)X与y: 2,交叉验证集(cr ...

  8. 微信小程序---存储本地缓存数据

    微信小程序之数据缓存 开发中常用setStorageSync来实现本地数据缓存操作 (1)点击缓存案例: <button bindtap="toStorage">存储& ...

  9. 团队作业Beta冲刺--第二天

    团队作业Beta冲刺 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 你们都是魔鬼吗 作业学习目标 (1)掌握软件黑盒测试技术:(2)学会编制软件 ...

  10. 自定义创建vue文件代码块

    "vue-component": { "prefix": "vue-component", "body": [ &quo ...