【Hello VUE】暴學VUE之樣式優化（六）

本來從這一章開始就要講程序邏輯了，後來想了想，先把項目改造成最終形態再開始講吧。所以，這一章是講樣式優化。

下載修改好分支v3

使用git命令：git clone -b v3 https://github.com/rongxr/vue-elementui.git

說明：

1. 下載好項目代碼後，文件夾\vue-elementui\elementui\vue-elementui\elementui-demo下面是沒有下載好項目依賴的，就是沒有文件夾node_modules。你可以從之前的項目裏面拷貝過來。或者，打開命令窗口，cd到\vue-elementui\elementui\vue-elementui\elementui-demo目錄下，執行命令：npm install，重新從網上下載。
2. 樣式調整涉及的頁面有：
   /src/components/Home.vue
   /src/components/common/Header.vue
   /src/components/common/Sidebar.vue
   /src/components/user/Users.vue
   /src/components/user/Login.vue
   至於修改了那些，請自行對比新舊代碼，這裏不做一一說明。
3. 新增兩個頁面：
   /src/views/example/table/index.vue
   /src/views/example/form/index.vue
   新增這兩個頁面涉及一下文件修改：
   /src/api/example/table.js（/src/views/example/table/index.vue頁面請求後端，需要的數據報文）
   /src/api/index.js（修改用戶返回的有權限訪問的菜單）
   /src/router/index.js（應用的全局路由配置）
   這兩個頁面來源項目vue-admin-template或者vue-element-admin。爲啥要引入這兩個頁面呢，是想如果你發現缺少什麼頁面，不知道怎麼寫vue佈局，可以直接到這個項目去偷（這個詞用得不太好）

注意

還有一個樣式調整是全局樣式，文件是：\vue-elementui-master\elementui-demo\node_modules\element-ui\lib\theme-default\index.css。搜索關鍵字：.el-menu-item,.el-submenu__title，把color調整如下。

.el-menu-item,.el-submenu__title{
height:56px;
line-height:56px;
font-size:14px;
color:#fff;
padding:0 20px;
cursor:pointer;
position:relative;
transition:border-color .3s,background-color .3s,color .3s;box-sizing:border-box;
white-space:nowrap
}

功能展示

登錄

首頁

用戶管理–用戶列表

用戶管理–上傳文件

example-table

example-form

後續

這一章把整個項目的頁面樣式全部調整完畢，而且還引入兩個新頁面做爲例子，如何整合其他項目的頁面。下一章將調整項目的結構及命名方式。

【Hello VUE】暴學VUE之代碼優化（七）