vue项目实战：项目布局和公共文件夹的确定

1.布局文件 

<!-- * @Description: 布局容器组件 vue-intro + intro.js 新手引导页功能 home文件 * @Version: 2.0 * @Autor: lhl * @Date: 2020-06-11 17:54:29 * @LastEditors: lhl * @LastEditTime: 2020-08-20 16:54:29 --> 
<!--  -->
<template>
  <div class="layout-box">
    <el-container>
      <el-header>
        <topHeader />
      </el-header>
      <el-container>
        <el-aside width="220px">
          <el-scrollbar class="page-component__scroll">
            <siderBar />
          </el-scrollbar>
        </el-aside>
        <el-main>
          <div class="right-view" ref="rightViewBox">
            <!-- <Breadcrumb ref="bread"/> -->
            <transition name="fade-transform" mode="out-in">
              <keep-alive :include="keepAliveList">
                <router-view></router-view>
              </keep-alive>
            </transition>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// router-view 的 key 或者用路由钩子 再或者用监听路由变化 // 场景:由于 Vue 会复用相同组件, 即 /detail/1 => /detail/2 或者 /detail?id=1 => /detail?id=2 这类链接跳转时, 将不在执行created, mounted之类的钩子 // <router-view :key="$route.fullPath"></router-view> // 这样组件的 created 和 mounted 就都会执行
import topHeader from "./topHeader"; import siderBar from "./siderBar"; import Breadcrumb from '../Breadcrumb/index' import { mapActions, mapGetters, mapMutations } from "vuex"; // 引导
import Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css' // import driver.js css
import steps from '@/common/steps' export default { components: { topHeader, siderBar, Breadcrumb }, data() { //这里存放数据
    return { keepAliveList: ['baiduMapTest'] // 缓存的组件
 } }, methods: { ...mapMutations(["setContentBoxHeight", "setBtnPermitCode"]), // 系统引导
 guide() { const driver = new Driver() driver.defineSteps(steps) driver.start() }, // 获取按钮code码
 getBtnCodeList(){ this.$http.user.btnList().then(res => { console.log(res) if(res.returnResult === 200){ this.setBtnPermitCode(res.returnData.buttonList) } }) } }, computed:{ ...mapGetters(['getcontentBoxHeight']) }, created() { this.getBtnCodeList() }, mounted() { this.guide(); //第二种方法
      if (window.performance.navigation.type == 1) { console.log("页面被刷新") } else { console.log("首次被加载") } window.addEventListener("resize", () => { if (this.$refs.rightViewBox && this.$refs.rightViewBox.clientHeight) { this.setContentBoxHeight(this.$refs.rightViewBox.clientHeight); // console.log(this.$refs.rightViewBox.clientHeight, "rightViewBox");
 } }) if (this.$refs.rightViewBox.clientHeight) { this.setContentBoxHeight(this.$refs.rightViewBox.clientHeight); } } }; </script>
<style lang='scss' scoped> //@import url(); 引入公共css类 .layout-box { height: 100%; min-width: 1200px; .el-aside { position: absolute; top: 60px; bottom: 0; background: #3db4f8; .el-menu{ border-right: none;
    } } .el-main { position: absolute; left: 220px; right: 0; top: 60px; bottom: 0; padding: 10px; background: #eee; .right-view{ padding: 20px; background: #fff; min-height: 100%;
    } } } </style>

<!-- * @Description: 侧边栏组件 * @Version: 2.0 * @Autor: lhl * @Date: 2020-06-11 17:54:54 * @LastEditors: lhl * @LastEditTime: 2020-07-17 14:22:49 --> 

<!--  -->
<template>
  <div class="sider-content-box">
    <el-menu class="el-menu-vertical-demo" background-color="#3DB4F8" text-color="#fff" active-text-color="#fff" :collapse-transition="false" router >
      <!-- 一级菜单 -->
      <template v-for="(item,index) in menuData">
        <el-submenu v-if="item.children && item.children.length" :index="item.menuUrl" :key="item.menuUrl"
        >
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </template>
          <!-- 二级菜单 -->
          <template v-for="(itemChild,vIndex) in item.children">
            <el-submenu v-if="itemChild.children && itemChild.children.length" :index="itemChild.menuUrl" :key="vIndex"
            >
              <template slot="title">
                <i :class="itemChild.icon"></i>
                <span>{{itemChild.name}}</span>
              </template>
              <!-- 三级菜单 -->
              <el-menu-item v-for="itemChild_Child in itemChild.children" :index="itemChild_Child.menuUrl" :key="itemChild_Child.menuUrl"
              >
                <i :class="itemChild_Child.icon"></i>
                <span slot="title">{{itemChild_Child.name}}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="itemChild.menuUrl" :key="itemChild.vIndex">
              <i :class="itemChild.icon"></i>
              <span slot="title">{{itemChild.name}}</span>
            </el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item v-else :index="item.menuUrl" :key="index">
          <i :class="item.icon"></i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script> import { menuData } from '@/common/constant' export default { components: {}, data() { //这里存放数据
    return { menuData }; }, computed: {}, watch: {}, methods: {}, created() {}, mounted() {} }; </script>
