从零学习vue之简单演练——构建单页面项目

在上一篇文章中，主要尝试了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">
    ![](./assets/logo.png)
    <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">
    ![](./assets/logo.png)
    <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
    }
  ]
})

这样就得到了：

点击导航栏可以分别进入对应分页。