log1997 / 404

404自定义界面

Vue3 + Vite4 + Element + Windicss + Bootstrap

文件夹介绍

🅰️api

request.ts文件为axios封装，可在此拦截操作请求和回复

🆒components

组件文件夹，存放公共组件，如SvgIcon图标组件、Table表格组件等

👀hooks

封装hooks函数，公共函数的提取

🪪icons

存放图标组件，图标组件使用vite插件vite-plugin-svg-icon引入

plugins[
    ...
          createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), "src/icons")],
        // 指定symbolId格式
        symbolId: "icon-[dir]-[name]",
      }),
      ...
]

使用时在组件内按如下方法使用即可

    <svg-icon :name="'menu'" class="svgMenu cursor-pointer"></svg-icon>

🏬layout

整体的的布局组件，在router文件中根路径下引入。 包含Header、Main、Footer组件，布局使用了bootstrap的响应式布局 如菜单列表的写法

    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <!-- <span class="navbar-toggler-icon"></span> -->
          <svg-icon :name="'open'"></svg-icon>
        </button>
        <div
          class="nav-list collapse navbar-collapse"
          id="navbarSupportedContent"
        >
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li
              class="nav-item"
              v-for="item in navList.data"
              :key="item.id"
              @click="skip(item.url)"
            >
              <a class="nav-link active" aria-current="page" href="#">{{
                item.name
              }}</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

使用媒体查询监听屏幕宽度自适应调整布局 如Header组件中，屏幕宽度大于1200px时始终保持headeer栏宽度为200px

//  @/layout/components/Header.vue
@media screen and (min-width: 1200px) {
  .header-container {
    width: 1200px;
    margin: 0 auto;
  }
}

其中Main组件中写入

      <router-view class="main-container-content"></router-view>

🏳️‍⚧️router

路由管理，使用history模式

🛒store

状态管理，使用pinia

🍟style

存放样式文件，模板里主要存放的是主题文件，使用scss。 文件中的函数以及样式在main.ts中引入过后即可使用

🥅types

定义的类型和接口

🎊views

界面组件

🙈App.vue

界面入口

🧵Main.ts

项目入口文件

🗽env文件

根据不同环境配置的路径地址，常量名称必须是VITE_***格式，在vite项目中引入时的方式为import.meta.env.VITE_***。 还需要在vite.config.ts文件中设置才可引用，具体见文件

🪔vite.config.ts

配置了icons的引入、elemnet的按需引入和自动注册、element图标的使用、windicss的引入、符号别名的设置、server的设置。

📦在.env文件中修改链接