request.ts文件为axios封装,可在此拦截操作请求和回复
组件文件夹,存放公共组件,如SvgIcon图标组件、Table表格组件等
封装hooks函数,公共函数的提取
存放图标组件,图标组件使用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>
整体的的布局组件,在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>
路由管理,使用history模式
状态管理,使用pinia
存放样式文件,模板里主要存放的是主题文件,使用scss。 文件中的函数以及样式在main.ts中引入过后即可使用
定义的类型和接口
界面组件
界面入口
项目入口文件
根据不同环境配置的路径地址,常量名称必须是VITE_***
格式,在vite项目中引入时的方式为import.meta.env.VITE_***
。
还需要在vite.config.ts
文件中设置才可引用,具体见文件
配置了icons的引入、elemnet的按需引入和自动注册、element图标的使用、windicss的引入、符号别名的设置、server的设置。