vue创建项目步骤

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖，走你

$ cd my-project

$ npm install

$ npm run dev

在config里index.js改配置自动打开浏览器

安装路由

下载 npm i vue-router -S

创建router.js文件配置 

 //引包
 import VueRouter from 'vue-router'
 //导入对应的路由组件
 import Home from './components/home.vue'
 //创建路由对象
 var router = new VueRouter({
   routes:[
     //配置路由规则
     {path:'/',redirect:'/home'},
     {path:'/home',component:Home}
   ]
 })

 //把路由对象暴露出去
 export default router

main.js文件配置

 import Vue from 'vue'
 import App from './App'

 /*1.1导入路由的包*/
 import VueRouter from 'vue-router'
 /*1.2 安装路由*/
 Vue.use(VueRouter)

 /*1.3 导入自己的router。js路由模块*/
 import router from './router.js'

 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   components: { App },
   template: '<App/>',
   /*1.4 挂载路由对象到VM实例上*/
   router
 })

在App.vue文件中通过router-view标签引用显示内容

//内容content
    <transition>
      <router-view></router-view>
    </transition>

通过router-link标签to跳转

 <router-link class="mui-tab-item" to="/home">

<router-link class="mui-tab-item" to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
</router-link>