Vue开发实例（五）修改项目入口&页面布局

一、创建新入口

创建新的入口，取消原来的HelloWorld入口

参考代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

二、分析代码，修改入口

查看main.js 我们可以看到，项目是通过App.vue来加载的

分析App.vue代码

这里3个地方加载并使用HelloWorld页面，此时我们来改成自己的Index.vue，修改这3个地方

图片也可以换成自己的，建议放在assets目录下

三、搭建项目主页面布局

上面修改完成自己的项目入口之后，接下来搭建项目主页面头部、导航、主体等页面布局

因为很多项目都是类似管理系统的界面，最上面是头部、左边是导航菜单、右边是主体页面、下方是Footer的框架结构，所以我们也按照这个方式来搭建。

1、Container 布局容器介绍

用于布局的容器组件，方便快速搭建页面的基本结构：

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外， 的子元素只能是后四者，后四者的父元素也只能是 。

2、创建布局

修改Index.vue的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

查看页面效果：

问题：布局器没有铺满

3、布局器铺满屏幕

1. 创建全局css文件
   在src/assets/css创建global.css 文件，代码如下：

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    /* 全局设置100%，可能后面会有坑，其他的组件巨长，在变形的标签设置height：auto;可解决 */
    height: 100%;
}
1
2
3
4
5
6
7

这里主要是用到了：height: 100%;
其他的是为了把其他空格占位去除，为后面做准备。

2. 在main.js 中注册此全局的css文件

import '@/assets/css/global.css';
1

3. 这一步可做可不做，我是根据自己的电脑屏幕设置的15.6的，注释App.vue中style的margin-top，要不然屏幕超出高度
   

4、创建Header页面

1. 新建一个Header/index.vue，采用flex布局，讲头部分成左、中、右3个部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2. 修改Index.vue

• 使用 import Header from "./Header/index.vue";
• 在export中加入 components: {Header}
• 在template的el-header中使用 Header 组件

运行结果

接下来实现一下头部的具体代码，头部就实现3个东西：

• 加入”欢迎来到Vue2项目”的字样
• 编写用户头像显示代码
  • 可以指定图片路径为远程的，比如我指定一个图片网址。
• 点击用户头像出现下拉（个人中心、退出登录…）
  • 用户头像点击一般都是选择个人中心、退出登录这些的，这个功能需要用到el-dropdown

代码实现：

具体的宽高值，根据自己的电脑分辨率进行代码实现，我的mac和windows的值就不一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

5、加入Aside、Main和Footer模块

上面的代码中只写了头部Header，接下来加入Aside、Main和Footer。
分别创建文件夹，然后创建index.vue

最后分别加入下列代码，只需要对应的name: "Main"，换成Aside，Footer即可，不要让几个一样

1
2
3
4
5
6
7
8
9
10
11

修改components/Index.vue中的几个内容，全部如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

效果如图