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>