前端日记(一)----布局与localStorage使用

因为总会担心自己写不好所以一直拖延了下来,但是其实想想是多余的,因为本来就写不好,所以有什么好担心的呢?

最近因为工作需要干起了前端的工作,也算是从中学习了很多东西,这里就做一个分享与记录,记录一下我在前端上遇到的问题以及最终的解决方案吧.

一,布局

因为是完全从零开始画网页,所以技术上用了我比较熟悉的elementUI+VUE的开发方式,网页的布局选择了上-左-中的这种方式:

<div id="app">
    <el-container>
        <el-header class="main-header" style="height:70px;">
            <!--这里放的头-->
        </el-header>
        <el-container>
            <el-aside width="200px">
                <!--这里放的是左边的菜单-->
            </el-aside>
            <el-container>
                <!--这里放的是主体部分-->
            </el-container>
        </el-container>
    </el-container>
</div>

左边的菜单栏这里涉及到一个关于v-for使用的心得,先贴代码块再分析.

<el-menu>
    <el-submenu v-for="menu in menuList" :index="menu.path">
        <template slot="title">
            <i class="fa" :class="menu.icon"></i>
                <a :href="menu.linkUrl" target="right">{
  {menu.title}}</a>
        </template>
        <template v-for="child in menu.children">
            <el-menu-item :index="child.path"