【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之代码优化（七）