<style lang='scss' scoped> //@import url(); 引入公共css类 </style>

<!-- * @Description: 头部组件 * @Version: 2.0 * @Autor: lhl * @Date: 2020-06-12 09:12:02 * @LastEditors: lhl * @LastEditTime: 2020-08-04 17:33:36 --> 
<!--  -->
<template>
  <div class="header-content-box">
    <div class="logo" id="logo">
      <img src="@/assets/logo.png" alt />
    </div>
    <div id="title">vue测试管理系统</div>
    <div class="top-info">
      <div class="user-avatar">
        <img src="@/assets/logo.png" alt />
      </div>
      <div class="user-down" id="user">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link"> {{getUserInfo.userName || '默认用户'}} <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="baseInfo">基本资料</el-dropdown-item>
            <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
            <el-dropdown-item divided command="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-dialog title="用户基本资料" :visible.sync="dialogVisibleInfo" width="50%">
      <div class="user-info">
        <p>id：{{getUserInfo.id}}</p>
        <p>用户名：{{getUserInfo.userName}}</p>
        <p>账号：{{getUserInfo.domainAccount}}</p>
        <p>所在公司：{{getUserInfo.organizationName}}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleInfo = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleInfo = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改密码" :visible.sync="dialogVisibleChangePwd" width="50%">
      <el-form ref="ruleForm" :model="ruleForm" :rules="resetRules" class="login-form" label-width="80px" label-position="left"
      >
        <el-form-item label="密码" prop="passwd">
          <el-input type="password" v-model="ruleForm.passwd" placeholder="请输入密码" autocomplete="off" show-password ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" placeholder="请输入确认密码" autocomplete="off" show-password ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script> import { mapMutations, mapGetters } from "vuex"; export default { data() { var validatePass = (rule, value, callback) => { if (value === "") { callback(new Error("请输入密码")); } else { if (this.ruleForm.checkPass !== "") { this.$refs.ruleForm.validateField("checkPass"); } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === "") { callback(new Error("请再次输入密码")); } else if (value !== this.ruleForm.passwd) { callback(new Error("两次输入密码不一致!")); } else { callback(); } }; //这里存放数据
    return { dialogVisibleInfo: false, // 用户信息
 dialogVisibleChangePwd: false, // 修改用户密码
 ruleForm: { passwd: "", checkPass: "", }, resetRules: { passwd: [{ validator: validatePass, trigger: "blur" }], checkPass: [{ validator: validatePass2, trigger: "blur" }], }, }; }, computed: { ...mapGetters(["getUserInfo"]), }, created() {}, methods: { ...mapMutations(["loginOut"]), handleCommand(command) { console.log(command); if (command === "baseInfo") { this.dialogVisibleInfo = true; } else if (command === "changePassword") { this.dialogVisibleChangePwd = true; } else if (command === "loginOut") { this.$confirm("您确定要退出吗?", "退出管理平台", { confirmButtonText: "确定", cancelButtonText: "取消", }) .then(() => { this.loginOut(); this.$router.push(`/login?redirect=${this.$route.fullPath}`);
 }) .catch(() => {}); } }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { // 调用重置密码的接口
 alert("重置密码成功!"); this.dialogVisibleChangePwd = false; } else { // console.log("error submit!!");
          return false; } }); }, resetForm(formName) { this.dialogVisibleChangePwd = false; this.$refs[formName].resetFields(); }, }, }; </script>
<style lang='scss' scoped> //@import url(); 引入公共css类 .header-content-box { height: 60px; display: flex; justify-content: space-between; align-items: center; background: url("~@/assets/img/bg.png"); .logo { img { width: 40px; height: 40px;
    } } .top-info { display: flex; justify-content: center; align-items: center; .user-avatar { border-radius: 50%; img { width: 40px; height: 40px; border-radius: 50%;
      } } } } </style>

2.公共样式

// reset.scss @import './transition.scss'; @import './public.scss'; @import './elementreset.scss'; *{ margin: 0; padding: 0; list-style: none;
}
/** 清除内外边距 **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li,/* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ th, td /* table elements 表格元素 */ { margin: 0; padding: 0;
} body,#app{ height: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
} html{ height:100%;
} body{ height:100%; margin:0px; padding:0px;
} address, cite, dfn, em, var ,i{ font-style: normal; 
}

/* for ie6 */ fieldset, img { border: 0; } 
/* img ：让链接里的 img 无边框 */ button, input, select, textarea { font-size: 100%;} 
/* 使得表单元素在 ie 下能继承字体大小 *//* 注：optgroup 无法扶正 */ /** 重置表格元素 **/ table { border-collapse: collapse; border-spacing: 0; } label { font-weight: 700;
} html *{ font-size: 14px; box-sizing: border-box;
} *, *:before, *:after { box-sizing: inherit;
} // a:focus, // a:active { // outline: none; // } // a, // a:focus, // a:hover { // cursor: pointer; // text-decoration: none; // } div:focus { outline: none;
} .fr { float: right;
} .fl { float: left;
} .clearfix { &:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
  } } .md{ display: inline-block; vertical-align: middle;
}


