Vue是Web開發趨勢中的明星框架，而ElementUI是一個優秀的UI組件庫，為我們的開發工作省下大量的時間和精力。Vue Router，則是Vue中最常用的路由管理器。這三個工具的結合使用，可以讓我們展示更完美的Web頁面。我將在本文中簡單介紹如何使用Vue、ElementUI以及Vue Router來構建一個精美的Web應用。

首先，我們需要安裝Vue及Vue Router。在命令行輸入以下命令來安裝：

npm install vue
npm install vue-router

接下來，我們需要在Vue項目中引入ElementUI。在命令行輸入以下命令來安裝ElementUI：

npm install element-ui -S

接下來，我們需要在Vue項目中注冊ElementUI及Vue Router。在main.js中添加以下代碼：

// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueRouter from 'vue-router'
import App from './App.vue'
import routes from './routes.js'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes
})
new Vue({
router,
render: h =>h(App),
}).$mount('#app')

在App.vue中，我們創建了一個簡單的頁面，作為我們的主頁。我們可以在這個組件中注冊各種ElementUI組件，比如Button、Table等。接下來，我們需要配置路由。在routes.js文件中添加以下代碼：

// routes.js
import Home from './components/Home.vue'
import About from './components/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
export default routes

在routes.js文件中，我們定義了兩個路由，路徑分別為/和/about。component屬性指向相應的組件。

最后，在App.vue中添加以下代碼，使用<router-view>標簽渲染路由對應的組件：

<template>
<div>
<el-menu mode="horizontal">
<el-menu-item index="1"><router-link to="/">Home</router-link></el-menu-item>
<el-menu-item index="2"><router-link to="/about">About</router-link></el-menu-item>
</el-menu>
<router-view></router-view>
</div>
</template>

現在，我們就可以運行Vue項目，并在瀏覽器中訪問localhost:8080，看到一個擁有導航欄和主頁的Web應用了。我們可以點擊導航欄上的按鈕，切換路由，看到相應的組件。