vue结构描述如下表：
| 文件夹/文件 | 描述 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件。 |
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .其他文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 这是一个模板文件，同时又是Main.js的展示页面，也可以理解为Index.html的ViewModel是Main.js，Main.js是项目启动的入口。项目启动时Main.js会读取该页面，然后把当前显示的vue文件渲染进该页面。类似于MVC中的layout.cshtml文件的作用。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
src核心
src是我们代码编写的核心文件，其内容如下：
assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用components 目录。
main.js: 项目的核心文件。
Main.js是项目的入口，类似其他语言的Main函数，代码如下：Main.js
import Vue from 'vue'//引入vue.js文件
import App from './App'//引入当前目录下的App.vue文件，【./】指当前目录，【.vue】被隐藏了
import router from './router'//引入当前目录下router文件夹下的Index.js文件 Vue.config.productionTip = false//屏蔽调试时的一些console日志内容
/* eslint-disable no-new */
new Vue({
el: '#app', router,//指定路由的js对象
components: { App },//加载上方导入到组件。
template: '<App/>'//选择一个组件去替换index.html 中的<div id="app"></div>。这里使用我们components导入的App组件，相当于指定初始化时的显示组件，Vue组件注册后可以使用<tagName></tagName>的模式来使用组件。
})
import
import类似其他语言的引入命名空间或引入包，这里主要是用于引入js文件和vue文件。
如果引入的是js文件，则鼠标放到引用上，会显示具体引用路径
new Vue
new Vue这一段是创建一个js的Vue对象，该对象的构造函数，接受一个对象，这里传了一个匿名对象，我们可以看到，new Vue后的圆括号【(】里，跟了一对大括号【{】，然后这个对象里，有几个属性，需要初始化。
el：估计是element的缩写，表示Vue绑定的元素。
router：router是我们上面引入的router文件夹下的Index.js文件，打开文件，代码如下：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', name: 'HelloWorld', component: HelloWorld
}
]
})
代码中开放了一个默认的Router类型的对象，这个对象是vue-router中定义的，用于定义页面跳转路由，这里定义了路径HelloWorld对应导入/components/HelloWorld.vue文件。
ps:export类似于其他语言的public，就是公开该js文件的某个对象或函数，export default就是默认公开的那一个，这样其他js文件使用import导入该js文件时，就可以省略指定对象这几个代码，这种是一个很原始的程序设计风格，大家还需要适应。
App.Vue
App.Vue是Main.js默认加载的模块，其代码如下：
<template>
<div id="app">
<h2>Kiba518</h2>
<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>
这里主要是用于配置路由视图—— ，其他的样式我们可以暂时忽略。
可以看到我们把路由视图(router-view)配置在了一个div中，并且还放在了一个H2下面，这样，我们的这个H2标签就永远会在路由视图上面了。