目录
㋀㋊
✎ my-project 项目整体结构
◆ my-project 整体结构解析
◆ main.js 解析
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
/*
* 1.import Vue引入Vue
* 2.import App引入入口App.vue组件,在vue-cli中所有的组件的后缀名是.vue
* 3.import router引入路由文件
*/
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false // 这个不用管,特定模式下提示信息是否显示
/* eslint-disable no-new */
/**
* Vue实例化和配置相应参数
* el 标识挂载元素
* router路由配置
* components 所有Vue实例的组件
* template 组件的默认模板
*
* 项目初始化过程中会有一个Vue实例化的过程,在前面我们进行页面的编写的过程中都会
* new Vue实例化的过程,当前这里跟之前的也会有配置参数
*/
new Vue({
el: '#app',
router,
components: {
App
},
template: '<App/>'
})
/*
* 当实例化完成之后会进入App.vue里面来,访问相应端口的时候访问的是App.vue组件
**/
◆ App.vue解析（vue基本机构解析）
<template>
<!-- template标记，组件的模板 -->
</template>
<script>
/*
* 组件的脚本部分
* 之前是通过new Vue({})，以后可以通过在script里面
export default {
name: 'App'
}
**/
</script>
<style>
/**
* 组件设计的样式
*/
</style>
有了App.vue之后在components中还有HelloWorld.vue，疑问？App.vue和HelloWorld.vue有什么关系呢？
答：其实就设及到了router文件，index.js里面相应的内容。
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'Vue.use(Router)
export default new Router({ // 定义router实例和对应router实例信息
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
斜杠访问的就是HelloWorld.vue组件，这个组件会被添加到App.vue template里面的<router-view/>位置
◆ 总结
首先先从main.js进行vue的一个渲染，根实例渲染的一个过程中呢最指明一个组件为｛App｝，即App.vue。
