VUE启动的流程 vue.js项目main.js、App.vue、page/index.vue的引用调用关系

 

1. main.js 是我们的入口文件，主要作用是初始化vue实例并使用需要的插件

import Vue from 'vue'
import App from './App'

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

 

1. App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</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>

 

1. index.html文件入口

2. src放置组件和入口文件

3. node_modules为依赖的模块

4. config中配置了路径端口值等

5. build中配置了webpack的基本配置、开发环境配置、生产环境配置等

vue程序的流程

快速使用
程序入口(manage.py)：相当于manage.py
　　　　App.vue
　　　　　　相当于页面，
　　　　　　- 组件名称【组件1(/index )，组件2(/course)，组件3】
-　　　　　　 空容器 点击上边的组件名称以把组件中的内容放到这个主页面的空容器中
　　　　main.js

　　　　　　　 这相当于主函数，由他来new了一个Vue 对象 好对this都是指的这个主函数，Vue

路由(urls.py)：
　　　　router/index.js 存放在这里 一个一个的路径
　　　　/index Course1.vue 这就是对应的关系
　　　　/course Course2.vue
组件(views)： 相当于每个views视图
　　　　Course1.vue (每个py文件，存放当前业务的所有功能)
　　　　Course2.vue (每个py文件，存放当前业务的所有功能)
　　　　Course3.vue (每个py文件，存放当前业务的所有功能)