vue单页面应用的简单实现

环境&常用工具简要介绍
- node.js(自带npm)
- vue-cli
  vue-cli是vue.js官方工程命令行脚手架，可以快速地初始化一个vue工程。然而它其实初始化一切工程，只要有一份能够运行的模，就能通过vue-cli进行工程的初始化
  安装： npm install vue-cli
  使用： vue init <template-name> [project-name]
```
* <template-name> 项目模板
    官方模板-> https://github.com/vuejs-templates
    自定义模板-> https://segmentfault.com/a/1190000011643581#articleHeader0
* [project-name]项目名称（**小写字母**，**不能有空格**）
```
- webpack
  模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
  安装：npm install webpack
  使用方法：(可以和上面结合) vue-init webpack xxx
  说明：这里是构建一个基于webpack的项目，webpack可以做很多事情，这里不细说
- vue-router
  我们只需将组件(components)映射到路由(routes)，vue-router根据配置在相应的位置渲染组件
- axios
  一个基于 promise 的 HTTP 库，进行数据交互，向服务器发送请求并响应请求。
- vuex
  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。如组件之间数据通信。
- 更多vue资源
START
- 简单构建步骤
  - npm install vue-cli
  - vue init webpack xxx //构建vue项目
    - 配置说明
      如果不想研究就跳过这里，然后一路回车吧
      - ? Use ESLint to lint your code? (Y/n)
        ESLint是用来规范化代码，如果是新手想练手不是很建议用，因为会改到崩溃，如果是想规范化项目就安装吧，统一团队的代码规范
      - ? Setup unit tests (Y/n)
        单元测试框架，运行测试JavaScript,如果想要了解所有测试库戳这里
      - Pick a test runner (Use arrow keys)
        如果上一步选择安装，则会有三个选项(我忘了截图)，我记得有一个选项是Karma + Mocha，Mocha的使用教程
      - Setup e2e tests with Nightwatch? (Y/n)
        E2E(end to end)测试是指端到端测试又叫功能测试，站在用户视角，使用各种功能、各种交互，是用户的真实使用场景的仿真。使用nightwatch进行E2E自动化测试
  - npm install //安装项目依赖
  - npm run dev //打开本地服务器预览效果，默认服务启动的是本地的8080端口
  - 打开浏览器输入链接，如无意外能就能看到页面了
解析项目目录
- build
- scr & static
- 其他

路由文件实例
这里只是简单举例，详细还是要看vue-router文档哦

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
import head from '@/components/head'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    },
    {
        path:'/test',
        name:'test2', //如果设置了name，路径会显示xxx/设置的name
        component:head
    }
  ]
})

怎么使用这些路径？

1	<router-link to="/test" tag="span" class="test">我将会跳转到head组件</router-link>

其他的我想起再补充哈嘻嘻