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

无路由

看到启动页面

在文件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. maccms 山寨站点 V10 后门

    经验证:www.maccmsv10应该是个山寨站 -------------------- 前言 苹果CMS是国内优秀的开源PHP建站系统,擅长电影程序影视系统这一块,在主流建站系统中特色鲜明,以灵活 ...

  2. java web编程 servlet

    先从请求的信息里面获取协议,版本协议如果是1.1结尾的就报错,也就是我们常见的405报错: 405是协议请求方式错误,所以要重写doget或者dopost方法,直接调用父类的get和post方法是会报 ...

  3. IIS-This configuration section cannot be used at this path.

    Q:在IIS上部署web后,游览器打开报以下异常: This configuration section cannot be used at this path. This happens when ...

  4. System V共享内存

    目录 1. 概述 2. System V共享内存API shmget shmat shmdt shmctl 3. 简单的程序 代码实现 common.h shmcreate.c shmrmid.c s ...

  5. DTD学习

    DTD 简介 文档类型定义(DTD)可定义合法的XML文档构建模块.它使用一系列合法的元素来定义文档的结构.DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用. XML文件内部引用: 外部 ...

  6. tomcat 使用quercus-4.0.39 支持PHP

    tomcat  使用quercus-4.0.39  支持PHP   Quercus是Caucho公司采用纯Java开发的一个PHP5引擎.基于开源授权协议GPL发布.Quercus自带很多个PHP模块 ...

  7. Caused by: java.io.IOException: 你的主机中的软件中止了一个已建立的连接。

    org.apache.catalina.connector.ClientAbortException: java.io.IOException: 你的主机中的软件中止了一个已建立的连接. at org ...

  8. SHOI2008 cactus仙人掌图 和 UOJ87 mx的仙人掌

    cactus仙人掌图 题目描述 如果某个无向连通图的任意一条边至多只出现在一条简单回路(simple cycle)里,我们就称这张图为仙人掌图(cactus).所谓简单回路就是指在图上不重复经过任何一 ...

  9. css cursor效果图

    效果图: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset=& ...

  10. simple模式下rabbitmq的代码

    simple模式代码 package RabbitMQ import ( "fmt" "github.com/streadway/amqp" "log ...