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

无路由

看到启动页面

在文件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. 
						
  2. day 81 Vue学习一之vue初识
		
      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...
    
		
    3. 
						
  3. day  82  Vue学习三之vue组件
		
      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
    
		
    4. 
						
  4. day 81  Vue学习二之vue结合项目简单使用、this指向问题
		
    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六  ...
    
		
    5. 
						
  5. day  80   Vue学习一之vue初识
		
    Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...
    
		
    6. 
						
  6. vue学习笔记（三）： 启动说明
		
    1.启动页面:index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
    
		
    7. 
						
  7. Vue学习手记02 - 路由
		
    1.项目  注意:项目在初始化的时候没有安装vue-router就需要进行安装 2.安装路由: 在项目中使用ctrl+`, 打开终端, 执行如下命令 npm i vue-router -S 或者 cn ...
    
		
    8. 
						
  8. Vue学习记录-初探Vue
		
    写在开头 2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面. 从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative ...
    
		
    9. 
						
  9. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤
		
    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...
    
		
    10. 
						
  10. day 83 Vue学习三之vue组件
		
    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. [转]数据库性能优化（老Key）
			
    数据库性能优化一:数据库自身优化(大数据量) https://www.cnblogs.com/AK2012/archive/2012/12/25/2012-1228.html 数据库性能优化二:数据库 ...
    
			
    2. 
						
  2. Xen们和Open Stack们
			
    1.虚拟化技术:XEN.KVM.ESXI 2.虚拟化管理:Eucalyptus, OpenNebula, OpenStack, OpenQRM, XenServer, Oracle VM, Cloud ...
    
			
    3. 
						
  3. DRF 有无外键操作实例
			
    models.py from django.db import models # Create your models here. class Category(models.Model): &quo ...
    
			
    4. 
						
  4. dede 对 单个 字段 编辑
			
    {dede:field.body runphp='yes'} $body = str_replace("src=\"/uploads","src=\" ...
    
			
    5. 
						
  5. 22，Django常用命令
			
    学习Django你需要了解常见命令的使用,比如创建项目,创建应用,创建超级用户,数据表创建及更新,启动服务器等.这些命令都包含在django-admin.py和manage.py里.除此以外manag ...
    
			
    6. 
						
  6. request-html 登陆百度
			
    import asyncio from requests_html import HTMLSession url = 'https://passport.baidu.com/v2/?login& ...
    
			
    7. 
						
  7. memcached的缺点
			
    上篇博客说了为什么引入memcached,主要讲述了memcached的优点,接下来就是我们在使用中必须要注意的内容,memcached的缺点,只有正确认识它,才能运用自如,接下来先看一下memcac ...
    
			
    8. 
						
  8. DT二次开发之-资讯列表中调用 TAG 关键词
			
    资讯列表加文章关键词:(列表或搜索主字段加上 ,tag) {if $t[tag]} <p class="key"> 关键词: {php $tag = str_repla ...
    
			
    9. 
						
  9. asp、aspx、php、jsp万能密码大全【笔记】
			
    asp aspx万能密码 1:"or "a"="a 2: ')or('a'='a 3:or 1=1-- 4:'or 1=1-- 5:a'or' 1=1-- 6: ...
    
			
    10. 
						
  10. docker的笔记
			
    docker run 命令 docker run ubuntu:15.10 /bin/echo "Hello world" 各个参数解析: docker: Docker 的二进制执 ...
    
			
    11.