1. 首页文件:index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>quna.com</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2. 其中body中就一个div id="app",这个div就是一个vue实例,该实例在src下的main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
同时,该实例还引入了一个名为APP的组件
components: { App },
3. App.vue组件的代码结构
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
包括了template、script、style标签
template标签内是:组件的子组件template内容;script标签是:组件的js内容,包括了组件实例的各个属性,函数,方法,注意的是,script中有组件的导出默认名字;style标签中是:样式
4. 对Vue实例以及Vue实例中组件App.vue的解读:
项目入口文件index.html中div#app用到了Vue实例,Vue实例是main.js文件,引入vue,引入了App文件下App.vue组件,引入router文件下的index.js文件(router和Vue实例相似,都是js文件,同时都有自己的组件,但Vue实例引入了router,并可以使用router)
App.vue引入到Vue实例的名字是App,那么components和template中的名字必须是App。
App组件中是html结构,其中用到了router的router-view标签,router-view标签用的了HelloWorld组件。
所以:页面内容是有App组件和HelloWorld组件共同决定的。
5. 在main.js文件中(vue实例文件),
引入router文件下的文件(index.js)
就可以在vue实例的组件(App.vue)中使用,通过<router-view>标签直接调用router内容
而router文件下的文件(index.js),导入系统中的vue和vue-router,导出了一个Router对象,其中Router对象里,设置了路由。还引入了自定义组件HelloWorld.vue,那么HelloWorld组件内容将在App.vue组件中,而App.vue组件在Vue实例中,然后Vue实例在页面中展示。
6. 路由,各个组件都在路由中,各个页面的路径也都由路由决定,以及组件都包含在router-view中
实例组件App.vue中:router-view标签内包含了所有的页面
router的设置:引入了组件页面,设置了各个页面的路径