vue（一）构建项目

（1）安装Vue CLI

npm install -g vue-cli

（2）构建VUE项目

vue init webpack 

//Webpack是指你想用哪个脚手架模板，这里其实用很多模板供我们选择,比如简化版webpack-simple.
//app指的是你要把项目放在哪个文件夹里，这里就是app这个文件夹，如果没有系统会自动创建。
cd spa //改变路径到spa文件夹下
npm install //安装所有项目需要的npm模块
npm run dev //在开发环境下运行程序

（3）VUE Router 的安装与配置

npm install vue-router --save

（4）src/main.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import HelloWorld from './components/HelloWorld'
import About from './components/About'
Vue.use(VueRouter)
const routes = [
  { path: '/', component: HelloWorld },
  { path: '/about', component: About }
]

// 创建路由器实例，并且传入`routes`变量作为路由。
// 你还可以传入别的参数，不过在这里尽量简单化就可以了
const router = new VueRouter({
  routes,
  mode: 'history'
})
// 实例化Vue实例
new Vue({
  // 定义Vue绑定的跟元素
  el: '#app',
  // 用<App/>代替根元素
  template: '<App/>',
  // 声明App组件，这样上面的<App/>元素就可以生效
  components: { App },
  // 将上面声明的路由器传递到根Vue实例
  router
}).$mount('#app')// 将这个实例挂载到id=app的根元素上

（5）app.vue

<template>
    <div id="app">
        <!--路由管道标签，任何符合某一路由(route)信息的组件都会在这个标签内展示出来 -->
        <router-link v-bind:to="'/'">Home</router-link>
        <router-link v-bind:to="'/about'">About</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
  name: 'app'
}
</script>
<!-- css格式 -->
<style>
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    color: #2c3e50;
}
</style>

（6）运行

npm run dev