一、Vant示例文件

一、Vant起步

1、基於Vue Cli基礎的環境

 2、創建項目

vue create blog.web         （------>名字中不能有大寫也不能用駝峰命名）

如圖：

 3、項目查看

 4、安裝路由

4.1進入 項目

cd blog.web

並運行

npm install vue-router

如圖：

 5、使用路由

5.1、 創建單頁面（創建views文件夾放入Home、Test文件夾以及內對應放入Home.vue以及Test.vue文件）

代碼如下：

 Home.vue

<template>
    <div>
        Home頁面
    </div>
</template>

test.vue

<template>
    <div>
        test頁面
    </div>
</template>

 5.2、創建引用路由並配置（新建router文件夾里面放入index.js）

 代碼如下：

import Vue from 'vue'
import Router from 'vue-router'

//import HelloWorld from '@/components/HelloWorld'
import Home from '@/views/Home/Home' // 導入我們編寫的vue組件Home
import Test from '@/views/Test/Test' // 導入我們編寫的vue組件test

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    // 配置路由地址
    {
      path: '/Test',
      name: 'Test',
      component: Test
    }
  ]
})

5.3 使用我們配置的路由（具體是main.js入口執行頁面修改加載router組件）

並在App.vue使用

 即

 代碼如下：

<template>
  <router-view></router-view>
</template>

6、運行