https://github.com/log1997/404
404自定义界面
https://github.com/log1997/404
Last synced: about 2 months ago
JSON representation
404自定义界面
- Host: GitHub
- URL: https://github.com/log1997/404
- Owner: LOG1997
- Created: 2023-12-13T07:11:48.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-14T05:58:22.000Z (over 2 years ago)
- Last Synced: 2025-06-30T04:40:21.212Z (9 months ago)
- Language: Vue
- Size: 104 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue3 + Vite4 + Element + Windicss + Bootstrap
## 文件夹介绍
### 🅰️api
request.ts文件为axios封装，可在此拦截操作请求和回复
### 🆒components
组件文件夹，存放公共组件，如SvgIcon图标组件、Table表格组件等
### 👀hooks
封装hooks函数，公共函数的提取
### 🪪icons
存放图标组件，图标组件使用vite插件vite-plugin-svg-icon引入
```ts
plugins[
...
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), "src/icons")],
// 指定symbolId格式
symbolId: "icon-[dir]-[name]",
}),
...
]
```
使用时在组件内按如下方法使用即可
```ts
```
### 🏬layout
整体的的布局组件，在router文件中根路径下引入。
包含Header、Main、Footer组件，布局使用了bootstrap的响应式布局
如菜单列表的写法
```ts
```
使用媒体查询监听屏幕宽度自适应调整布局
如Header组件中，屏幕宽度大于1200px时始终保持headeer栏宽度为200px
```css
// @/layout/components/Header.vue
@media screen and (min-width: 1200px) {
.header-container {
width: 1200px;
margin: 0 auto;
}
}
```
其中Main组件中写入
```ts
```
### 🏳️⚧️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文件中修改链接