vue2+element-ui 记录4

主页布局（仅适用于新手）

1.将views文件夹下的内容全部删除，新建layout文件夹，并在其下建立index.vue文件，然后通过element-ui框架官网中的“Container布局容器”组件，选择一种布局方式，我选择的如下布局方式：

布局样式如下：

2.在views文件夹下再新建welcome文件夹，并新建index.vue文件，其内容如下：

3.接着修改路由文件，在src => router => index.js中，其修改后的内容如下：

注意：因为每个模块（除登录、错误、未找到等特殊页面）都是在Layout布局页面下显示，所以每个模块路由都要建立在Layout页面下，如上图中，主页模块下面有欢迎页子路由。
4.src下的App.vue文件修改，如下图：

5.浏览器输入http://localhost:4200/，回车，会自动跳转至地址：http://localhost:4200/main/welcome，页面效果如下：

6.这里有一个问题：浏览器地址是http://localhost:4200/main/welcome，即我们访问的是欢迎页面路由地址，但下面主体内容却不是“欢迎页面”，这是因为在我们的布局页面主体部分没有引入跳转路由组件，此时需要如下修改：
6.1.在views => layout文件夹下新建AppMain.vue文件（这里看似简单的内容，我们却又新建了一个组件，因为后期这个组件中会引入其他内容，如页面重用等。vue项目的特点就是组件化，这样后期维护起来方便，所以能组件化的就组件化，心中要有这种思想，但不是说为了组件化而组件化，根据项目功能需求而定），内容如下：

6.2.修改布局页面文件（views => layout => index.vue），内容如下：

6.3.这时布局页面主体内容效果如下图：

7.最后我们需要为项目引入一个全局样式文件，在src文件夹下新建styles文件夹，并在其下新建index.less样式文件，其内容如下：

8.最后我们需要在main.js文件中引入全局样式文件，如下图：

注意点：
1.以上内容我均用图片，是为了让道友需要自己写一写，通过自己写出来的印象更加深刻，且可能从中发现自身问题；
2.注意各个组件的名称，一定要写对，注意细节；
3.以上关于概念的问题请移至：vue官网

活到老，学到老，学无止尽！欢迎大家相互讨论，相互学习！不喜勿喷！