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>