Vue学习手记08-vue-cli的启动过程
分两种情况---无路由和有路由
无路由
看到启动页面
在文件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多了路由参数
/* 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的启动过程的更多相关文章
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 80 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...
- vue学习笔记（三）： 启动说明
1.启动页面:index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- Vue学习手记02 - 路由
1.项目 注意:项目在初始化的时候没有安装vue-router就需要进行安装 2.安装路由: 在项目中使用ctrl+`, 打开终端, 执行如下命令 npm i vue-router -S 或者 cn ...
- Vue学习记录-初探Vue
写在开头 2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面. 从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative ...
- vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤
通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...
- day 83 Vue学习三之vue组件
本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...
随机推荐
- iOS 静态、全局变量、常量
关键字static 两个概念:生命周期.作用域生命周期:这个变量能存活多久,它所占用的内存什么时候分配,什么时候收回.作用域:这个变量在什么区域是可见的,可以拿来用的. static分两种情况:修饰局 ...
- Android笔记(六十四) android中的动画——补间动画（tweened animation）
补间动画就是只需要定义动画开始和结束的位置,动画中间的变化由系统去补齐. 补间动画由一下四种方式: 1.AplhaAnimation——透明度动画效果 2.ScaleAnimation ——缩放动画效 ...
- ccze - A robust log colorizer（强大的日志着色器）
这些程序遵循通常的GNU命令行语法,长选项以两个破折号(` - ')开头.选项摘要如下. -a, - argument PLUGIN = ARGUMENTS 使用此选项将AR ...
- SpringBoot -基础学习笔记 - 01
SpringBoot个人笔记-szs 一.使用thymeleaf模板引擎来指定所需资源的位置 可以做到当项目名进行更改后,模板引擎也会进行更新相关的路径;如下图展示,会自动添加crud根目录! < ...
- 怎么保证redis集群的高并发和高可用的?
redis不支持高并发的瓶颈在哪里? 单机.单机版的redis支持上万到几万的QPS不等. 主要根据你的业务操作的复杂性,redis提供了很多复杂的操作,lua脚本. 2.如果redis要支撑超过10 ...
- 0032ActiveMQ之java编码实现生产者和消费者操作队列queue
今天学习了入门级的用java编写生产者producer和消费者consumer操作activemq的queue队列,为了之后复习回顾,现做整理如下: maven工程的搭建此处不再讲解,在maven工程 ...
- 启动Vue项目，提示：Cannot find module 'webpack/bin/config-yargs'
"webpack-dev-server": "^2.11.5"
- 【Python】编程小白的第一本python(最基本的魔法函数)
Python官网中各个函数介绍的链接:https://docs.python.org/3/library/functions.html 几个常见的词: def (即 define,定义)的含义是创建函 ...
- （java）selenium webdriver学习--打开新窗口，并判断新窗口是否与目标窗口一致
描述:selenium webdriver学习--打开新窗口,并判断新窗口是否与目标窗口一致,若一致则切换到该窗口并获取标题 跳出if判断,获取父级标题,并关闭 HTML标签不太明显时,可以用路径表示 ...
- cookie,session,token介绍
本文目录 发展史 Cookie Session Token 回到目录 发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录谁在某一段时间里都浏览了什么文档 ...