源码地址： https://github.com/liufeiSAP/vue2-manage
我们的目录结构：
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码. |
| config | 配置目录，包括端口号默认配置. |
| node_modules | npm 加载的项目依赖模块 |
| src |
我们的开发目录，基本上绝大多数工作都是在这里开展的
|
| static | 资源目录，我们可以把一些图片啊，字体啊，放在这里。 |
| test | 初始测试目录，没用，删除即可 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。基本不用管，放着就是了 |
| index.html | 首页入口文件，如果是开发移动端项目，可以在head区域加上你合适的meta头 |
| package.json | 项目配置文件。前期基本不用管，但是你可以找一下相关的资料，学习一下里面的各项配置。至少，要知道分别是干嘛的。初期就不管了。 |
| README.md | 不用管 |
如上，基本上就是这么个情况。重要的，还是src文件夹。
Index.html
项目的首页入口文件，如下：body的app关联SRC/App.vue.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>back-manage</title> </head> <body> <div id="app"></div> </body> </html>
當然也可以沒有index.html, 而是直接把模板写道App.vue中：
<template> <div id="app" > <navigation></navigation> <side-navigation></side-navigation> <router-view></router-view> <ooter></footer> </div> </template>
SRC:
Aapp.vue
App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。
. 将html、js、css写到一个后缀名.vue的文件中，区分这三种类型用<template>、<script>、<style>，这个.vue文件在打包的过程中会被转换成浏览器能识别的传统html、js、css。
<template> <div id="app" class="fillcontain"> <!-- 对应的组件内容渲染到router-view中 --> <router-view></router-view> </div> </template> <script> export default { } </script> <style lang="less"> @import './style/common'; </style>
fillcontain是在 ./style/common 中定义的样式。
export default {}: 导出模块，提供给其他模块使用。 其他模块import的东西一定是要export的才能用。
<router-view></router-view>: 这块是渲染路由组件，看下面的解释。
关于router :
(1) 定义route, 两个部分组成： path和component。 path 指路径，component 指的是组件
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
(2) 创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
const router = new VueRouter({ routes // routes: routes 的简写 })
(3) 把router 实例注入到 vue 根实例中,就可以使用路由了
const app = new Vue({
router
}).$mount('#app')
(4) 当用户点击 router-link 标签或超链接时，会去寻找它的 to 属性， 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home}
path 一一对应，从而找到了匹配的组件， 最后把组件渲染到 <router-view> 标签所在的地方;
<el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>
main.js： 主要作用是初始化vue实例（new VUE）并使用需要的插件
vue 构造传入的参数有： 数据(data)，模板(tamplate)，挂载元素(el)，方法(methods)， 路由， store等
/*引入Vue框架*/ import Vue from 'vue' import App from './App' import router from './router' import store from './store/' import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.config.productionTip = false; /*使用ElementUI(一个桌面端组件库)*/ Vue.use(ElementUI); new Vue({ el: '#app', // 表示这个vue实例和DOM中ID是app的关联el是vue实例化的选项（index.xml），提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。 可以是 CSS 选择器，也可以是一个 HTMLElement 实例。 router, // 路由信息 store, // 存储相关 template: '<App/>', // <App />他就是App.vue，template就是选择vue实例要加载哪个模板。最新的vue-cli脚手架模板现在是这个形式。 // App.vue是主程序，其他所有的.vue都是放在App.vue中，所以只需要加载App.vue就完全可以把其他的东西加载出来。 components: { App } }) // 这个App表示的就是App.vue， 表示使用App.vue作为组件
总结： App.vue就是一个组件，里面有template的定义（其实就是HTML），script脚本行为，以及样式等；
main.js 是实例化组件的地方，el指明了这个实例Vue挂载到什么dom元素下； template指明了显示什么；component指明了绑定哪个组件。