布局: 完善左侧栏图标

前言

前一段时间, 写了强盛集团管理系统(基于BPMN引擎的工作流系统), 打算使用qiankun改造下项目架构, 迈向微前端。在上一章的基础上, 搭建基座应用的布局, 此章为完善左侧栏图标。

规范静态资源

assets
  ├─css 重置样式表等
  ├─icons 生成的icon.js
  ├─image 图片库
  └─svg 图标svg

1. 放置一份初始样式表, 新建assets/css/reset.css

/*
  1. 使用更直观的 box-sizing 模型
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
  2. 移除默认 margin
  */
* {
  margin: 0;
}
/*
  3. 在应用中允许基于百分比的高度
  */
html,
body {
  height: 100%;
}
/*
  排版调整
  4. 添加无障碍行高
  5. 改进文本渲染
  */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. 改进媒体默认设置
  */
img,
picture,
video,
canvas,
svg {
  /* display: block; */
  max-width: 100%;
}
/*
7. 删除内置表单排版样式
*/
input,
button,
textarea,
select {
  font: inherit;
}
/*
  8. 避免文字溢出
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/*
  9. 创建根层叠上下文
  */
#root,
#__next {
  isolation: isolate;
}

样式表初始化主要目的是为了使代码在不同的游览器中表现一样, 所有需要来初始化默认样式。

左侧栏配置图标

vue-svgicon 方式

vue-svgicon 本质会把 svg 图标解析成 js 文件，在项目中是通过 import 导入生成的 js 文件来达到对 svg 图标的引用

1. 使用 svg 来做菜单图标, 与阿里矢量图搭配

yarn add vue-svgicon@3.2.6 -D

2. 加几个基本样式, 新建assets/css/vue-svgicon.css

/* recommended css code for vue-svgicon */
.svg-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  color: inherit;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  text-align: center;
}

.svg-fill {
  fill: currentColor;
  stroke: none;
}

.svg-up {
  /* 默认 */
  transform: rotate(0deg);
}

.svg-right {
  transform: rotate(90deg);
}

.svg-down {
  transform: rotate(180deg);
}

.svg-left {
  transform: rotate(-90deg);
}

1. 注册 svg 插件, 新建plugins/svg.js

import "@/assets/css/vue-svgicon.css";
import Vue from "vue";
import SvgIcon from "vue-svgicon";
import "@/assets/icons";

Vue.use(SvgIcon, {
  tagName: "icon",
});

1. 引入 svg 插件, plugins/index.js里导入

import "./svg";

1. 配置执行脚本

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "svg": "vsvg -s ./src/assets/svg -t ./src/assets/icons"
  }
}

这个脚本的意思是将src/assets/svg下的 svg 文件转为 js, 存储到src/assets/icons下

1. 去阿里矢量库找点素材吧

下载 svg 类型的文件保存到到assets/svg/下

1. 执行脚本

yarn svg

1. 重新启动基座

yarn serve

此时, 还需要改造 router, 将 icon 添加上去,

跳到改造 router 继续学习吧

## 改造 router

1. 子应用 router 中的 meta 添加 icon

// router/modules/system.js  子应用的菜单
import Layout from "@/components/Layout";
const appRouter = {
  path: "/system",
  component: Layout,
  name: "System",
  meta: {
    title: "微应用",
    icon: "home",
  },
  children: [
    {
      path: "/system/",
      name: "Home",
      meta: { title: "微应用首页", icon: "home" },
    },
    {
      path: "/system/about",
      name: "About",
      meta: { title: "微应用关于", icon: "index" },
    },
  ],
};
export default appRouter;

1. 基座 router 中的 meta 添加 icon

// router/index.js
export const routes = [
  {
    path: "/",
    name: "home",
    component: Layout,
    redirect: "/",
    meta: { title: "基座", icon: "base" },
    children: [
      {
        path: "/",
        name: "home",
        meta: { title: "基座首页", icon: "base" },
        component: HomeView,
      },
      {
        path: "/about",
        name: "about",
        meta: { title: "基座关于", icon: "nested" },
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
      },
    ],
  },
  SystemRoute,
];

## 改造左侧栏

1. 改造LayoutAsideMenuItem.vue

<template>
  <li class="layout-aside-menu-item">
    <el-submenu v-if="item.children" :index="item.path">
      <template slot="title">
        <div class="menu-name">
          <icon :name="item.meta && item.meta.icon" scale="0.8"></icon>
          <span slot="title">{{ item.meta && item.meta.title }}</span>
        </div>
      </template>
      <layout-aside-menu-item
        v-for="subItem in item.children"
        :item="subItem"
        :key="subItem.path"
      >
      </layout-aside-menu-item>
    </el-submenu>
    <el-menu-item v-else :route="item.path" :index="item.path">
      <template slot="title">
        <div class="menu-name">
          <icon :name="item.meta && item.meta.icon" scale="0.8"></icon>
          <span slot="title">{{ item.meta && item.meta.title }}</span>
        </div>
      </template>
    </el-menu-item>
  </li>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "LayoutAsideMenuItem",
  props: ["item"],
  data() {
    return {};
  },
  computed: {
    // ...mapGetters("layout", ["isCollapse"]),
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.layout-aside-menu-item {
  .svg-icon {
    & + span {
      margin-left: 10px;
    }
  }
  .menu-name {
    text-align: left;
  }
}
</style>

主要是添加了 icon 标签和修改了对应的样式

结果展示

总结

至此, 布局之完善左侧栏图标完成, 比较简单, 正好可以从入门开始, 完整获得微前端的入门级体验。

实际很多项目也是从0开始，优先开发业务功能，逐步完成代码规范、提交规范。

而本专栏就是打算将Vue2.x的老项目完成技术架构升级，从而达到技术栈更新、迁移、重构、重写等架构演进。

项目地址: gitee.com/wang_xi_lon…