1.安裝element-ui模塊框架，優化后臺頁面
element-ui可以使用vue-cli腳手架直接安裝，且vue中的初始頁面組件用的就是element-ui框架class名，應該是vue官方推薦的。
我們開始以admin為例，因為一個動態網站的制作先以后臺為始，將我們想要呈現的內容做好上傳接口，后續前臺開發時直接連接到后臺數據會很方便看效果。
終端輸入：
```
cd admin //進入admin端
```
```
vue add element
```
安裝過程完全默認回車，我在第二步選了個Y出現了npm錯誤，折騰了一上午。
此時進入網頁，頁面的vue已出現element-ui樣式的按鈕。
2.安裝路由模塊
現在的頁面是無法進行跳轉的，所以我們需要加入路由。
終端輸入：
```
vue add router
```
在第二項“是否使用hostory mode”時我們選擇no，就像thinkphp路由時有強制路由和普通路由一樣，現在我們用不到這個東西，暫時不安裝，今后項目需要使用時只要改動路由文件加一句話即可，大家自行百度。其它默認。
此時頁面又自動改動了一下，出現了路由切換。
此時我們觀察安裝模塊后，項目中出現的變化。分別是element，router，和router生成的view頁面。
3.使用element-ui
設置路由分為兩步：
1，引入創建的vue頁面。2，設置頁面的路徑和路徑名稱。
此時我們對原路徑進行改動，加入一個新的頁面Main.vue作為主頁面。
router的index.js設置：
```
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Main from '../views/Main.vue' //引入新的頁面
Vue.use(VueRouter)
const routes = [
{
path: '/', //路徑為首頁
name: 'Main', //路徑名
component: Main //上方的Main作為這個路徑到達的頁面
},
]
const router = new VueRouter({
routes
})
export default router
```
創建Main.vue文件，到element官網找到一段好看的組件代碼，稍加改動，注意vue文件中html部分要放在template標簽中。
```
// Main.vue
<template>
<el-container style="height: 100vh; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>導航一</template>
<el-menu-item-group>
<template slot="title">分組一</template>
<el-menu-item index="1-1">選項1</el-menu-item>
<el-menu-item index="1-2">選項2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="1-3">選項3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">選項4</template>
<el-menu-item index="1-4-1">選項4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>導航二</template>
<el-menu-item-group>
<template slot="title">分組一</template>
<el-menu-item index="2-1">選項1</el-menu-item>
<el-menu-item index="2-2">選項2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="2-3">選項3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">選項4</template>
<el-menu-item index="2-4-1">選項4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>導航三</template>
<el-menu-item-group>
<template slot="title">分組一</template>
<el-menu-item index="3-1">選項1</el-menu-item>
<el-menu-item index="3-2">選項2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="3-3">選項3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">選項4</template>
<el-menu-item index="3-4-1">選項4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>刪除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</template>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
```
在App.vue主文件中把自帶跳轉的導航條去掉，并且將下方自帶css去掉，設置margin，padding為0。
```
//App.vue
<template>
<div id="app">
<!-- <div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div> -->
<router-view/>
</div>
</template>
<style>
*{
margin: 0px;
padding: 0px;
}
</style>
```
最終效果：
4.使用路由
根據App.vue默認生成的路由跳轉可以看到路由的方式可以是：
```
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
```
但是現在我們使用了menu組件，故要在Main.vue剛剛復制的組件中針對此格式加入路由。
```
// 在menu組件中寫入router，找到路由主體
<el-menu router :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>導航一</template>
<el-menu-item-group>
<template slot="title">分組一</template>
// 在需要路由的item標簽中寫入路由路徑
<el-menu-item index="/home">選項1</el-menu-item>
<el-menu-item index="1-2">選項2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="1-3">選項3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">選項4</template>
<el-menu-item index="1-4-1">選項4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
```
同時在router的index.js文件中加入路由的信息和路徑：
保存后我們點擊加入了路由路徑的item按鈕，就可以進行跳轉頁面了。
跳轉：
5.設置子路由
找到右側table固定數據，將此處改為一個路由容器，將里邊的內容剪切到另一個文件，例如之前剩下的Home.vue文件中。
并且把script數據也拿過來。
原el-main處加入路由容器：
```
<el-main>
<router-view></router-view>
</el-main>
```
最重要的部分，修改router中index.js的路由，加入子路由children，參數同樣為路徑和引入組件信息：
這時，我們把路徑放在選項2的item中：
保存，點擊選項2測試跳轉是否成功：
我這沒問題，如果大家有問題評論區留言。
相信大家已經發現，node服務器的開發中路由也不同于過去的常規后端開發去根據實際的文件路徑進行路徑查詢，而是完全由我們自己設置的路由路徑進行查詢轉入，就像給文件起名一樣，不需要顧及文件的位置。大家一定對node開發有了進一步的了解。
只要學會了路由，就可以搭建我們的項目了，只要審美沒問題，就可以搭建出一個漂亮的靜態網站，現在大家可以根據自己的需求把后臺的頁面和路由做出來了。
要制作一個動態網站，后續還要有很多需要學習借鑒的東西。
下節我們針對mongodb數據庫的數據綁定來進行下一步開發。
- tp6+vue
- 1.工具和本地環境
- 2.啟動項目
- 3.路由、模型與數據庫操作
- 4.優化后端接口,前端使用axios實現接口功能
- 5.用戶登錄，bcrypt（hash）加密與驗證
- 6.用戶登錄（二），token驗證
- 7.分類的模型關聯和通用CRUD接口
- 8.使用vue的markdown編輯器并批量上傳圖片
- Node.js + Vue.js
- 工具,本地環境
- 2.1啟動項目
- 3.element-ui和vue-router路由的安裝和使用
- 4.使用axios，并創建接口上傳數據到mongodb數據庫
- 5.mongoodb數據庫的“刪、改、查”操作
- 6.mongodb數據庫無限層級的數據關聯（子分類）
- 7.使用mongodb數據庫關聯多個分類（關聯多個數據）
- 8.server端使用通用CRUD接口
- 9.圖片上傳
- 10.vue的富文本編輯器（vue2-editor）
- 11.動態添加分欄上傳多組數據
- 12-1.管理員模塊
- 13-1.搭建前臺web端頁面
- 1.使用sass工具搭建前臺web端頁面
- 2.sass工具的變量
- 3.使用flex布局并開始搭建web端
- 4.vue廣告輪播圖，并使用接口引入數據
- 5.使用字體圖標（iconfont）
- 6.卡片組件的封裝
- 14-1.生產環境編譯
- 1.環境編譯
- 2.購買域名服務器并解析域名到服務器
- 3.nginx配置web服務器并安裝網站環境
- 4.git拉取代碼到服務器
- 5.配置Nginx反向代理
- 6.遷移本地數據到服務器（mongodump）
- uni
- 1.工具&本地環境
- 2.頁面制作
- 3.頁面制作、組件與輪播
- 4.頁面跳轉與橫向滑動
- 5.用戶授權登錄和用戶信息獲取
- 6.用戶注冊和數據存儲
- 7.用戶填寫表單信息