在上一篇文章中，主要尝试了vue的小demo，应用了一些vue的指令、属性等，且是在浏览器端直接开发的，但是在开发大程序中这些是远远不够的。那么开发大型项目时，如何使用vue呢？
这就用到了单页面组件，如何搭建？即：通过npm安装vue-cli，这点官网上介绍的很明白了：
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
浏览器中即出现：
看一下项目的组织结构：
具体可以看官方文档，这里简要分析一下：
build:构建配置文件，config:node的配置文件，src：网站的源码所在，static：可以放置一些静态文件资源，test：单元测试用的文件。
也即我们所写的主要代码都放在src下。
因此我们再分析src下的文件目录：
assets:可用于存放一些共用的静态资源
components:存放单页面组件
router:路由配置
App.vue:首页，也即根目录（可能这么说不恰当，因为如果是用router的话，整个网站是一个单页面应用）
main.js:整个项目的打包入口。
具体进入App.vue，
其代码是：
<div id="app">
<router-view></router-view>
</div>
而在router里配置的
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
因此，在第一张图片的主要展示内容来自此。
我们先不动这个router，已经迫不及待要添加组件试试了。
在components下添加little.vue，如下：
码上：
<template>
<div class="little">
<span>这里是来自little的问候！</span>
</div>
</template>
<style>
.little {
color: #f00;
font-weight: 700;
}
</style>
然后再app.vue中引入组件：
<template>
<div id="app">
<router-view></router-view>
<little></little>
</div>
</template>
<script>
import little from './components/little/little.vue'
export default {
name: 'app',
components: {
little
}
}
</script>
就可得到：
下一步，我们尝试写一个简单的导航栏，通过路由实现单页面变化导航。
首先创建mi.vue、dong.vue、ye.vue作为导航去处，
然后在App.vue中
<template>
<div id="app">
<nav>
<ul>
<li>
<router-link :to="{name: 'mi'}">MIMIMIMI</router-link>
</li>
<li>
<router-link :to="{name: 'dong'}">DongDongDongDong</router-link>
</li>
<li>
<router-link :to="{name: 'ye'}">YeahYeahYeahYeah</router-link>
</li>
</ul>
</nav>
<router-view></router-view>
<little></little>
</div>
</template>
在router里配置：
import mi from '@/components/mi/mi'
import ye from '@/components/ye/ye'
import dong from '@/components/dong/dong'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}, {
path: '/mi',
name: 'mi',
component: mi
}, {
path: '/dong',
name: 'dong',
component: dong
}, {
path: '/ye',
name: 'ye',
component: ye
}
]
})
这样就得到了：
点击导航栏可以分别进入对应分页。
