使用Vue+Element-UI从0搭建一个常见的前端模板

首先，创建一个vue项目，这里不做过多阐述，直接写模板

简单的介绍一下一般的页面布局包括顶部导航栏，左侧菜单栏，和主要的信息展示页面

我们直接勾勒出一个这样的架子,这里使用了element-UI，记得用npm下载一下

 <div>
        <el-container>
            <el-header>
                顶层容器
            </el-header>
        </el-container>

        <el-container>
            <el-aside>
                左侧菜栏
            </el-aside>

            <el-main>
                主要信息展示页面
            </el-main>
        </el-container>
    </div>

接下来开时进行顶层代码的编写：

<div>
        <el-container>
            <el-header style="background-color: #e5e5e7;display: flex;align-items: center;justify-content: space-between">
            <div style="font-family: 华文行楷;font-size: 30px;">ikun粉丝团人员管理系统</div><div>
            
          <el-dropdown @command="handleCmd">
              <span class="el-dropdown-link" style="display: flex;align-items: center;cursor: pointer">
              <i>
                <img style="width: 48px;height: 48px;border-radius: 24px;margin-top: 15px;" src="https://wx2.sinaimg.cn/mw2000/50861ae8ly1h71qt55s6kj20u0140n6p.jpg" alt="">头像
              </i>
              </span>
              <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="setting">系统设置</el-dropdown-item>
              <el-dropdown-item command="usercenter">个人中心</el-dropdown-item>
              <el-dropdown-item command="logout" divided>注销登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
      </div>
      </el-header>
        </el-container>

        <el-container>
            <el-aside>
                左侧菜栏
            </el-aside>

            <el-main>
                主要信息展示页面
            </el-main>
        </el-container>
    </div>

export default{
    methods:{
    /**
     * 这个方法有一个默认的参数，参数值就是每一个菜单项的 command 属性的值
     * @param cmd
     */
    handleCmd(cmd) {
      if (cmd == 'logout') {
        //注销登录
        this.$confirm('是否注销登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //执行注销登录，向后台发送注销请求
          this.getRequest("注销登录接口地址如：/outLogin");
          //删除sessionStorage 中的数据
          window.sessionStorage.removeItem("要删除的对象名如: data");
          //跳转到项目登录页面
          this.$router.replace("登录界面路由地址如：/");
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    }
    }
}
</script>

露出kun脚了，不写了