/*去掉type为number的箭头*/ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none;
} input[type="number"] { -moz-appearance: textfield;
} // Dialog 对话框居中显示 .dialog-box-center{ text-align: center; &:after { content: ""; display: inline-block; height: 100%; width: 0; vertical-align: middle;
  } .el-dialog{ text-align: left; display: inline-block; margin: 0 !important; vertical-align: middle; min-width: 800px;
  } }

// transition.scss /*fade*/ .fade-enter-active, .fade-leave-active { transition: opacity 0.3s;
} .fade-enter, .fade-leave-active { opacity: 0;
}

/*fade-transform*/ .fade-transform-leave-active, .fade-transform-enter-active { transition: all .8s;
} .fade-transform-enter { opacity: 0; transform: translateX(-30px);
} .fade-transform-leave-to { opacity: 0; transform: translateX(30px);
}

// public.scss .pd10{ padding: 10px;
} .ptb10{ padding: 10px 0;
} .mt10{ margin-top: 10px;
} .md { display: inline-block; vertical-align: middle;
} // 进度条颜色 #nprogress .bar { background: red !important; //自定义颜色 } .flex-column { display: flex; justify-content: center; flex-direction: column;
}


/*滚动条样式*/ .page-component__scroll { height: 100%; .el-scrollbar__wrap { overflow-x: auto;
  } } /*滚动条颜色*/ .scroll-bar-color { .el-scrollbar__thumb { background-color: rgba(118, 118, 119, 0.8);
  } }

// elementreset.scss // 分页样式 .el-pagination { text-align: right; margin-top: 10px;
} // element ui表头换行 .el-table .cell { white-space: pre-line;
} // tooltip样式更改 固定宽高换行显示 .el-tooltip__popper { max-width: 400px; line-height: 180%;
} // 重置表单样式 element ui 下拉、输入、级联、日期 .reset-form { .el-input, .el-select, .el-cascader, .el-range-editor { width: 100% !important;
  } .el-pagination { .el-input { width: 50px !important;
    } .el-select { .el-input { width: 100px !important;
      } width: 100px !important; } } } .el-table { .el-date-editor.el-input, .el-date-editor.el-input__inner { width: 100% !important;
  } } // to fixed https://github.com/ElemeFE/element/issues/2461 // Dialog内select tree等组件在点击箭头时有虚晃 .el-dialog { transform: none; left: 0; position: relative; margin: 0 auto;
} // 当前行选中颜色高亮 .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td { background-color: #ffec8b;
} .el-loading-mask { background-color: rgba(0, 0, 0, .3);
} // 菜单样式 /* 非折叠的竖直菜单处理方式和上方的水平菜单一样，只不过需要将horizontal改为vertical Element-UI中，在没有折叠的菜单中，无论是水平还是竖直菜单，子菜单是放在菜单栏所在的div中的， 只是将display属性设置为了none。 而在折叠菜单中，虽然菜单项也是放在页面上，但不在是放在菜单栏所在的div中，而是放在了页面底部的单独div中， 类属性值是el-menu--popup，因为是单独的div，所以在处理弹出菜单时就比较方便，直接处理el-submenu__title 和el-menu-item就可以，而不必区分是几级菜单项（如果不同级别菜单项要分别处理，需要使用“>”等操作分别处理） */
/*处理竖直菜单收齐后的弹出菜单中的子菜单 */ .el-menu--vertical .el-menu--popup .el-submenu__title { height: 40px; line-height: 40px;
} .el-menu--vertical .el-menu--popup .el-menu-item { height: 40px; line-height: 40px;
} .el-menu--vertical .el-menu--popup .el-icon-arrow-right:before { color: #fff;
}

3.面包屑组件

<!-- * @Description: 全局面包屑组件 Breadcrumb/index.vue * @Version: 2.0 * @Autor: lhl * @Date: 2020-08-04 17:51:48 * @LastEditors: lhl * @LastEditTime: 2020-08-20 16:57:07 -->
<template>
  <div class="breadcrumb-box">
    <!-- separator-class="el-icon-arrow-right" 图标分隔符 class -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="item in breadList" :to="{path: item.path }" :key="item.name"
      >{{item.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script> export default { created() { this.getBreadcrumb(); }, data() { return { breadList: [], }; }, watch: { $route() { this.getBreadcrumb(); }, }, methods: { getBreadcrumb() { let matched = this.$route.matched.filter((item) => item.name); // console.log(matched,'matched')
      this.breadList = matched; }, }, }; </script>
<style lang='scss' scoped> //@import url(); 引入公共css类 .breadcrumb-box{ padding: 10px 0; background: #fff; border-bottom: 1px solid #333;
}
</style>

  以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！